@dso-toolkit/core 99.4.0 → 100.0.0

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[{\"jsonFileWatcher\":0}],\"openDefault\":[{\"openDefaultWatcher\":0}]}]]],[\"dso-accordion-section.cjs\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-list-button.cjs\",[[257,\"dso-list-button\",{\"label\":[513],\"sublabel\":[513],\"count\":[514],\"min\":[520],\"max\":[520],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[513,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-label_3.cjs\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[{\"watchRemovable\":0}],\"truncate\":[{\"watchTruncate\":0}]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-advanced-select.cjs\",[[17,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-legend-item.cjs\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[513,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"_mode\":[513],\"showOptions\":[32]}]]],[\"dso-map-controls.cjs\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},[[0,\"transitionend\",\"handleTransitionEnd\"]],{\"open\":[{\"watchOpen\":0}]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[8,\"keydown\",\"handleSearchBarButtonKeydown\"],[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[{\"suggestionsWatcher\":0}]}]]],[\"dso-legend.cjs\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-project-item.cjs\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-survey-rating.cjs\",[[1,\"dso-survey-rating\"]]],[\"dso-dropdown-menu.cjs\",[[257,\"dso-dropdown-menu\",{\"checkable\":[6660],\"label\":[513],\"variant\":[513],\"open\":[32],\"_getState\":[64]},[[0,\"dsoClick\",\"dsoClickHandler\"]]]]],[\"dso-header.cjs\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32],\"open\":[32]},null,{\"mainMenu\":[{\"mainMenuChanged\":0}]}]]],[\"dso-legend-group.cjs\",[[257,\"dso-legend-group\",{\"mode\":[513]},null,{\"mode\":[{\"handleModeChange\":0}]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip.cjs\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-banner.cjs\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[516],\"icon\":[516]}]]],[\"dso-card.cjs\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card.cjs\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-dropdown-menu-item.cjs\",[[257,\"dso-dropdown-menu-item\",{\"type\":[513],\"href\":[513],\"checked\":[516],\"_dsoFocus\":[64]}]]],[\"dso-history-item.cjs\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513],\"current\":[516]}]]],[\"dso-map-layer.cjs\",[[257,\"dso-map-layer\",{\"activatable\":[516],\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-layer-object.cjs\",[[257,\"dso-map-layer-object\",{\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-message.cjs\",[[257,\"dso-map-message\",{\"variant\":[513],\"hasActions\":[32]}]]],[\"dso-plekinfo-card.cjs\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner.cjs\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion.cjs\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list.cjs\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-card-container.cjs\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information.cjs\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip.cjs\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-dropdown-menu-group.cjs\",[[257,\"dso-dropdown-menu-group\",{\"label\":[513]}]]],[\"dso-highlight-box.cjs\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[514],\"max\":[514],\"value\":[514],\"step\":[514],\"label\":[513],\"unit\":[513],\"description\":[513]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-segmented-button.cjs\",[[1,\"dso-segmented-button\",{\"groupName\":[513,\"group-name\"],\"options\":[16],\"label\":[513],\"required\":[516],\"activeOption\":[16]}]]],[\"dso-tab.cjs\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[257,\"dso-tabs\"]]],[\"dso-tooltip.cjs\",[[257,\"dso-tooltip\",{\"descriptive\":[516],\"position\":[1],\"strategy\":[1],\"noArrow\":[4,\"no-arrow\"],\"stateless\":[4],\"small\":[4],\"active\":[1540],\"hidden\":[32],\"activate\":[64],\"deactivate\":[64]},null,{\"position\":[{\"watchPosition\":0}],\"strategy\":[{\"watchStrategy\":0}],\"active\":[{\"watchActive\":0}]}]]],[\"dso-viewer-grid.cjs\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"print\":[516],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[{\"documentPanelOpenWatcher\":0}],\"filterPanelOpen\":[{\"filterPanelOpenWatcher\":0}],\"overlayOpen\":[{\"overlayOpenWatcher\":0}]}]]],[\"dso-button-group.cjs\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[257,\"dso-document-component\",{\"heading\":[513],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[513],\"badgeStatus\":[513,\"badge-status\"],\"badgeTooltip\":[513,\"badge-tooltip\"],\"label\":[513],\"labelStatus\":[513,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[514]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[{\"toggleOpen\":0}]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-scrollable.cjs\",[[257,\"dso-scrollable\",{\"_preventFocus\":[4,\"_prevent-focus\"],\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-icon-button.cjs\",[[1,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"expanded\":[516],\"toggled\":[516],\"setFocus\":[64]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32],\"narrowView\":[32]}]]],[\"dso-info_3.cjs\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"errormessage\":[1],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[{\"setIndeterminate\":0}]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}],[257,\"dso-info-button\",{\"active\":[516],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]},[[6,\"focusin\",\"onDocumentFocusIn\"],[7,\"pointerdown\",\"onDocumentPointerDown\"]]]]],[\"dso-alert_7.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[{\"contentWatcher\":0}]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32]},[[8,\"click\",\"handleWindowClick\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-badge\",{\"status\":[513],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"dsot-document-component-demo.cjs\",[[2,\"dsot-document-component-demo\",{\"showCanvas\":[516,\"show-canvas\"],\"showBesluitversie\":[4,\"show-besluitversie\"],\"jsonFile\":[1,\"json-file\"],\"openDefault\":[4,\"open-default\"],\"mode\":[513],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"response\":[32],\"document\":[32],\"openOrClosed\":[32],\"openedAnnotation\":[32],\"filtered\":[32],\"notApplicable\":[32],\"activeAnnotationSelectables\":[32]},null,{\"jsonFile\":[{\"jsonFileWatcher\":0}],\"openDefault\":[{\"openDefaultWatcher\":0}]}]]],[\"dso-accordion-section.cjs\",[[257,\"dso-accordion-section\",{\"handleTitle\":[1,\"handle-title\"],\"wijzigactie\":[1],\"heading\":[1],\"handleUrl\":[1,\"handle-url\"],\"status\":[1],\"attachmentCount\":[2,\"attachment-count\"],\"icon\":[1],\"statusDescription\":[1,\"status-description\"],\"open\":[516],\"hasNestedAccordion\":[516,\"has-nested-accordion\"],\"label\":[1],\"labelStatus\":[1,\"label-status\"],\"activatable\":[516],\"active\":[516],\"hover\":[32],\"focusHandle\":[64]}]]],[\"dso-list-button.cjs\",[[257,\"dso-list-button\",{\"label\":[513],\"sublabel\":[513],\"count\":[514],\"min\":[520],\"max\":[520],\"checked\":[516],\"disabled\":[516],\"subcontentPrefix\":[513,\"subcontent-prefix\"]}]]],[\"dso-map-base-layers.cjs\",[[1,\"dso-map-base-layers\",{\"group\":[1],\"baseLayers\":[16]}]]],[\"dso-map-overlays.cjs\",[[1,\"dso-map-overlays\",{\"group\":[1],\"overlays\":[16]}]]],[\"dso-label_3.cjs\",[[1,\"dso-renvooi\",{\"value\":[1],\"mark\":[16]}],[257,\"dso-label\",{\"compact\":[516],\"removable\":[516],\"status\":[513],\"truncate\":[516],\"removeHover\":[32],\"removeFocus\":[32],\"isTruncated\":[32],\"labelText\":[32],\"_truncateLabel\":[64]},[[4,\"keydown\",\"keyDownListener\"]],{\"removable\":[{\"watchRemovable\":0}],\"truncate\":[{\"watchTruncate\":0}]}],[262,\"dso-slide-toggle\",{\"checked\":[4],\"disabled\":[4],\"accessibleLabel\":[1,\"accessible-label\"],\"labelledbyId\":[1,\"labelledby-id\"],\"identifier\":[1],\"hasVisibleLabel\":[32]}]]],[\"dso-advanced-select.cjs\",[[17,\"dso-advanced-select\",{\"options\":[16],\"active\":[16],\"activeHint\":[1,\"active-hint\"],\"open\":[32]},[[8,\"keydown\",\"keyDownListener\"]]]]],[\"dso-annotation-activiteit.cjs\",[[1,\"dso-annotation-activiteit\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"regelKwalificatie\":[1,\"regel-kwalificatie\"],\"locatieNoemers\":[16],\"regelKwalificatieVoorzetsel\":[1,\"regel-kwalificatie-voorzetsel\"]}]]],[\"dso-annotation-gebiedsaanwijzing.cjs\",[[1,\"dso-annotation-gebiedsaanwijzing\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1]}]]],[\"dso-annotation-omgevingsnormwaarde.cjs\",[[1,\"dso-annotation-omgevingsnormwaarde\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"naam\":[1],\"toelichting\":[1],\"waardes\":[16],\"eenheid\":[1]}]]],[\"dso-legend-item.cjs\",[[257,\"dso-legend-item\",{\"disabled\":[516],\"disabledMessage\":[513,\"disabled-message\"],\"activatable\":[516],\"active\":[516],\"_mode\":[513],\"showOptions\":[32]}]]],[\"dso-map-controls.cjs\",[[257,\"dso-map-controls\",{\"open\":[1540],\"disableZoom\":[1,\"disable-zoom\"],\"hideContent\":[32],\"toggleVisibility\":[64]},[[0,\"transitionend\",\"handleTransitionEnd\"]],{\"open\":[{\"watchOpen\":0}]}]]],[\"dso-annotation-kaart.cjs\",[[1,\"dso-annotation-kaart\",{\"wijzigactie\":[513],\"naam\":[1],\"href\":[513]}]]],[\"dso-autosuggest.cjs\",[[262,\"dso-autosuggest\",{\"suggestions\":[16],\"loading\":[4],\"loadingLabel\":[1,\"loading-label\"],\"loadingDelayed\":[2,\"loading-delayed\"],\"notFoundLabel\":[1,\"not-found-label\"],\"mark\":[16],\"showSuggestions\":[32],\"selectedSuggestion\":[32],\"selectedSuggestionGroup\":[32],\"notFound\":[32],\"showLoading\":[32]},[[8,\"keydown\",\"handleSearchBarButtonKeydown\"],[4,\"click\",\"onDocumentClick\"]],{\"suggestions\":[{\"suggestionsWatcher\":0}]}]]],[\"dso-legend.cjs\",[[257,\"dso-legend\",{\"tabItems\":[16]}]]],[\"dso-project-item.cjs\",[[257,\"dso-project-item\",{\"label\":[1]}]]],[\"dso-survey-rating.cjs\",[[1,\"dso-survey-rating\"]]],[\"dso-dropdown-menu.cjs\",[[257,\"dso-dropdown-menu\",{\"checkable\":[6660],\"label\":[513],\"variant\":[513],\"open\":[32],\"_getState\":[64]},[[0,\"dsoClick\",\"dsoClickHandler\"]]]]],[\"dso-header.cjs\",[[257,\"dso-header\",{\"mainMenu\":[16],\"compact\":[1],\"authStatus\":[1,\"auth-status\"],\"loginUrl\":[1,\"login-url\"],\"logoutUrl\":[1,\"logout-url\"],\"showHelp\":[4,\"show-help\"],\"helpUrl\":[1,\"help-url\"],\"userProfileName\":[1,\"user-profile-name\"],\"userProfileUrl\":[1,\"user-profile-url\"],\"userHomeUrl\":[1,\"user-home-url\"],\"userHomeActive\":[4,\"user-home-active\"],\"visibleMenuItemsCount\":[32],\"dropdownOptionsOffset\":[32],\"open\":[32]},null,{\"mainMenu\":[{\"mainMenuChanged\":0}]}]]],[\"dso-legend-group.cjs\",[[257,\"dso-legend-group\",{\"mode\":[513]},null,{\"mode\":[{\"handleModeChange\":0}]}]]],[\"dso-mark-bar.cjs\",[[1,\"dso-mark-bar\",{\"value\":[1],\"label\":[1],\"current\":[2],\"totalCount\":[2,\"total-count\"],\"dsoFocus\":[64]}]]],[\"dso-onboarding-tip.cjs\",[[257,\"dso-onboarding-tip\",{\"placement\":[1],\"ready\":[32],\"popoverOpen\":[32]}]]],[\"dso-pagination.cjs\",[[1,\"dso-pagination\",{\"totalPages\":[2,\"total-pages\"],\"currentPage\":[2,\"current-page\"],\"formatHref\":[16],\"availablePositions\":[32]},[[0,\"dsoSizeChange\",\"sizeChangeHandler\"]]]]],[\"dso-tree-view.cjs\",[[1,\"dso-tree-view\",{\"collection\":[16],\"focusItem\":[64]}]]],[\"dso-action-list-item.cjs\",[[257,\"dso-action-list-item\",{\"step\":[2],\"itemTitle\":[1,\"item-title\"],\"flowLine\":[4,\"flow-line\"],\"warning\":[4],\"divider\":[4]}]]],[\"dso-banner.cjs\",[[257,\"dso-banner\",{\"status\":[513],\"compact\":[516],\"icon\":[516]}]]],[\"dso-card.cjs\",[[257,\"dso-card\",{\"href\":[513],\"mode\":[513],\"active\":[516]}]]],[\"dso-document-card.cjs\",[[257,\"dso-document-card\",{\"href\":[513],\"active\":[516]}]]],[\"dso-dropdown-menu-item.cjs\",[[257,\"dso-dropdown-menu-item\",{\"type\":[513],\"href\":[513],\"checked\":[516],\"_dsoFocus\":[64]}]]],[\"dso-history-item.cjs\",[[257,\"dso-history-item\",{\"type\":[513],\"href\":[513],\"current\":[516]}]]],[\"dso-map-layer.cjs\",[[257,\"dso-map-layer\",{\"activatable\":[516],\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-layer-object.cjs\",[[257,\"dso-map-layer-object\",{\"active\":[516],\"wijzigactie\":[513]}]]],[\"dso-map-message.cjs\",[[257,\"dso-map-message\",{\"variant\":[513],\"hasActions\":[32]}]]],[\"dso-plekinfo-card.cjs\",[[257,\"dso-plekinfo-card\",{\"wijzigactie\":[513],\"href\":[513],\"targetBlank\":[4,\"target-blank\"],\"active\":[516]}]]],[\"dso-skiplink.cjs\",[[1,\"dso-skiplink\",{\"to\":[513],\"label\":[513]}]]],[\"dso-tijdreis-banner.cjs\",[[257,\"dso-tijdreis-banner\"]]],[\"dso-accordion.cjs\",[[257,\"dso-accordion\",{\"variant\":[6145],\"reverseAlign\":[6148,\"reverse-align\"],\"_getState\":[64]}]]],[\"dso-action-list.cjs\",[[257,\"dso-action-list\",{\"listTitle\":[1,\"list-title\"]}]]],[\"dso-card-container.cjs\",[[257,\"dso-card-container\",{\"mode\":[513]}]]],[\"dso-contact-information.cjs\",[[257,\"dso-contact-information\"]]],[\"dso-cursor-tooltip.cjs\",[[257,\"dso-cursor-tooltip\"]]],[\"dso-date-picker.cjs\",[[2,\"dso-date-picker\",{\"name\":[1],\"identifier\":[1],\"disabled\":[516],\"required\":[516],\"invalid\":[516],\"describedBy\":[1,\"described-by\"],\"dsoAutofocus\":[4,\"dso-autofocus\"],\"value\":[513],\"min\":[1],\"max\":[1]}]]],[\"dso-dropdown-menu-group.cjs\",[[257,\"dso-dropdown-menu-group\",{\"label\":[513]}]]],[\"dso-highlight-box.cjs\",[[257,\"dso-highlight-box\",{\"yellow\":[516],\"border\":[516],\"white\":[516],\"green\":[516],\"dropShadow\":[516,\"drop-shadow\"],\"step\":[514]}]]],[\"dso-input-range.cjs\",[[1,\"dso-input-range\",{\"min\":[514],\"max\":[514],\"value\":[514],\"step\":[514],\"label\":[513],\"unit\":[513],\"description\":[513]}]]],[\"dso-logo.cjs\",[[1,\"dso-logo\",{\"name\":[513],\"logoUrl\":[513,\"logo-url\"],\"label\":[513],\"labelUrl\":[513,\"label-url\"],\"ribbon\":[513]}]]],[\"dso-segmented-button.cjs\",[[1,\"dso-segmented-button\",{\"groupName\":[513,\"group-name\"],\"options\":[16],\"label\":[513],\"required\":[516],\"activeOption\":[16]}]]],[\"dso-tab.cjs\",[[257,\"dso-tab\",{\"active\":[516],\"disabled\":[516],\"href\":[1],\"_dsoFocus\":[64]}]]],[\"dso-tabs.cjs\",[[257,\"dso-tabs\"]]],[\"dso-viewer-grid.cjs\",[[257,\"dso-viewer-grid\",{\"filterPanelTitle\":[513,\"filter-panel-title\"],\"filterPanelOpen\":[516,\"filter-panel-open\"],\"overlayOpen\":[516,\"overlay-open\"],\"documentPanelOpen\":[516,\"document-panel-open\"],\"print\":[516],\"mainSize\":[513,\"main-size\"],\"activeTab\":[1,\"active-tab\"],\"documentPanelSize\":[513,\"document-panel-size\"],\"mainPanelExpanded\":[4,\"main-panel-expanded\"],\"mainPanelHidden\":[4,\"main-panel-hidden\"],\"tabView\":[32],\"_checkMainPanelVisibility\":[64]},null,{\"documentPanelOpen\":[{\"documentPanelOpenWatcher\":0}],\"filterPanelOpen\":[{\"filterPanelOpenWatcher\":0}],\"overlayOpen\":[{\"overlayOpenWatcher\":0}]}]]],[\"dso-button-group.cjs\",[[257,\"dso-button-group\",{\"direction\":[513]}]]],[\"dso-icon.cjs\",[[1,\"dso-icon\",{\"icon\":[1]}]]],[\"dso-annotation-locatie_2.cjs\",[[257,\"dso-document-component\",{\"headingLevel\":[514,\"heading-level\"],\"kop\":[6145],\"inhoud\":[6145],\"open\":[516],\"filtered\":[516],\"notApplicable\":[516,\"not-applicable\"],\"badge\":[513],\"badgeStatus\":[513,\"badge-status\"],\"badgeTooltip\":[513,\"badge-tooltip\"],\"label\":[513],\"labelStatus\":[513,\"label-status\"],\"annotated\":[516],\"gereserveerd\":[6145],\"vervallen\":[6145],\"openAnnotation\":[516,\"open-annotation\"],\"alternativeTitle\":[513,\"alternative-title\"],\"type\":[513],\"wijzigactie\":[513],\"annotationsWijzigactie\":[513,\"annotations-wijzigactie\"],\"mark\":[16],\"recursiveToggle\":[8,\"recursive-toggle\"],\"ozonContentUrlResolver\":[16],\"ozonContentBegripResolver\":[16],\"mode\":[513],\"href\":[513]}],[1,\"dso-annotation-locatie\",{\"wijzigactie\":[513],\"active\":[516],\"gewijzigdeLocatie\":[516,\"gewijzigde-locatie\"],\"locatieNoemer\":[1,\"locatie-noemer\"]}]]],[\"dso-attachments-counter_2.cjs\",[[1,\"dso-attachments-counter\",{\"count\":[514]}],[257,\"dso-expandable\",{\"open\":[516],\"enableAnimation\":[516,\"enable-animation\"],\"minimumHeight\":[2,\"minimum-height\"],\"isClosed\":[32]},[[0,\"transitionstart\",\"transitionstartHandler\"],[0,\"transitionend\",\"transitionendHandler\"]],{\"open\":[{\"toggleOpen\":0}]}]]],[\"dso-progress-indicator.cjs\",[[1,\"dso-progress-indicator\",{\"label\":[1],\"size\":[513],\"block\":[516]}]]],[\"dso-responsive-element.cjs\",[[257,\"dso-responsive-element\",{\"sizeAlias\":[32],\"sizeWidth\":[32],\"getSize\":[64]}]]],[\"dso-scrollable.cjs\",[[257,\"dso-scrollable\",{\"_preventFocus\":[4,\"_prevent-focus\"],\"scrollPosition\":[32],\"_setScrollState\":[64]}]]],[\"dso-icon-button.cjs\",[[1,\"dso-icon-button\",{\"icon\":[513],\"label\":[513],\"variant\":[513],\"tooltipPlacement\":[513,\"tooltip-placement\"],\"disabled\":[516],\"expanded\":[516],\"toggled\":[516],\"setFocus\":[64]}]]],[\"dso-modal.cjs\",[[1,\"dso-modal\",{\"fullscreen\":[516],\"modalTitle\":[1,\"modal-title\"],\"dialogRole\":[1,\"dialog-role\"],\"returnFocus\":[4,\"return-focus\"],\"closable\":[4],\"ariaId\":[32],\"narrowView\":[32]}]]],[\"dso-info_3.cjs\",[[262,\"dso-selectable\",{\"type\":[1],\"identifier\":[1],\"name\":[1],\"value\":[1],\"invalid\":[4],\"describedById\":[1,\"described-by-id\"],\"errormessage\":[1],\"labelledById\":[1,\"labelled-by-id\"],\"disabled\":[4],\"required\":[4],\"checked\":[516],\"indeterminate\":[4],\"infoFixed\":[4,\"info-fixed\"],\"infoActive\":[32],\"toggleInfo\":[64]},null,{\"indeterminate\":[{\"setIndeterminate\":0}]}],[257,\"dso-info\",{\"fixed\":[516],\"active\":[516]}],[257,\"dso-info-button\",{\"active\":[516],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32],\"setFocus\":[64]},[[6,\"focusin\",\"onDocumentFocusIn\"],[7,\"pointerdown\",\"onDocumentPointerDown\"]]]]],[\"dso-alert_7.cjs\",[[1,\"dso-ozon-content\",{\"content\":[1],\"inline\":[516],\"mark\":[16],\"urlResolver\":[16],\"begripResolver\":[16],\"annotated\":[516],\"state\":[32]},null,{\"content\":[{\"contentWatcher\":0}]}],[257,\"dso-alert\",{\"status\":[513],\"roleAlert\":[4,\"role-alert\"],\"compact\":[516],\"closable\":[4]}],[257,\"dso-table\",{\"noModal\":[516,\"no-modal\"],\"isResponsive\":[32],\"modalActive\":[32],\"placeholderHeight\":[32]}],[257,\"dso-image-overlay\",{\"wijzigactie\":[1],\"active\":[32],\"zoomable\":[32]},[[2,\"load\",\"loadListener\"]]],[257,\"dso-ozon-content-toggletip\",{\"icon\":[513],\"active\":[32]},[[8,\"click\",\"handleWindowClick\"]]],[257,\"dso-panel\",{\"closeButtonLabel\":[1,\"close-button-label\"],\"emphasized\":[4]}],[257,\"dso-badge\",{\"status\":[513],\"label\":[513],\"toggletipPlacement\":[513,\"toggletip-placement\"],\"toggletipActive\":[32],\"hasToggletip\":[32]}]]]]"), options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -71,7 +71,6 @@
     "components/tabs/tabs.js",
     "components/tabs/components/tab.js",
     "components/tijdreis-banner/tijdreis-banner.js",
-    "components/tooltip/tooltip.js",
     "components/tree-view/tree-view.js",
     "components/viewer-grid/viewer-grid.js"
   ],

