@dso-toolkit/core 51.3.0 → 51.4.1

package/dist/cjs/index.cjs.js

@@ -1,2 +1,9 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const mapControls_interfaces = require('./map-controls.interfaces-5ceec716.js');
+
+
+
+exports.transitionDuration = mapControls_interfaces.transitionDuration;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["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-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[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-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
+  return index.bootstrapLazy([["dso-icon.cjs",[[1,"dso-icon",{"icon":[1]}]]],["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-annotation-output.cjs",[[4,"dso-annotation-output",{"identifier":[1],"annotationPrefix":[1,"annotation-prefix"],"toggleAnnotation":[64]}]]],["dso-toggletip.cjs",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["dso-expandable-heading.cjs",[[1,"dso-expandable-heading",{"open":[4],"heading":[1],"color":[1]}]]],["dso-header.cjs",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"showDropDown":[32],"hasSubLogo":[32],"overflowMenuItems":[32]}]]],["dso-label.cjs",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"truncatedContent":[32],"labelText":[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-accordion-section.cjs",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"state":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"status":[1],"open":[1540],"hasNestedSection":[32],"toggleSection":[64],"scrollSectionIntoView":[64]}]]],["dso-alert.cjs",[[1,"dso-alert",{"status":[1],"roleAlert":[4,"role-alert"]}]]],["dso-annotation-button.cjs",[[0,"dso-annotation-button",{"identifier":[1]}]]],["dso-attachments-counter.cjs",[[1,"dso-attachments-counter",{"count":[2]}]]],["dso-autosuggest.cjs",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32]},[[4,"click","onDocumentClick"]]]]],["dso-date-picker.cjs",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["dso-helpcenter-panel.cjs",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]]]]],["dso-image-overlay.cjs",[[1,"dso-image-overlay",{"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]]]],["dso-list-button.cjs",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"subcontent":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"manualInputWrapperElement":[32],"manualCount":[32]}]]],["dso-map-controls.cjs",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]}]]],["dso-modal.cjs",[[1,"dso-modal",{"modalTitle":[1,"modal-title"],"role":[1],"showCloseButton":[4,"show-close-button"],"initialFocus":[1,"initial-focus"],"ariaId":[32],"hasFooter":[32]}]]],["dso-table.cjs",[[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}]]],["dso-viewer-grid.cjs",[[1,"dso-viewer-grid",{"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"initialMainSize":[1,"initial-main-size"],"mainSize":[32]}]]],["dso-accordion.cjs",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"allowMultipleOpen":[516,"allow-multiple-open"],"getState":[64],"toggleSection":[64],"animationEnd":[64],"closeOpenSections":[64]}]]],["dso-badge.cjs",[[1,"dso-badge",{"status":[1]}]]],["dso-banner.cjs",[[1,"dso-banner",{"status":[513]}]]],["dso-card.cjs",[[1,"dso-card",{"isSelectable":[516,"is-selectable"],"hasImage":[516,"has-image"],"clickable":[4]}]]],["dso-card-container.cjs",[[1,"dso-card-container",{"mode":[513]}]]],["dso-highlight-box.cjs",[[1,"dso-highlight-box",{"yellow":[4],"border":[4],"white":[4],"dropShadow":[4,"drop-shadow"],"step":[2]}]]],["dso-ozon-content.cjs",[[6,"dso-ozon-content",{"content":[1],"inline":[516],"deleted":[516],"interactive":[520],"state":[32]}]]],["dso-progress-bar.cjs",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["dso-slide-toggle.cjs",[[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]],["dso-dropdown-menu.cjs",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"checkable":[4],"boundary":[1],"strategy":[1]}]]],["dso-expandable.cjs",[[1,"dso-expandable",{"open":[516]}]]],["dso-progress-indicator.cjs",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["dso-responsive-element.cjs",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["dso-tooltip.cjs",[[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},[[0,"click","listenClick"]]]]],["dso-info-button.cjs",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["dso-info_2.cjs",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[4],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"toggleInfo":[64]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]]], options);
   });
 };
 

package/dist/cjs/map-controls.interfaces-5ceec716.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
+
+exports.transitionDuration = transitionDuration;

package/dist/collection/components/accordion/components/accordion-section.css

@@ -222,14 +222,18 @@
 }
 :host(.dso-accordion-conclusion) .dso-section-handle a,
 :host(.dso-accordion-conclusion) .dso-section-handle button {
-  color: #191919;
+  color: #000;
 }
 :host(.dso-accordion-conclusion) .dso-section-handle a:hover, :host(.dso-accordion-conclusion) .dso-section-handle a:active, :host(.dso-accordion-conclusion) .dso-section-handle a.active,
 :host(.dso-accordion-conclusion) .dso-section-handle button:hover,
 :host(.dso-accordion-conclusion) .dso-section-handle button:active,
 :host(.dso-accordion-conclusion) .dso-section-handle button.active {
   background-color: #e5e5e5;
-  color: #191919;
+}
+:host(.dso-accordion-conclusion) .dso-section-handle a dso-attachments-counter,
+:host(.dso-accordion-conclusion) .dso-section-handle button dso-attachments-counter {
+  --dso-attachments-counter-color: #000;
+  --dso-icon: var(--di-paperclip-zwart);
 }
 :host(.dso-accordion-conclusion) .dso-section-body {
   border: 2px solid #f2f2f2;
@@ -238,15 +242,6 @@
 :host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle {
   background-color: #f2f2f2;
 }
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle a,
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle button {
-  color: #191919;
-}
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle a dso-attachments-counter,
-:host(.dso-accordion-conclusion[open]:not(.dso-nested-accordion)) > .dso-section-handle button dso-attachments-counter {
-  --dso-attachments-counter-color: #666;
-  --dso-icon: var(--di-paperclip-grijs);
-}
 
 :host(.dso-accordion-conclusion.dso-nested-accordion[open]) {
   background-color: #fff;

package/dist/collection/components/alert/alert.css

@@ -44,22 +44,22 @@
   margin-top: 24px;
 }
 .alert.alert-success {
-  color: #191919;
+  color: #000;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
 }
 .alert.alert-error {
-  color: #191919;
+  color: #000;
   background-color: #f5d8dc;
   border-color: #f5d8dc;
 }
 .alert.alert-warning {
-  color: #191919;
+  color: #000;
   background-color: #f8f6cc;
   border-color: #f8f6cc;
 }
 .alert.alert-info {
-  color: #191919;
+  color: #000;
   background-color: #e1ecf7;
   border-color: #e1ecf7;
 }

package/dist/collection/components/badge/badge.css

@@ -34,7 +34,7 @@
 .dso-badge.badge-info {
   background-color: #6ca4d9;
   border-color: #6ca4d9;
-  color: #191919;
+  color: #000;
 }
 .dso-badge.badge-primary {
   background-color: #275937;
@@ -49,7 +49,7 @@
 .dso-badge.badge-warning {
   background-color: #dcd400;
   border-color: #dcd400;
-  color: #191919;
+  color: #000;
 }
 .dso-badge.badge-danger {
   background-color: #ce3f51;

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

@@ -4,5 +4,4 @@
 
 :host {
   display: inline-block;
-  position: relative;
 }

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

@@ -1,6 +1,8 @@
+import { createPopper } from "@popperjs/core";
 import { h, Host } from "@stencil/core";
 import { tabbable } from "tabbable";
 import { v4 as uuidv4 } from "uuid";
+import { hasOverflow } from "../../utils/has-overflow";
 export class DropdownMenu {
   constructor() {
     this.focusOutListener = (event) => {
@@ -39,6 +41,44 @@ export class DropdownMenu {
     this.open = false;
     this.dropdownAlign = "left";
     this.checkable = false;
+    this.boundary = undefined;
+    this.strategy = "auto";
+  }
+  watchPosition() {
+    if (!this.popper) {
+      return;
+    }
+    this.popper.setOptions({
+      placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+    });
+  }
+  watchStrategy() {
+    this.setStrategy();
+  }
+  setStrategy() {
+    if (!this.popper) {
+      return;
+    }
+    if (this.strategy === "absolute" || this.strategy === "fixed") {
+      this.popper.setOptions({
+        strategy: this.strategy,
+      });
+      return;
+    }
+    let element = this.host;
+    const boundary = this.boundary || document;
+    while (element && element.parentNode !== boundary) {
+      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+      if (element !== null && hasOverflow(element)) {
+        this.popper.setOptions({
+          strategy: "fixed",
+        });
+        return;
+      }
+    }
+    this.popper.setOptions({
+      strategy: "absolute",
+    });
   }
   get button() {
     const button = this.host.querySelector('button[slot="toggle"]');
@@ -71,8 +111,38 @@ export class DropdownMenu {
         li.setAttribute("role", "none");
       }
     }
+    if (this.popper) {
+      return;
+    }
+    const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
+    if (!(dropdownOptionsElement instanceof HTMLElement)) {
+      throw new Error("dropdown options element is not instanceof HTMLElement");
+    }
+    this.popper = createPopper(this.button, dropdownOptionsElement, {
+      placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 2], // 2px margin between button and options
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: this.boundary ? document.querySelector(this.boundary) : null,
+          },
+          enabled: this.boundary !== undefined,
+        },
+      ],
+    });
   }
   componentDidRender() {
+    var _a;
+    this.setStrategy();
+    if (this.open) {
+      (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+    }
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
         tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
@@ -93,6 +163,10 @@ export class DropdownMenu {
       }
     });
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
     if (!activeEl) {
@@ -185,8 +259,52 @@ export class DropdownMenu {
         "attribute": "checkable",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "boundary": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Selector for the element the dropdown options should not be overflowing."
+        },
+        "attribute": "boundary",
+        "reflect": false
+      },
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"auto\" | \"absolute\" | \"fixed\"",
+          "resolved": "\"absolute\" | \"auto\" | \"fixed\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set position strategy of dropdown options"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       }
     };
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "dropdownAlign",
+        "methodName": "watchPosition"
+      }, {
+        "propName": "strategy",
+        "methodName": "watchStrategy"
+      }];
+  }
 }

