@dso-toolkit/core 52.0.3 → 53.1.0

package/dist/collection/components/expandable-heading/expandable-heading.js

@@ -1,4 +1,4 @@
-import { Fragment, h } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import clsx from "clsx";
 import { v4 as uuidv4 } from "uuid";
 import { Heading } from "./heading";
@@ -8,6 +8,7 @@ export class ExpandableHeading {
     this.open = undefined;
     this.heading = "h2";
     this.color = "default";
+    this.editAction = undefined;
   }
   toggle(e) {
     this.open = !this.open;
@@ -15,7 +16,10 @@ export class ExpandableHeading {
   }
   render() {
     const expandableProperties = this.open ? { open: true } : {};
-    return (h(Fragment, null, h("div", { class: clsx("expandable-heading", this.color === "black" ? "dso-expandable-heading-black" : "") }, h(Heading, { heading: this.heading }, h("button", { type: "button", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.identifier, onClick: (e) => this.toggle(e) }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), h("slot", { name: "title" }))), h("slot", { name: "addons-start" }), h("div", { class: "addons-end" }, h("slot", { name: "addons-end" }))), h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("slot", null))));
+    return (h(Host, { class: clsx({
+        "dso-del": this.editAction === "delete",
+        "dso-ins": this.editAction === "insert",
+      }) }, this.editAction === "delete" && (h("p", { class: "dso-edit-action-text" }, h("span", null, "verwijderd:"))), this.editAction === "insert" && (h("p", { class: "dso-edit-action-text" }, h("span", null, "toegevoegd:"))), h("div", { class: clsx("expandable-heading", this.color === "black" ? "dso-expandable-heading-black" : "") }, h(Heading, { heading: this.heading }, h("button", { type: "button", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.identifier, onClick: (e) => this.toggle(e) }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), h("slot", { name: "title" }))), h("slot", { name: "addons-start" }), h("div", { class: "addons-end" }, h("slot", { name: "addons-end" }))), h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("slot", { slot: "expandable-content" }))));
   }
   static get is() { return "dso-expandable-heading"; }
   static get encapsulation() { return "shadow"; }
@@ -88,6 +92,28 @@ export class ExpandableHeading {
         "attribute": "color",
         "reflect": false,
         "defaultValue": "\"default\""
+      },
+      "editAction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "EditAction",
+          "resolved": "\"delete\" | \"insert\" | undefined",
+          "references": {
+            "EditAction": {
+              "location": "import",
+              "path": "./expandable-heading.interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "edit-action",
+        "reflect": false
       }
     };
   }

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