package/dist/collection/components/advanced-select/advanced-select.css

@@ -29,6 +29,7 @@
   border-radius: 4px;
   cursor: pointer;
   background-color: #fff;
+  text-align: start;
   line-height: inherit;
   font-family: inherit;
   font-size: inherit;
@@ -40,19 +41,19 @@
 .active-option dso-icon {
   color: #275937;
 }
-.active-option dso-label {
-  margin-inline-start: 8px;
-}
 
+@media (max-width: 480px) {
+  .active-option-label {
+    hyphens: auto;
+  }
+}
 .active-option-label {
-  line-height: 1;
-  padding-block: 12px;
+  line-height: 1.5;
+  padding-block: 8px;
   padding-inline: 8px;
-  overflow: hidden;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
-  white-space: nowrap;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Nodig om lange titels op de zelfde regel te houden */
-  text-overflow: ellipsis;
+}
+.active-option-label dso-label {
+  margin-inline-end: 8px;
 }
 
 .active-option-aside {
@@ -63,8 +64,8 @@
 .badges {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   gap: 4px;
+  padding-block-start: 8px;
   padding-inline-start: 8px;
 }
 

package/dist/collection/components/advanced-select/advanced-select.js

@@ -74,8 +74,8 @@ export class AdvancedSelect {
     }
     render() {
         const icon = this.open ? "caret-up" : "caret-down";
-        return (h("div", { key: 'caa960271b7eb724eedf59a6ecc3963d0edd44a7', class: "advanced-select" }, h("div", { key: 'ee68b2509312c5069a1efa48340b41420b815900', class: "advanced-select-button" }, h("button", { key: 'fcf9ad0e9f20869b4f023054b8a0d5c85120ce4b', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h(ActiveGroupLabel, { key: '1fa22990b25898c3efb0e30f37f1be77b521a7c6', active: this.active, options: this.options }), h("span", { key: 'ecd6a91ab2508d20beb307a1455199cf2639311f', class: "active-option-label" }, this.active?.label ?? "Selecteer een optie"), h("span", { key: 'f9614e4abb3d443df8460a05e65177da03eb5aa9', class: "active-option-aside" }, h("dso-icon", { key: '3ce4f7aa4468e2697c5a4a51ba59bc6f50dffb09', icon: icon, "aria-hidden": "true" }))), this.open && (h("div", { key: '9ef3f404c54ae68f8ecdfa583c1e1f5e6043473c', class: "groups-container" }, h("ul", { key: '2060f56e121dc676f80e5fb421f7417c57f69c89', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick, variant: optionOrGroup.variant }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
-            ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))), this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && optionOrGroup?.summaryCounter) && (h("span", { key: '9d376f04f707c29a7e094b760aacd117cf0a2d39', class: "badges" }, this.options
+        return (h("div", { key: 'caa960271b7eb724eedf59a6ecc3963d0edd44a7', class: "advanced-select" }, h("div", { key: 'ee68b2509312c5069a1efa48340b41420b815900', class: "advanced-select-button" }, h("button", { key: 'fcf9ad0e9f20869b4f023054b8a0d5c85120ce4b', "aria-expanded": this.open.toString(), class: clsx(["active-option", { open: this.open }]), type: "button", onClick: this.toggleOpen, ref: (element) => (this.toggleButtonElementRef = element) }, h("span", { key: 'bfc430f8bbf04dd3b96b7899e7f6291a62b1bb9b', class: "active-option-label" }, h(ActiveGroupLabel, { key: '9cd3e3c60b0286c0d50a45f8d8de830c42728f33', active: this.active, options: this.options }), this.active?.label ?? "Selecteer een optie"), h("span", { key: 'ef87672c65cd65e7a6a6ceb37b5c15e98c0bb58c', class: "active-option-aside" }, h("dso-icon", { key: '0eb9b166c8894579d44e0d0a0787ceba75bd52c1', icon: icon, "aria-hidden": "true" }))), this.open && (h("div", { key: '43fede22505062bd93adf933307eb76462293e2c', class: "groups-container" }, h("ul", { key: '9f12aadfca802808c8e99181e6819a872f9f39e4', class: "groups" }, this.options.map((optionOrGroup) => ("options" in optionOrGroup && (h("li", { class: clsx(["group", { [`group-${optionOrGroup.variant}`]: !!optionOrGroup.variant }]) }, h("p", { class: "group-label" }, optionOrGroup.label), h("ul", { class: "options" }, optionOrGroup.options.map((option) => (h("li", null, h(OptionButton, { option: option, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick, variant: optionOrGroup.variant }))))), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) ||
+            ("placeholder" in optionOrGroup && (h("li", { class: "group" }, h("p", { class: "group-label" }, optionOrGroup.label), h("p", { class: "placeholder" }, optionOrGroup.placeholder), optionOrGroup.redirect && (h(RedirectAnchor, { redirect: optionOrGroup.redirect, callback: this.handleRedirectClick }))))) || (h("li", null, h(OptionButton, { option: optionOrGroup, active: this.active, activeHint: this.activeHint, callback: this.handleOptionClick })))))))), this.options.some((optionOrGroup) => "summaryCounter" in optionOrGroup && optionOrGroup?.summaryCounter) && (h("span", { key: 'fd9e7f96ab6bd4a79974991e6d51f208e7ea2346', class: "badges" }, this.options
             .filter((option) => "options" in option && "summaryCounter" in option && !!option?.summaryCounter)
             .map((group) => (h("dso-badge", { status: group.variant ?? "outline", label: group.badgeLabel ?? `Toon toelichting voor ${group.label.toLowerCase()}` }, group.options.length, h("div", { slot: "toggletip" }, group.toggletip))))))));
     }

package/dist/collection/components/document-component/document-component-heading.js

@@ -1,25 +1,41 @@
 import { h } from "@stencil/core";
-export const Heading = ({ heading, mode, href, onClick, ...props }, children) => {
+export const Heading = ({ headingLevel, mode, href, onClick, ...props }, children) => {
+    // In the table of contents the nested lists carry the structure, so a heading level would add nothing but noise to
+    // the heading list of assistive technology. The `headingLevel` prop is ignored here.
+    if (mode === "table-of-contents") {
+        const label = h("div", { ...props }, children);
+        if (!href) {
+            return label;
+        }
+        return (h("a", { href: href, onClick: onClick, class: "heading-anchor" }, label));
+    }
     let headingElement;
-    switch (heading) {
-        default:
-        case "h2":
-            headingElement = (h("h2", { ...props, onClick: mode === "document" ? onClick : undefined }, children));
-            break;
-        case "h3":
-            headingElement = (h("h3", { ...props, onClick: mode === "document" ? onClick : undefined }, children));
-            break;
-        case "h4":
-            headingElement = (h("h4", { ...props, onClick: mode === "document" ? onClick : undefined }, children));
-            break;
-        case "h5":
-            headingElement = (h("h5", { ...props, onClick: mode === "document" ? onClick : undefined }, children));
-            break;
-        case "h6":
-            headingElement = (h("h6", { ...props, onClick: mode === "document" ? onClick : undefined }, children));
+    // The native heading elements only go up to `h6`. Deeper levels are expressed with the `heading` role and an
+    // explicit `aria-level` so assistive technology still exposes the correct structure.
+    if (headingLevel > 6) {
+        headingElement = (h("div", { role: "heading", "aria-level": headingLevel, ...props, onClick: onClick }, children));
     }
-    if (mode === "table-of-contents" && href) {
-        return (h("a", { href: href, onClick: onClick, class: "heading-anchor" }, headingElement));
+    else {
+        // In this branch the level is 6 or lower, so it maps onto a native `h2`–`h6` element.
+        let HeadingTag;
+        switch (headingLevel) {
+            case 3:
+                HeadingTag = "h3";
+                break;
+            case 4:
+                HeadingTag = "h4";
+                break;
+            case 5:
+                HeadingTag = "h5";
+                break;
+            case 6:
+                HeadingTag = "h6";
+                break;
+            default:
+                HeadingTag = "h2";
+                break;
+        }
+        headingElement = (h(HeadingTag, { ...props, onClick: onClick }, children));
     }
     return headingElement;
 };

package/dist/collection/components/document-component/document-component.css

@@ -1264,6 +1264,7 @@ mark.dso-highlight {
   align-items: start;
   display: flex;
   font-size: 1rem;
+  font-weight: 700;
   color: #275937;
   margin: 0;
 }

package/dist/collection/components/document-component/document-component.js

@@ -35,9 +35,12 @@ const AantekenAlert = ({ gereserveerd, vervallen }) => {
 export class DocumentComponent {
     constructor() {
         /**
-         * The heading element to use.
+         * The heading level to use (only in mode="document"). When the level is 6 or lower a native heading element
+         * (`<h2>` … `<h6>`) is rendered; deeper levels are rendered as `<div role="heading" aria-level="*">` because HTML
+         * has no native heading elements beyond `<h6>`. In mode="table-of-contents" the nested lists carry the structure
+         * and no heading is rendered.
          */
-        this.heading = "h2";
+        this.headingLevel = 2;
         /**
          * This boolean attribute indicates whether the children are visible.
          */
@@ -182,17 +185,17 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: 'a48ae7fa0947b4b20fada1cc2bb3387cdabab584', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'a711af7d939b538542082069e6c36e7372e09e71', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'a907eae0b2f170e6f062bae1bbe0c27d0df26a39', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'e533b0435eb0b066669e2b5918f39a1b3318f79b', class: "heading" }, h(Heading, { key: '55cc616a37e1002c47b1a0f5cf8dca5ca66762a8', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '5266e55024980b9642e9ee1997048ec753a3762d', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '741522372977aaa057d8b888ef16d5db9d499f03' }, this.notApplicable && h("span", { key: 'b0133fefda448ebfc16fed349c8c40ac8c0cd2ef', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '313dcfa39102b0b25a2c847cae3d347434d3365d', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '743f7f3d8779cde1fbcdd6fda72c073ff96fcfb2', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: '0d4d8cadf90b7c9e8fec841f715690614fc79196' }, h("dso-badge", { key: '3eeb36147c84b66b844d3bfd4ea4d1ca8f8e7452', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '73f8baa4d973dd54189be2f82683b94bfa53b44d', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '5d52962a0e4c37ba953896a30079b4691a4ef843', class: "addons" }, this.label && (h("dso-label", { key: 'bee68bbf3e3e58c55e34a3185f152ed38d681f00', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '031bef8873307d4d5fbf1b4e471af85b87bad996', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
+        return (h(Host, { key: 'f8988dc23744ac52a41583fcdcba34b4a8a676b8', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ba2f55b584cc1104770e654fcbabdee87d707ce7', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'd84dd54d504f7772adca92455925529ba9e99488', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '296ae8cb10db9e0482375fa361096df2f7fbbdcf', class: "heading" }, h(Heading, { key: 'e7240a4f5da77b667b3c838aecee3c50a70c0886', headingLevel: this.headingLevel, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'c835dab68028116f2679c1a6c4a9476b535471fd', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", expanded: this.open, icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '48280777989cc704dd59c1637695cf49d276b5fd' }, this.notApplicable && h("span", { key: '39f8d041ae3a558b4283ab9ee915f17d2388ad9a', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'a95d529b1948a25b64f71fac2b17d29ab593a0cb', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '489cc7c39def4edabe9e1dd3414857feca3167b9', label: this.recursiveToggle === true ? "Verberg onderliggende artikelen" : "Toon onderliggende artikelen", class: "recursive-toggle", expanded: this.recursiveToggle === true, icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'cdb81b0cc410d703c8c9e21621f8c0bf5d97a276' }, h("dso-badge", { key: '8b6fd2528543889faaecf8f937fa0ac6cadc80ec', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '4967e1b13815576b5e166da3d6cbc06e3f22e2ba', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '276f44c01f6ec492c866bb0aeba72ee186cb447d', class: "addons" }, this.label && (h("dso-label", { key: '3ddfcfc595536cfea798c26413c13b51d82a3e2c', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '9573e100ba6b4cad8be15b7b2a2e9aa817369793', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", expanded: this.openAnnotation, variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({
                 current: this.openAnnotation,
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: '30c118338ade5a9dbc16a9647711c25752403adb', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: '1dd094f8321d2a74504e7589f220c1ae06c54c48', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: 'dd3eb5839739a04c8c716c51927d7a7c8a8606bf', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: '6c4d109c892ea8b8f095105667fc2fe4a55ea506', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '132a3e9c0cd8ac8bf4e06448a9f48c324e66da6a', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '65863fcad5d454b9966f05d7935dab6587c582df', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '8280151a2736110ae25cefeab90bfdcd0cbef021', class: "content", part: "_content" }, h(AantekenAlert, { key: '1a357b22370e08b7b0b29bead721f6448d93611e', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '8ee59e093dcb2f980accaa84c7d61ecf7719b23d', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'b8b0ee6631e85d6c99932b50aec1ab0970a35bb6', class: "children-container", part: "_children-container" }, h("slot", { key: '664dc036cf170e451d3635e97c2ad868c2b8f79e' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'd173f5957242b8180fd67f07e5a0f2f71e68ca8e', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'f17a9b19fd23c5dcb5e914792011c3bcc336da86', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: 'e03b6b7d2db9e8cbc13f9105ab9aa3e2af8a5793', class: "content", part: "_content" }, h(AantekenAlert, { key: '1516df95cd7ffb3795cc71bff9a866892b47501b', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'fee5f88d382231c11aff522eff75b82df5ee6afe', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '8888df264cefd314382d48505ff8641c20c5cc86', class: "children-container", part: "_children-container" }, h("slot", { key: '56e85d5200913609e0a03c929a2d889c75ae2d7e' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }
@@ -208,25 +211,25 @@ export class DocumentComponent {
     }
     static get properties() {
         return {
-            "heading": {
-                "type": "string",
+            "headingLevel": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
-                    "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The heading element to use."
+                    "text": "The heading level to use (only in mode=\"document\"). When the level is 6 or lower a native heading element\r\n(`<h2>` \u2026 `<h6>`) is rendered; deeper levels are rendered as `<div role=\"heading\" aria-level=\"*\">` because HTML\r\nhas no native heading elements beyond `<h6>`. In mode=\"table-of-contents\" the nested lists carry the structure\r\nand no heading is rendered."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "heading",
-                "defaultValue": "\"h2\""
+                "attribute": "heading-level",
+                "defaultValue": "2"
             },
             "kop": {
                 "type": "string",

package/dist/collection/components/document-component-demo/document-component.demo.js

@@ -70,7 +70,7 @@ export class DocumentComponentDemo {
             }
             return (h("dso-document-component", { annotated: this.isAnnotated(documentComponent), filtered: this.isOpen(documentComponent)
                     ? this.isFiltered(documentComponent)
-                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, heading: "h2", kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
+                    : this.hasFilteredChildren(documentComponent), gereserveerd: documentComponent.gereserveerd, headingLevel: 2, kop: documentComponent.kop, inhoud: documentComponent.inhoud, openAnnotation: this.isOpenedAnnotation(documentComponent), notApplicable: this.isNotApplicable(documentComponent) || path.some((p) => this.isNotApplicable(p)), onDsoAnnotationToggle: (e) => this.handleAnnotationToggle(documentComponent, e.detail), onDsoOpenToggle: () => this.handleOpenToggle(documentComponent), open: this.isOpen(documentComponent), type: documentComponent.type, vervallen: documentComponent.vervallen, wijzigactie: documentComponent.wijzigactie, recursiveToggle: this.recursiveToggleState(documentComponent), onDsoRecursiveToggle: (e) => this.handleRecursiveToggle(documentComponent, e.detail), mode: this.mode, href: this.mode === "table-of-contents" ? "/document/" + documentComponent.documentTechnischId : undefined, onDsoTableOfContentsClick: (e) => this.handleTableOfContentsClick(e), onDsoOzonContentClick: (e) => this.handleOzonContentClick(e), ozonContentUrlResolver: this.ozonContentUrlResolver, ozonContentBegripResolver: this.ozonContentBegripResolver, badge: badge, badgeStatus: badgeStatus, badgeTooltip: badgeTooltip, label: label, labelStatus: labelStatus }, this.isOpenedAnnotation(documentComponent) && (h("div", { slot: "annotations" }, h("dso-annotation-locatie", { active: this.isCheckedSlideToggle(documentComponent), "gewijzigde-locatie": true, locatieNoemer: "Winkelgebied", onDsoActiveChange: () => this.handleSelectableChange(documentComponent) }, h("span", { class: "symboolcode", slot: "symbool", "data-symboolcode": "vszt030" })))), this.showContent(documentComponent) && embeddedDocuments?.documentComponents.length && (h("ul", { class: "dso-document-component-list" }, embeddedDocuments.documentComponents.map((d) => (h("li", { key: d.documentTechnischId }, h(DocumentComponent, { path: [...path, d] }))))))));
         };
         this.MenuButton = ({ documentComponent }) => {
             const { type } = documentComponent;
@@ -207,7 +207,7 @@ export class DocumentComponentDemo {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: 'd92fde8e8e4cc982f005c8571f010c27f36b48e4', class: "dso-document-components" }, h("div", { key: '954d3e761228f6e169f9f49a123ac4ab84f0dd12', class: "dso-navbar" }, h("ul", { key: 'e406db3e0f02b92036f72d99d9bd828b898a0877', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '0ef374e5b148ed43e5bca9c01d5f2f44c0ef280b', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'ab236260f9a6a0b08cce77c0ff84b9a03b51ce44', class: "dso-document-components" }, h("div", { key: 'bb00e379af2aec12362a4e5eee21b335559866a3', class: "dso-navbar" }, h("ul", { key: 'c35d80d6e616224696d974450bedc34a75abc66e', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '63e65905336d74456fbd29bb97363bbae7411ec6', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -82,10 +82,30 @@ export class DropdownMenu {
         return withButton ? [this.host, ...menuItems] : menuItems;
     }
     componentDidRender() {
-        if (this.button && this.popoverElement && !this.cleanUp) {
+        // Only position the popover while it is open. autoUpdate runs on its own ResizeObserver;
+        // keeping it active on a closed (hidden) popover computes bogus constraints that force a
+        // same-frame correction on the next open.
+        if (this.open && this.button && this.popoverElement && !this.cleanUp) {
             const element = this.popoverElement;
             const referenceElement = this.button;
-            this.cleanUp = autoUpdate(referenceElement, element, () => {
+            let initialUpdate = true;
+            const applyPopoverStyles = (x, y) => {
+                if (!element.isConnected) {
+                    return;
+                }
+                if (this.pendingPopoverConstraints) {
+                    const scrollElement = element.querySelector("dso-scrollable") ?? element;
+                    Object.assign(scrollElement.style, {
+                        maxHeight: `${this.pendingPopoverConstraints.availableHeight}px`,
+                        maxInlineSize: `${this.pendingPopoverConstraints.availableWidth}px`,
+                    });
+                }
+                Object.assign(element.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            };
+            const autoUpdateCleanUp = autoUpdate(referenceElement, element, () => {
                 computePosition(referenceElement, element, {
                     strategy: "fixed",
                     middleware: [
@@ -94,23 +114,42 @@ export class DropdownMenu {
                             padding: 2,
                         }),
                         size({
-                            apply({ availableHeight, availableWidth, elements }) {
-                                const scrollElement = elements.floating.querySelector("dso-scrollable") ?? elements.floating;
-                                Object.assign(scrollElement.style, {
-                                    maxHeight: `${availableHeight}px`,
-                                    maxInlineSize: `${availableWidth}px`,
-                                });
+                            apply: ({ availableHeight, availableWidth }) => {
+                                // No direct DOM writes here: this callback runs inside the autoUpdate
+                                // ResizeObserver cycle and would trigger "ResizeObserver loop completed
+                                // with undelivered notifications". The constraints are applied together
+                                // with the position, see applyPopoverStyles.
+                                this.pendingPopoverConstraints = { availableWidth, availableHeight };
                             },
                         }),
                     ],
                     placement: "bottom-start",
                 }).then(({ x, y }) => {
-                    Object.assign(element.style, {
-                        left: `${x}px`,
-                        top: `${y}px`,
+                    if (initialUpdate) {
+                        // The first update runs outside the ResizeObserver cycle and is applied
+                        // directly so the popover does not show up unpositioned.
+                        initialUpdate = false;
+                        applyPopoverStyles(x, y);
+                        return;
+                    }
+                    // Defer DOM writes until the next frame so ResizeObserver notifications can
+                    // settle before the popover mutates its own layout again.
+                    if (this.popoverFrameId !== undefined) {
+                        cancelAnimationFrame(this.popoverFrameId);
+                    }
+                    this.popoverFrameId = requestAnimationFrame(() => {
+                        this.popoverFrameId = undefined;
+                        applyPopoverStyles(x, y);
                     });
                 });
             });
+            this.cleanUp = () => {
+                if (this.popoverFrameId !== undefined) {
+                    cancelAnimationFrame(this.popoverFrameId);
+                    this.popoverFrameId = undefined;
+                }
+                autoUpdateCleanUp();
+            };
         }
     }
     toggleOptions(force) {
@@ -161,7 +200,7 @@ export class DropdownMenu {
     }
     render() {
         const buttonId = uuidv4();
-        return (h(Host, { key: '63dba747057e58c38f29d830b2a867dd02e07541', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '3711038ff64c7e43a27c1a0a072fa904db484068', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '45037c7c83a4edecf75762b703115c34c2a39804', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '34099ec42eef8744a3701e3fa90701e53791a8e5', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: 'd1b88fa03257379e7b213c29616b02f24872e2aa' }, h("slot", { key: '7e9c881bc357590c9750ddbe3a6f6fdac46733c7' })))));
+        return (h(Host, { key: '86c4a174ec1a4f8083f6e13728bef4d0fbf73d2b', onFocusout: this.focusOutListener, onKeyDown: this.keyDownHandler }, this.label && (h("button", { key: '6b93303a8ee2717870bc52147667485e9f56c0cb', id: buttonId, class: `dso-${this.variant}`, type: "button", onClick: () => this.toggleOptions(), "aria-expanded": this.open.toString(), "aria-haspopup": "menu", ref: (element) => (this.button = element) }, this.label, h("dso-icon", { key: '02d4af678a2de9e68c6c7983279e8a8af1b221d5', icon: this.open ? "chevron-up" : "chevron-down" }))), h("div", { key: '0653885c62d4e5f9e6567cd1a06ef1f60c31bd50', popover: "manual", class: "dso-dropdown-options", "aria-labelledby": buttonId, role: "menu", ref: (element) => (this.popoverElement = element) }, h("dso-scrollable", { key: '008a6527bce7398d5bf016431c90343011b62596' }, h("slot", { key: 'cbfdd95cd211485fc8672e9dff1f3bb3ed233d99' })))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.js

@@ -199,9 +199,29 @@ export class Header {
         if (typeof this.visibleMenuItemsCount === "undefined" && this.navElement) {
             this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);
         }
-        if (this.popoverElement && !this.cleanUp && this.dropdownButtonElement) {
+        // Only position the popover while it is open. autoUpdate runs on its own ResizeObserver;
+        // keeping it active on a closed (hidden) popover computes bogus constraints that force a
+        // same-frame correction on the next open.
+        if (this.open && this.popoverElement && !this.cleanUp && this.dropdownButtonElement) {
             const element = this.popoverElement;
-            this.cleanUp = autoUpdate(this.dropdownButtonElement, element, () => {
+            let initialUpdate = true;
+            const applyPopoverStyles = (x, y) => {
+                if (!element.isConnected) {
+                    return;
+                }
+                if (this.pendingPopoverConstraints) {
+                    const scrollElement = element.querySelector(".dropdown-menu-options") ?? element;
+                    Object.assign(scrollElement.style, {
+                        maxHeight: `${this.pendingPopoverConstraints.availableHeight}px`,
+                        maxInlineSize: `${this.pendingPopoverConstraints.availableWidth}px`,
+                    });
+                }
+                Object.assign(element.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                });
+            };
+            const autoUpdateCleanUp = autoUpdate(this.dropdownButtonElement, element, () => {
                 if (this.dropdownButtonElement) {
                     computePosition(this.dropdownButtonElement, element, {
                         strategy: "fixed",
@@ -211,28 +231,47 @@ export class Header {
                                 padding: this.dropdownOptionsOffset,
                             }),
                             size({
-                                apply({ availableHeight, availableWidth, elements }) {
-                                    const scrollElement = elements.floating.querySelector(".dropdown-menu-options") ?? elements.floating;
-                                    Object.assign(scrollElement.style, {
-                                        maxHeight: `${availableHeight}px`,
-                                        maxInlineSize: `${availableWidth}px`,
-                                    });
+                                apply: ({ availableHeight, availableWidth }) => {
+                                    // No direct DOM writes here: this callback runs inside the autoUpdate
+                                    // ResizeObserver cycle and would trigger "ResizeObserver loop completed
+                                    // with undelivered notifications". The constraints are applied together
+                                    // with the position, see applyPopoverStyles.
+                                    this.pendingPopoverConstraints = { availableWidth, availableHeight };
                                 },
                             }),
                         ],
                         placement: this.isCompact ? "bottom-end" : "bottom-start",
                     }).then(({ x, y }) => {
-                        Object.assign(element.style, {
-                            left: `${x}px`,
-                            top: `${y}px`,
+                        if (initialUpdate) {
+                            // The first update runs outside the ResizeObserver cycle and is applied
+                            // directly so the popover does not show up unpositioned.
+                            initialUpdate = false;
+                            applyPopoverStyles(x, y);
+                            return;
+                        }
+                        // Defer DOM writes until the next frame so ResizeObserver notifications can
+                        // settle before the popover mutates its own layout again.
+                        if (this.popoverFrameId !== undefined) {
+                            cancelAnimationFrame(this.popoverFrameId);
+                        }
+                        this.popoverFrameId = requestAnimationFrame(() => {
+                            this.popoverFrameId = undefined;
+                            applyPopoverStyles(x, y);
                         });
                     });
                 }
             });
+            this.cleanUp = () => {
+                if (this.popoverFrameId !== undefined) {
+                    cancelAnimationFrame(this.popoverFrameId);
+                    this.popoverFrameId = undefined;
+                }
+                autoUpdateCleanUp();
+            };
         }
     }
     render() {
-        return (h(Host, { key: 'bafceec3e7c095cb67f876e8b5ed7a817e7db8c1', "is-compact": this.isCompact }, h("div", { key: 'bd6eaaede73b41374e9b11683c8fd94bf08c32f2', class: "dso-header" }, h("div", { key: '20bbba41193597e3b97ef6fbc84f1518c0b47d2a', class: "logo-container" }, h("slot", { key: 'b78e8f54a29a296ff77f687fe792ae9311e2b44c', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '0ea04cc1432dd27da79f2fecaf342beb4486f99a', "is-compact": this.isCompact }, h("div", { key: '471e73275bf1d645fbcb83e35dc6bb5612a800ba', class: "dso-header" }, h("div", { key: '795356c3f82e93df6ff699db5b36540aaee7e832', class: "logo-container" }, h("slot", { key: '9dcdcdf2f5e6292fe31b25915d263e3505047312', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     tabbables(withButton) {
         const tabbables = this.dropdownElement ? tabbable(this.dropdownElement) : [];

package/dist/collection/components/highlight-box/highlight-box.css

@@ -214,11 +214,9 @@
 }
 
 ::slotted(img.dso-highlight-box-banner) {
+  --_dso-image-margin-inline: -16px -16px;
+  --_dso-image-margin-block: -16px 8px;
   aspect-ratio: 2.38/1;
-  margin-inline-start: -16px;
-  margin-inline-end: -16px;
-  margin-block-start: -16px;
-  margin-block-end: 8px;
   object-fit: cover;
   inline-size: calc(100% + 32px);
   max-inline-size: unset !important;

package/dist/collection/components/info/info.css

@@ -1,3 +1,9 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
 :host {
   display: block;
   padding-block: 16px;
@@ -34,6 +40,10 @@
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f2f2f2;
   color: #191919;
+  --_dso-image-display: block;
+  --_dso-image-margin-block: 8px;
+  --_dso-image-margin-inline: auto;
+  --_dso-rich-content-margin-block-start: 0;
 }
 
 :host(:not([active], [fixed])),
@@ -46,21 +56,4 @@ dso-icon-button {
   position: absolute;
   inset-inline-end: 8px;
   inset-block-start: 8px;
-}
-
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-.sr-only {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  border: 0;
-  overflow: hidden;
-  clip-path: rect(0 0 0 0);
 }