package/dist/collection/components/header/header.css

@@ -195,8 +195,8 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
-  left: -1rem;
-  top: calc(100% + 3px);
+  left: -1rem !important;
+  top: 3px !important;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button {
   font-size: 1.25em;

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

@@ -24,6 +24,7 @@
 
 .dso-highlight-box {
   background-color: #f2f2f2;
+  color: #000;
   margin-top: 16px;
   padding: 16px;
   margin-bottom: 24px;

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
   background-color: #f2f2f2;
+  color: #000;
   padding: 16px 32px 16px 16px;
   position: relative;
 }

package/dist/collection/components/label/label.css

@@ -54,7 +54,7 @@
 }
 .dso-label.dso-label-info {
   background-color: #6ca4d9;
-  color: #191919;
+  color: #000;
 }
 .dso-label.dso-label-primary {
   background-color: #275937;
@@ -66,7 +66,7 @@
 }
 .dso-label.dso-label-warning {
   background-color: #dcd400;
-  color: #191919;
+  color: #000;
 }
 .dso-label.dso-label-danger {
   background-color: #ce3f51;

package/dist/collection/components/map-controls/map-controls.interfaces.js

@@ -0,0 +1 @@
+export const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss

package/dist/collection/components/map-controls/map-controls.js

@@ -16,7 +16,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
 import { h, Host } from "@stencil/core";
-const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
+import { transitionDuration } from "./map-controls.interfaces";
 export class MapControls {
   constructor() {
     this.panelTitle = "Kaartlagen";
@@ -39,8 +39,15 @@ export class MapControls {
       }, transitionDuration);
     }
   }