@@ -23,6 +23,7 @@ export class Header {
     this.showDropDown = undefined;
     this.hasSubLogo = false;
     this.overflowMenuItems = 0;
+    this.dropdownOptionsOffset = 0;
   }
   clickHandler(e, type, options) {
     var _a, _b;
@@ -58,12 +59,16 @@ export class Header {
   }
   componentDidRender() {
     if (this.showDropDown) {
+      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
       return;
     }
     window.setTimeout(() => this.shrinkMenuToFit(), 0);
   }
   componentDidLoad() {
     this.setShowDropDown(this.useDropDownMenu);
+    if (this.showDropDown) {
+      this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
+    }
   }
   setOverflowMenu() {
     if (this.showDropDown) {
@@ -81,6 +86,14 @@ export class Header {
     }
     this.showDropDown = window.innerWidth < minDesktopViewportWidth;
   }
+  calculateDropdownOptionsOffset() {
+    var _a;
+    if (!this.dropdownElement) {
+      return 0;
+    }
+    return (this.host.clientHeight -
+      (((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) - this.host.getBoundingClientRect().top));
+  }
   connectedCallback() {
     window.addEventListener("resize", this.onWindowResize);
   }
@@ -95,7 +108,9 @@ export class Header {
     return (h(Fragment, null, h("div", { class: clsx("dso-header", {
         ["use-drop-down"]: this.showDropDown,
         ["has-sub-logo"]: this.hasSubLogo,
-      }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
+      }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown &&
+      this.mainMenu &&
+      (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", strategy: "absolute", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, "Inloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, "Inloggen")))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, "Uitloggen")) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, "Uitloggen"))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
       this.mainMenu
         .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
         .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Meer")), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
@@ -265,7 +280,8 @@ export class Header {
     return {
       "showDropDown": {},
       "hasSubLogo": {},
-      "overflowMenuItems": {}
+      "overflowMenuItems": {},
+      "dropdownOptionsOffset": {}
     };
   }
   static get events() {

package/dist/collection/components/label/label.js

@@ -97,12 +97,11 @@ export class Label {
     this.keydownListenerActive = false;
   }
   render() {
-    const status = this.status && Label.statusMap.get(this.status);
     return (h(Fragment, null, h("span", { "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
         [`dso-label-${this.status}`]: this.status,
         "dso-compact": this.compact && !this.removable,
         "dso-hover": this.removeHover || this.removeFocus,
-      }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
+      }) }, h("slot", { name: "symbol" }), h("span", { class: clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
       }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), this.isTruncated && (h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
   }
@@ -272,9 +271,3 @@ export class Label {
       }];
   }
 }
-Label.statusMap = new Map([
-  ["info", "Opmerking"],
-  ["success", "Gelukt"],
-  ["warning", "Waarschuwing"],
-  ["danger", "Fout"],
-]);

package/dist/collection/components/list-button/list-button.css

@@ -370,8 +370,8 @@
 }
 .dso-selectable > dso-info {
   float: none;
-  margin: 8px 16px 0 -32px;
-  width: calc(100% + 32px);
+  margin: 8px 16px 0 0;
+  width: 100%;
 }
 .dso-selectable label {
   font-weight: 700;

package/dist/collection/components/modal/modal-ref.js

@@ -0,0 +1,18 @@
+export class DsoModalRef {
+  constructor(modalElement) {
+    this.modalElement = modalElement;
+    if (!modalElement) {
+      throw new Error("unable to add event listener. try opening the modal first");
+    }
+  }
+  /** Removes the modal from the DOM. */
+  close() {
+    document.body.removeChild(this.modalElement);
+  }
+  addEventListener(eventName, fn) {
+    this.modalElement.addEventListener(eventName, fn);
+  }
+  removeEventListener(eventName, fn) {
+    this.modalElement.removeEventListener(eventName, fn);
+  }
+}

package/dist/collection/components/modal/modal.controller.js

@@ -0,0 +1,47 @@
+import { DsoModalRef } from "./modal-ref";
+export class DsoModalController {
+  open(modal, options) {
+    const dsoModalElement = this.createModal(modal, options);
+    document.body.appendChild(dsoModalElement);
+    return new DsoModalRef(dsoModalElement);
+  }
+  createModal({ title, body, footer }, options) {
+    const element = document.createElement(`dso-modal`);
+    if (title) {
+      element.setAttribute("modal-title", title);
+    }
+    if (options) {
+      const { role, showCloseButton, initialFocus } = options;
+      if (role) {
+        element.role = role;
+      }
+      if (showCloseButton) {
+        element.setAttribute("show-close-button", showCloseButton ? "true" : "false");
+      }
+      if (initialFocus) {
+        element.setAttribute("initial-focus", initialFocus);
+      }
+    }
+    const bodyDiv = document.createElement("div");
+    bodyDiv.setAttribute("slot", "body");
+    if (typeof body === "string") {
+      bodyDiv.innerHTML = body;
+    }
+    else {
+      bodyDiv.appendChild(body);
+    }
+    element.appendChild(bodyDiv);
+    if (footer) {
+      const footerDiv = document.createElement("div");
+      footerDiv.setAttribute("slot", "footer");
+      if (typeof footer === "string") {
+        footerDiv.innerHTML = footer;
+      }
+      else {
+        footerDiv.appendChild(footer);
+      }
+      element.appendChild(footerDiv);
+    }
+    return element;
+  }
+}

package/dist/collection/components/modal/modal.js

@@ -92,13 +92,9 @@ export class Modal {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ModalRole",
-          "resolved": "\"alert\" | \"alertdialog\" | \"dialog\"",
-          "references": {
-            "ModalRole": {
-              "location": "local"
-            }
-          }
+          "original": "string",
+          "resolved": "string",
+          "references": {}
         },
         "required": false,
         "optional": false,

package/dist/collection/components/ozon-content/ozon-content.css

@@ -1,3 +1,10 @@
+ins {
+  background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+  color: #000;
+  text-decoration: none;
+}
+
 :host(:not([inline])) {
   display: block;
 }
@@ -232,6 +239,7 @@ span[role=paragraph] {
 
 .dso-ins {
   background-color: #e4f1d4;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
   color: #000;
 }
 .dso-ins a {

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

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  padding-left: 32px;
   position: relative;
 }
 :host .dso-selectable-options {
@@ -135,8 +134,8 @@
 }
 :host > dso-info {
   float: none;
-  margin: 8px 16px 0 -32px;
-  width: calc(100% + 32px);
+  margin: 8px 16px 0 0;
+  width: 100%;
 }
 :host[invalid] {
   --dso-selectable-color: #ce3f51;
@@ -152,22 +151,36 @@
   box-sizing: border-box;
 }
 
-.dso-selectable-input-wrapper {
+.dso-selectable-container {
   display: inline-block;
-  margin-left: -32px;
+  position: relative;
+  padding-inline-start: 32px;
+}
+.dso-selectable-container.has-info-button {
+  padding-inline-end: 32px;
+}
+.dso-selectable-container .dso-selectable-input-wrapper {
+  display: inline;
+  margin-inline: -32px;
   min-height: 24px;
-  padding-left: 32px;
+  padding-inline: 32px;
 }
-.dso-selectable-input-wrapper:focus-within {
+.dso-selectable-container .dso-selectable-input-wrapper:focus-within {
   border-radius: 2px;
   outline-offset: 3px;
   outline: 3px solid #008ccc;
 }
-.dso-selectable-input-wrapper input[type=radio]:focus + label::before,
-.dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {
+.dso-selectable-container .dso-selectable-input-wrapper input[type=radio]:focus + label::before,
+.dso-selectable-container .dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {
   box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
   height: 20px;
   left: 2px;
   top: 2px;
   width: 20px;
+}
+
+dso-info-button {
+  position: absolute;
+  right: 0;
+  top: 0;
 }

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

@@ -1,4 +1,5 @@
 import { h, Fragment, forceUpdate, } from "@stencil/core";
+import clsx from "clsx";
 import { createIdentifier } from "../../utils/create-identifier";
 export class Selectable {
   constructor() {
@@ -42,7 +43,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, "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" })))))));
+    return (h(Fragment, null, h("div", { class: clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, 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) }))))), hasInfo && (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;

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

@@ -137,7 +137,7 @@ export class Tooltip {
     if (!(tooltip instanceof HTMLElement)) {
       throw new Error("tooltip element is not instanceof HTMLElement");
     }
-    if (!this.stateless) {
+    if (!this.stateless && this.target) {
       this.target.addEventListener("mouseenter", this.callbacks.activate);
       this.target.addEventListener("mouseleave", this.callbacks.deactivate);
       this.target.addEventListener("focus", this.callbacks.activate);
@@ -171,14 +171,13 @@ export class Tooltip {
       return;
     }
     const tooltip = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".tooltip");
-    if (!(tooltip instanceof HTMLElement)) {
-      throw new Error("tooltip element is not instanceof HTMLElement");
+    if (this.target && tooltip instanceof HTMLElement) {
+      this.popper = createPopper(this.target, tooltip, {
+        placement: this.position,
+        modifiers: [maxSize, applyMaxSize, { name: "eventListeners", enabled: false }],
+      });
+      this.setStrategy();
     }
-    this.popper = createPopper(this.target, tooltip, {
-      placement: this.position,
-      modifiers: [maxSize, applyMaxSize, { name: "eventListeners", enabled: false }],
-    });
-    this.setStrategy();
   }
   get target() {
     var _a;
@@ -190,15 +189,18 @@ export class Tooltip {
   initializeTarget() {
     const id = this.element.id;
     if (!id) {
-      throw new Error("Unable to find reference tooltip has no [id] attribute.");
+      console.warn("Unable to find reference tooltip has no [id] attribute.");
+      return;
     }
     const rootNode = this.element.getRootNode();
     if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
-      throw new Error(`rootNode is not instance of Document or ShadowRoot`);
+      console.warn(`rootNode is not instance of Document or ShadowRoot`);
+      return;
     }
     const reference = rootNode.querySelector(`[aria-describedBy="${id}`);
     if (!reference) {
-      throw new Error(`Unable to find reference with aria-describedby ${id}`);
+      console.warn(`Unable to find reference with aria-describedby ${id}`);
+      return;
     }
     __classPrivateFieldSet(this, _Tooltip_target, reference, "f");
     return reference;

package/dist/collection/index.js

@@ -3,6 +3,7 @@ export * from "./components/annotation-output/annotation-output.interfaces";
 export * from "./components/autosuggest/autosuggest.interfaces";
 export * from "./components/card/card.interfaces";
 export * from "./components/date-picker/date-picker.interfaces";
+export * from "./components/expandable/expandable.interfaces";
 export * from "./components/expandable-heading/expandable-heading.interfaces";
 export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";
@@ -18,3 +19,4 @@ export * from "./components/selectable/selectable.interfaces";
 export * from "./components/slide-toggle/slide-toggle.interfaces";
 export * from "./components/tree-view/tree-view.interfaces";
 export * from "./components/viewer-grid/viewer-grid.interfaces";
+export * from "./components/modal/modal.controller";

package/dist/components/dropdown-menu.js

@@ -45,6 +45,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     };
     this.open = false;
     this.dropdownAlign = "left";
+    this.dropdownOptionsOffset = 2;
     this.checkable = false;
     this.boundary = undefined;
     this.strategy = "auto";
@@ -57,6 +58,19 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       placement: this.dropdownAlign === "right" ? "bottom-end" : "bottom-start",
     });
   }
+  watchOptionsOffset() {
+    var _a;
+    (_a = this.popper) === null || _a === void 0 ? void 0 : _a.setOptions({
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, this.dropdownOptionsOffset],
+          },
+        },
+      ],
+    });
+  }
   watchStrategy() {
     this.setStrategy();
   }
@@ -129,7 +143,7 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         {
           name: "offset",
           options: {
-            offset: [0, 2], // 2px margin between button and options
+            offset: [0, this.dropdownOptionsOffset],
           },
         },
         {
@@ -200,12 +214,14 @@ const DropdownMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   get host() { return this; }
   static get watchers() { return {
     "dropdownAlign": ["watchPosition"],
+    "dropdownOptionsOffset": ["watchOptionsOffset"],
     "strategy": ["watchStrategy"]
   }; }
   static get style() { return dropdownMenuCss; }
 }, [1, "dso-dropdown-menu", {
     "open": [1540],
     "dropdownAlign": [1, "dropdown-align"],
+    "dropdownOptionsOffset": [2, "dropdown-options-offset"],
     "checkable": [4],
     "boundary": [1],
     "strategy": [1]