+  async toggleVisibility(e) {
+    this.open = !this.open;
+    this.dsoToggle.emit({
+      originalEvent: e,
+      open: this.open,
+    });
+  }
   render() {
-    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
+    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
   }
   static get is() { return "dso-map-controls"; }
   static get encapsulation() { return "shadow"; }
@@ -137,8 +144,57 @@ export class MapControls {
             }
           }
         }
+      }, {
+        "method": "dsoToggle",
+        "name": "dsoToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emits when the panel opens or closes.\r\n\r\n- `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n- `event.detail.open` is true when the panel opens and false when the panel closes."
+        },
+        "complexType": {
+          "original": "MapControlsToggleEvent",
+          "resolved": "MapControlsToggleEvent",
+          "references": {
+            "MapControlsToggleEvent": {
+              "location": "import",
+              "path": "./map-controls.interfaces"
+            }
+          }
+        }
       }];
   }
+  static get methods() {
+    return {
+      "toggleVisibility": {
+        "complexType": {
+          "signature": "(e: MouseEvent | KeyboardEvent) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "MouseEvent": {
+              "location": "global"
+            },
+            "KeyboardEvent": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get watchers() {
     return [{
         "propName": "open",

package/dist/collection/components/selectable/selectable.css

@@ -150,6 +150,7 @@
 
 .dso-selectable-input-wrapper {
   display: inline-block;
+  min-height: 24px;
   padding-left: 32px;
 }
 .dso-selectable-input-wrapper:focus-within {

package/dist/collection/components/selectable/selectable.js

@@ -9,6 +9,7 @@ export class Selectable {
     this.value = undefined;
     this.invalid = undefined;
     this.describedById = undefined;
+    this.labelledById = undefined;
     this.disabled = undefined;
     this.required = undefined;
     this.checked = undefined;
@@ -41,7 +42,7 @@ export class Selectable {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
+    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
   }
   getIdentifier() {
     var _a;
@@ -163,6 +164,23 @@ export class Selectable {
         "attribute": "described-by-id",
         "reflect": false
       },
+      "labelledById": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "labelled-by-id",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/tooltip/tooltip.js

@@ -2,15 +2,9 @@ import { beforeWrite, createPopper } from "@popperjs/core";
 import maxSize from "popper-max-size-modifier";
 import { h, Host } from "@stencil/core";
 import clsx from "clsx";
+import { hasOverflow } from "../../utils/has-overflow";
 // Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin
 const transitionDuration = 150;
-function hasOverflow(el) {
-  const style = window.getComputedStyle(el);
-  const overflowX = style.getPropertyValue("overflow-x");
-  const overflowY = style.getPropertyValue("overflow-y");
-  const overflowValues = ["hidden", "clip"];
-  return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;
-}
 export class Tooltip {
   constructor() {
     this.applyMaxSize = {

package/dist/collection/index.js

@@ -8,6 +8,7 @@ export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";
 export * from "./components/list-button/list-button.interfaces";
 export * from "./components/map-base-layers/map-base-layers.interfaces";
+export * from "./components/map-controls/map-controls.interfaces";
 export * from "./components/map-overlays/map-overlays.interfaces";
 export * from "./components/modal/modal.interfaces";
 export * from "./components/ozon-content/ozon-content.interfaces";

package/dist/collection/utils/has-overflow.js

@@ -0,0 +1,7 @@
+export function hasOverflow(el) {
+  const style = window.getComputedStyle(el);
+  const overflowX = style.getPropertyValue("overflow-x");
+  const overflowY = style.getPropertyValue("overflow-y");
+  const overflowValues = ["hidden", "clip"];
+  return overflowValues.indexOf(overflowX) !== -1 || overflowValues.indexOf(overflowY) !== -1;
+}

package/dist/components/dropdown-menu.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { t as tabbable } from './index.esm.js';
+import { h as hasOverflow, c as createPopper } from './has-overflow.js';
 import { v as v4 } from './v4.js';
 
-const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block;position:relative}";
+const dropdownMenuCss = ":host(:focus){outline:none}:host{display:inline-block}";
 
 const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -45,6 +46,44 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.open = false;
     this.dropdownAlign = "left";
     this.checkable = false;
+    this.boundary = undefined;
+    this.strategy = "auto";
+  }
+  watchPosition() {
+    if (!this.popper) {
+      return;
+    }
+    this.popper.setOptions({
+      placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+    });
+  }
+  watchStrategy() {
+    this.setStrategy();
+  }
+  setStrategy() {
+    if (!this.popper) {
+      return;
+    }
+    if (this.strategy === "absolute" || this.strategy === "fixed") {
+      this.popper.setOptions({
+        strategy: this.strategy,
+      });
+      return;
+    }
+    let element = this.host;
+    const boundary = this.boundary || document;
+    while (element && element.parentNode !== boundary) {
+      element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;
+      if (element !== null && hasOverflow(element)) {
+        this.popper.setOptions({
+          strategy: "fixed",
+        });
+        return;
+      }
+    }
+    this.popper.setOptions({
+      strategy: "absolute",
+    });
   }
   get button() {
     const button = this.host.querySelector('button[slot="toggle"]');
@@ -77,8 +116,38 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         li.setAttribute("role", "none");
       }
     }
+    if (this.popper) {
+      return;
+    }
+    const dropdownOptionsElement = this.host.querySelector(".dso-dropdown-options");
+    if (!(dropdownOptionsElement instanceof HTMLElement)) {
+      throw new Error("dropdown options element is not instanceof HTMLElement");
+    }
+    this.popper = createPopper(this.button, dropdownOptionsElement, {
+      placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 2], // 2px margin between button and options
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: this.boundary ? document.querySelector(this.boundary) : null,
+          },
+          enabled: this.boundary !== undefined,
+        },
+      ],
+    });
   }
   componentDidRender() {
+    var _a;
+    this.setStrategy();
+    if (this.open) {
+      (_a = this.popper) === null || _a === void 0 ? void 0 : _a.update();
+    }
     for (const li of Array.from(this.host.getElementsByTagName("li"))) {
       for (const tab of tabbable(li)) {
         tab.setAttribute("role", this.checkable ? "menuitemradio" : "menuitem");
@@ -99,6 +168,10 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     });
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
+  }
   getActiveElement(root = document) {
     const activeEl = root.activeElement;
     if (!activeEl) {
@@ -125,11 +198,17 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     return (h(Host, { onFocusout: this.focusOutListener, tabindex: this.open ? "-1" : undefined }, h("slot", { name: "toggle" }), h("div", { hidden: !this.open }, h("slot", null))));
   }
   get host() { return this; }
+  static get watchers() { return {
+    "dropdownAlign": ["watchPosition"],
+    "strategy": ["watchStrategy"]
+  }; }
   static get style() { return dropdownMenuCss; }
 }, [1, "dso-dropdown-menu", {
     "open": [1540],
     "dropdownAlign": [1, "dropdown-align"],
-    "checkable": [4]
+    "checkable": [4],
+    "boundary": [1],
+    "strategy": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {