@dso-toolkit/core 87.0.0 → 88.1.0

package/dist/esm/dso-annotation-omgevingsnormwaarde.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-annotation-omgevingsnormwaarde.entry.js","sources":["src/components/annotation/annotation.scss?tag=dso-annotation-omgevingsnormwaarde&encapsulation=shadow","src/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * Dit component wordt voor een Omgevingsnorm en Omgevingswaarde gebruikt.\r\n *\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-omgevingsnormwaarde\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationOmgevingsnormwaarde implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De naam van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De toelichting van de waardes.\r\n   */\r\n  @Prop()\r\n  toelichting?: string;\r\n\r\n  /**\r\n   * De waardes van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  waardes?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * De eenheid van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  eenheid?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationOmgevingsnormwaardeElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active || false}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <dso-renvooi value={this.naam} />\r\n            {this.eenheid && (\r\n              <>\r\n                {\" \"}\r\n                (in <dso-renvooi value={this.eenheid} />)\r\n              </>\r\n            )}\r\n          </>\r\n        }\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.toelichting && <>{this.toelichting}</>}\r\n              {this.waardes && this.waardes.length > 0 && (\r\n                <>\r\n                  : <AnnotationListRenvooiValues values={this.waardes} />\r\n                </>\r\n              )}\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ikMAAikM,CAAC;;MCoBllM,6BAA6B,GAAA,MAAA;AAL1C,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAyDU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6CrC;IA3CC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAA,CAAC,oBAAoB,EAAA,IAAA,CAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,KAAK,EAC5B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAChC,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,GAAG,UACA,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,OAAO,EAAI,CAAA,MACvC,CACJ,CACA,EAEL,IAAI,EACF,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,IAAI,CAAC,WAAW,IAAI,kBAAG,IAAI,CAAC,WAAW,CAAI,EAC3C,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACtC,CAAA,CAAA,QAAA,EAAA,IAAA,QACI,CAAC,CAAA,2BAA2B,EAAC,EAAA,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,CACtD,CACJ,CACI,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;"}
+{"version":3,"file":"dso-annotation-omgevingsnormwaarde.entry.js","sources":["src/components/annotation/annotation.scss?tag=dso-annotation-omgevingsnormwaarde&encapsulation=shadow","src/components/annotation/annotation-omgevingsnormwaarde/annotation-omgevingsnormwaarde.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationListRenvooiValues } from \"../annotation-list-renvooi-values\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * Dit component wordt voor een Omgevingsnorm en Omgevingswaarde gebruikt.\r\n *\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-omgevingsnormwaarde\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationOmgevingsnormwaarde implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De naam van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  naam?: RenvooiValue | string;\r\n\r\n  /**\r\n   * De toelichting van de waardes.\r\n   */\r\n  @Prop()\r\n  toelichting?: string;\r\n\r\n  /**\r\n   * De waardes van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  waardes?: Array<RenvooiValue | string>;\r\n\r\n  /**\r\n   * De eenheid van de omgevingsnorm of omgevingswaarde.\r\n   */\r\n  @Prop()\r\n  eenheid?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationOmgevingsnormwaardeElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active || false}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <dso-renvooi value={this.naam} />\r\n            {this.eenheid && (\r\n              <>\r\n                {\" \"}\r\n                (in <dso-renvooi value={this.eenheid} />)\r\n              </>\r\n            )}\r\n          </>\r\n        }\r\n        data={\r\n          <>\r\n            <span class=\"content\">\r\n              {this.toelichting && <>{this.toelichting}</>}\r\n              {this.waardes && this.waardes.length > 0 && (\r\n                <>\r\n                  : <AnnotationListRenvooiValues values={this.waardes} />\r\n                </>\r\n              )}\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,+4MAA+4M,CAAC;;MCoBh6M,6BAA6B,GAAA,MAAA;AAL1C,IAAA,WAAA,CAAA,OAAA,EAAA;;;QAyDU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6CrC;IA3CC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAA,CAAC,oBAAoB,EAAA,IAAA,CAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,KAAK,EAC5B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,IAAI,EAAI,CAAA,EAChC,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,GAAG,UACA,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,OAAO,EAAI,CAAA,MACvC,CACJ,CACA,EAEL,IAAI,EACF,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,IAAI,CAAC,WAAW,IAAI,kBAAG,IAAI,CAAC,WAAW,CAAI,EAC3C,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,KACtC,CAAA,CAAA,QAAA,EAAA,IAAA,QACI,CAAC,CAAA,2BAA2B,EAAC,EAAA,MAAM,EAAE,IAAI,CAAC,OAAO,EAAA,CAAI,CACtD,CACJ,CACI,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;"}

package/dist/esm/dso-attachments-counter_2.entry.js

@@ -8,7 +8,7 @@ const AttachmentsCounter = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("span", { key: 'cd8239d516bd4ea96cdb3d6273d092e1441aa5bb', class: "dso-attachments" }, this.count, " ", h("span", { key: 'b050b4ad32bbab6403b7cff89fe7f2f5c1aa5786', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '2ad49e0eb4a1f41bee68b5348a25ab1a5fce7b0e', icon: "paperclip" })));
+        return (h("span", { key: '5f3b8b2a8d9815c3c29772c9ba6bf2064d0b19ba', class: "dso-attachments" }, this.count, " ", h("span", { key: 'c74586ff0b984718507a1d1b6afa0cda132c247e', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '0041e344074720593cae7eb02bf88cc87473e97b', icon: "paperclip" })));
     }
 };
 AttachmentsCounter.style = attachmentsCounterCss();
@@ -54,10 +54,10 @@ const Expandable = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f1a8622196eb5d688a650059380fb0cf0b81c2f4', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: 'e7bd88066e49adaa9a02370a5765fac3acf48739', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: 'ffc3a8788dc58b4a03be497698379aa839dfad7e', class: "slot-container" }, h("slot", { key: 'a5506b08d7d63030124c483dd5f6faf09630c2c2' }))));
+            }) }, h("div", { key: '140d1ed105acdf92912c7c2c070ce3f9848324d3', class: "slot-container" }, h("slot", { key: '86f19fa1446977e31fdc897dbe7f8395c05d3073' }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/dso-autosuggest.entry.js

@@ -507,7 +507,7 @@ const Autosuggest = class {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '3e42f8cd6888eed0b826d0f7dfb009e89bba7a17' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+        return (h(Fragment, null, h("slot", { key: '08888b7a48deb495aef359e3e71ee657694edfa8' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: () => this.pickSelectedValue(), selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||

package/dist/esm/dso-banner.entry.js

@@ -18,9 +18,9 @@ const Banner = class {
         this.icon = false;
     }
     render() {
-        return (h("section", { key: '1f953952b736586deeb73f0a436a3ef1d7ad51ab', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: 'd848309d971db4617bce4fec6ad8c63d18ea392c', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: '3587c1a299268323692bf2d2c27a4259f75eb480' })));
+            }), role: "alert" }, h("slot", { key: 'a001e2462deb18ec0b6ff3cf0f25b34c8d374e9a' })));
     }
 };
 Banner.style = bannerCss();

package/dist/esm/dso-button-group.entry.js

@@ -32,7 +32,7 @@ const ButtonGroup = class {
         return hasMapIconButton || hasMapClass;
     }
     render() {
-        return (h("div", { key: '0cd0a65e9b4ed512a7f51248628b5729e591e5a9', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '529bd12bf8558e3d8f0a7d76bb49c9c0200714ed' })));
+        return (h("div", { key: 'd7dd9d6e5796f85c941c712cf473e179f7ad2b7a', class: clsx("container", { "has-map-buttons": this.hasMapButton }), role: "group" }, h("slot", { key: '77c25c765cb23b10cc011b1d120b89330054846f' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-card-container.entry.js

@@ -11,7 +11,7 @@ const CardContainer = class {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '95c4b9efb0f971e75400362b4307082d08a9ecfa', class: "dso-card-list" }, h("slot", { key: 'c5e9b1c6a1ec0daf9959fae074983fd2d5131320' }))), this.mode === "grid" && (h("div", { key: '7b63aba8eb02ae54187ea9aa4dfb0dade6608ed8', class: "dso-card-grid" }, h("slot", { key: 'f7f20475f46a670706d12824e7efd7aadd2e6c19' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '13e3aac6d63973cd8e206e25fdd68d97d977b6fc', class: "dso-card-list" }, h("slot", { key: 'bc05ab5aa8554802774bf452ffb02b6e640e6d59' }))), this.mode === "grid" && (h("div", { key: 'de7aa9dab51345da51f55ec54039f6bab61cdb53', class: "dso-card-grid" }, h("slot", { key: '9f66927dace0600fed32524ffab208935b7fd20b' })))));
     }
 };
 CardContainer.style = cardContainerCss();

package/dist/esm/dso-card.entry.js

@@ -31,8 +31,8 @@ const Card = class {
     }
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '0b9c26d1a491eead187bdcc26d2b6b57817eca31', "is-selectable": isSelectable }, h("div", { key: 'b52c62ddcee54a435c5d8212721612877a07b972', class: "dso-card-container" }, h("div", { key: 'a07e3907ba0c6455f8ccb36958ece3220af93eab', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'fa8bde0f224549caf881623a0ceb5745d07abce2', name: "selectable" })), h("div", { key: '34962e8d62f38925d2009d14669c5686690fcbfa', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '754585f88fe4bc2a0dc90de191e81654ad01c0f0', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '90cb149fe3d70cbc8b6db973ba2341ec0091a4e1', name: "heading" }), h("dso-icon", { key: '61731f3b68644ce94fbb82880714370fad5d9211', icon: "external-link" }), h("span", { key: 'ef03c618b979ec850b6ebb79efa5b26a19e218ca', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { key: '64d6243c5aef5cc6359ddc86745420c67e257989', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '1df2c690db408fc0c3cd7bc952d9c6e390ae0614', name: "heading" }), h("dso-icon", { key: 'b2720002592fd8bd947c86ca4b3199c5cff73535', icon: "download" })))) || (h("a", { key: '5d1e9b8f8c3cd1a98d1a77699b3083b6c2b323f6', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'd9c93d3289412d714ed543dea3ecb4a299242959', name: "heading" }), h("dso-icon", { key: 'deadcd1ae3ae36e346a6ab050f7a085a4b2afe0d', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: '53c596e25689b490a4e8a6cb059cbc8e60d7d3f4', name: "interactions" })), h("div", { key: '9237379b0b91ce0d0e3a4797aa19389e8aa99356', class: "dso-card-content" }, h("slot", { key: '63d29f83f27cd4be3251c161bee697bea774ae92', name: "content" })))));
+        return (h(Host, { key: '4a662a01a8ab0f9688b117430b04910df9fd1896', "is-selectable": isSelectable }, h("div", { key: 'bd91995a69f16b9d65e227921b5b343a2b66361b', class: "dso-card-container" }, h("div", { key: '021ad62b7cf97e7b5a7a600f9f22254ab68a8bb0', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '83abedddbdd80fb06b5540a0ac74f7b0cd2d872b', name: "selectable" })), h("div", { key: '1141401a3b97386885408f54578cc1ccc9de8759', class: "dso-card-heading" }, (this.mode === "extern" && (h("a", { key: '9dd1677f6d851f449db4b4089e72235bb1522381', href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '7f9455d2cb58b57913268520bd23990e66edc196', name: "heading" }), h("dso-icon", { key: '7be05c89ba03a84c914fe7d667ce049882bb36a6', icon: "external-link" }), h("span", { key: '01b67eaffee2bfed512f53f2f9f74b4ea1fdde6d', class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
+            (this.mode === "download" && (h("a", { key: 'cb592b317ec5800f9f05539ce39d0dfd0de473c1', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '01cf0be3ab6e228774b5598a499e29d61aff9e2f', name: "heading" }), h("dso-icon", { key: 'cbbce504a6afc0896bd930c64a3e40d35d55c69b', icon: "download" })))) || (h("a", { key: 'a9b391befe2df29e0d3dd6c338880e3b7b4aa0a3', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'c0d3e45e17bb689bf448d5252acacb07c2e4fd99', name: "heading" }), h("dso-icon", { key: '232b9e41e144541c81e5e55c463a9995bca7cd50', icon: "chevron-right" }))), this.interactionsSlottedElement !== null && h("slot", { key: 'e5b32580f112e88093664df1fd7eaa206c10855a', name: "interactions" })), h("div", { key: '3f8d51e89795c6bbc88d2e7cb16732952cead8b2', class: "dso-card-content" }, h("slot", { key: 'fc439678df642efced533af5f24949e9f68ff345', name: "content" })))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-contact-information.entry.js

@@ -7,7 +7,7 @@ const ContactInformation = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h("div", { key: '509b3f51fa023a5b58d46e40252b917971afb600', class: "dso-contact-information" }, h("slot", { key: '281b8ad46ec6f591a9fc4d6d565d4dc847979ab7', name: "heading" }), h("slot", { key: '2de8f14e5116bf5bda27ef17f287b711997fd82c', name: "anchor-items" }), h("slot", { key: 'e67e73ff0b3785f5e13e76b01467484007378fbf', name: "info-items" })));
+        return (h("div", { key: '03131f6f72e2786b94d5a34e4cc162c93aca37a2', class: "dso-contact-information" }, h("slot", { key: 'c4cea848d9b56e306f4d33bf26a25df47c24d0b9', name: "heading" }), h("slot", { key: 'b40df1ea3bbf3231ae850afa11fa62e4a71f5841', name: "anchor-items" }), h("slot", { key: '5348cfdbc1c30cd4996999a28aa146f559a01d92', name: "info-items" })));
     }
 };
 ContactInformation.style = contactInformationCss();

package/dist/esm/dso-cursor-tooltip.entry.js

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, a as Host } from './index-Dx5skKSq.js';
 
-const cursorTooltipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;background-color:rgba(0, 0, 0, 0.75);color:#fff;position:relative;display:inline-block;pointer-events:none;overflow:unset;max-inline-size:360px;margin-inline:8px;padding-inline:16px;padding-block:8px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))}:host::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%) translateY(-100%);border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-block-end:8px solid rgba(0, 0, 0, 0.75);filter:none;pointer-events:none}`;
+const cursorTooltipCss = () => `*,*::after,*::before{box-sizing:border-box}:host{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#download-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#external-link-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="tel:"],[href^="tel:"]:hover,[href^="tel:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#call-wit"))}:host a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^="mailto:"],[href^="mailto:"]:hover,[href^="mailto:"]:focus-visible){background-image:var(--_dso-di-background-image, url("./di.svg#email-wit"))}:host{--_dso-icon-button-tertiary-color:#fff;--_dso-icon-button-tertiary-hover-color:#e5e5e5;--_dso-icon-button-tertiary-disabled-color:#b2b2b2;--_dso-button-primary-background-color:#fff;--_dso-button-primary-hover-background-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-background-color:#f2f2f2;--_dso-button-primary-disabled-background-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-border-color:#fff;--_dso-button-primary-hover-border-color:rgba(255, 255, 255, 0.8);--_dso-button-primary-active-border-color:#f2f2f2;--_dso-button-primary-disabled-border-color:rgba(255, 255, 255, 0.6);--_dso-button-primary-color:#191919;--_dso-button-primary-hover-color:#191919;--_dso-button-primary-active-color:#191919;--_dso-button-primary-disabled-color:#666;--_dso-button-secondary-background-color:none;--_dso-button-secondary-hover-background-color:rgba(255, 255, 255, 0.2);--_dso-button-secondary-active-background-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-background-color:none;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-hover-border-color:#fff;--_dso-button-secondary-active-border-color:rgba(255, 255, 255, 0.4);--_dso-button-secondary-disabled-border-color:rgba(255, 255, 255, 0.7);--_dso-button-secondary-color:#fff;--_dso-button-secondary-hover-color:#fff;--_dso-button-secondary-active-color:#fff;--_dso-button-secondary-disabled-color:rgba(255, 255, 255, 0.7);--_dso-button-tertiary-color:#fff;--_dso-button-tertiary-hover-color:#fff;--_dso-button-tertiary-active-color:#fff;--_dso-button-tertiary-disabled-color:#b2b2b2;background-color:rgba(0, 0, 0, 0.75);color:#fff;position:relative;display:inline-block;pointer-events:none;overflow:unset;max-inline-size:360px;margin-inline:8px;padding-inline:16px;padding-block:8px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))}:host::before{content:"";position:absolute;inset-inline-start:50%;inset-block-start:0;transform:translateX(-50%) translateY(-100%);border-inline-start:8px solid transparent;border-inline-end:8px solid transparent;border-block-end:8px solid rgba(0, 0, 0, 0.75);filter:none;pointer-events:none}`;
 
 const CursorTooltip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'fe3c40f9ab20b3172e840b353cf4b2eeca1a96fe', class: "dso-cursor-tooltip" }, h("slot", { key: '11c043f041dce83de7740ffdb0b62481c4d10516' })));
+        return (h(Host, { key: 'd7c7a7a5ca50fb6d6ca51fd5486855d34fa87595', class: "dso-cursor-tooltip" }, h("slot", { key: 'f8f4af09e02a486bbc22c9efcca3e796110ee201' })));
     }
 };
 CursorTooltip.style = cursorTooltipCss();

package/dist/esm/dso-cursor-tooltip.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"dso-cursor-tooltip.entry.js","sources":["src/components/cursor-tooltip/cursor-tooltip.scss?tag=dso-cursor-tooltip&encapsulation=shadow","src/components/cursor-tooltip/cursor-tooltip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(rgba(colors.$zwart, 0.75), \"tooltip\");\r\n\r\n  position: relative;\r\n  display: inline-block;\r\n  pointer-events: none;\r\n  overflow: unset;\r\n  max-inline-size: 360px;\r\n  margin-inline: units.$u1;\r\n  padding-inline: units.$u2;\r\n  padding-block: units.$u1;\r\n  border-radius: 4px;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 0;\r\n    transform: translateX(-50%) translateY(-100%);\r\n    border-inline-start: units.$u1 solid transparent;\r\n    border-inline-end: units.$u1 solid transparent;\r\n    border-block-end: units.$u1 solid rgba(colors.$zwart, 0.75);\r\n    filter: none;\r\n    pointer-events: none;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-cursor-tooltip\",\r\n  styleUrl: \"cursor-tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class CursorTooltip implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-cursor-tooltip\">\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,2pDAA2pD,CAAC;;MCO/qD,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC9B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;"}
+{"version":3,"file":"dso-cursor-tooltip.entry.js","sources":["src/components/cursor-tooltip/cursor-tooltip.scss?tag=dso-cursor-tooltip&encapsulation=shadow","src/components/cursor-tooltip/cursor-tooltip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  @include set-colors.apply(rgba(colors.$zwart, 0.75), \"tooltip\");\r\n\r\n  position: relative;\r\n  display: inline-block;\r\n  pointer-events: none;\r\n  overflow: unset;\r\n  max-inline-size: 360px;\r\n  margin-inline: units.$u1;\r\n  padding-inline: units.$u2;\r\n  padding-block: units.$u1;\r\n  border-radius: 4px;\r\n  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset-inline-start: 50%;\r\n    inset-block-start: 0;\r\n    transform: translateX(-50%) translateY(-100%);\r\n    border-inline-start: units.$u1 solid transparent;\r\n    border-inline-end: units.$u1 solid transparent;\r\n    border-block-end: units.$u1 solid rgba(colors.$zwart, 0.75);\r\n    filter: none;\r\n    pointer-events: none;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Host, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-cursor-tooltip\",\r\n  styleUrl: \"cursor-tooltip.scss\",\r\n  shadow: true,\r\n})\r\nexport class CursorTooltip implements ComponentInterface {\r\n  render() {\r\n    return (\r\n      <Host class=\"dso-cursor-tooltip\">\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,sqGAAsqG,CAAC;;MCO1rG,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC9B,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;"}

package/dist/esm/dso-date-picker.entry.js

@@ -147,7 +147,7 @@ const DsoDatePicker = class {
     }
     render() {
         var _a;
-        return (h("input", { key: 'd158728374aeea203e28cb6f8b9d3f5c99d4f887', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '6f1578829a919a36fb98128cb807d082e33c986f', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-document-card.entry.js

@@ -30,7 +30,7 @@ const DocumentCard = class {
         return this.host.querySelector("[slot='interactions']");
     }
     render() {
-        return (h("div", { key: '424a1e6058327ca1892f41626288909fdbe28972', class: "dso-document-card-container" }, h("div", { key: 'bf0e9dc501a1850af4dd64d36590de0d2103b164', class: "dso-document-card-heading" }, h("a", { key: 'fa110e3c6f1984741d02b515082e847b11aea781', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '32cd23687a349abef9083164795ebb17e833baf2', class: "icon-container" }, h("dso-icon", { key: 'f796e32f7d8c7e1ee350aa1b7a3de65be51fed36', icon: "chevron-right" }), h("slot", { key: 'a23262482804914228c0320525f41c2bbf35314e', name: "heading" })))), h("div", { key: '75734d9e95ded9f4fdde9c999d7a4233b8314f06', class: "dso-document-card-type" }, h("slot", { key: 'b18ce3010ae3cb4736ae92108e014fe51a2e2484', name: "type" })), h("div", { key: '46673ebfc66c849b1ba48337f1fb2f864b182759', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: '45418a415877277de76dcf3a6f8df0ad86c4f732', name: "meta" }), h("slot", { key: 'cd8bf629833394d19d423ba7b8912be3a7af5f53', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '3996b4f72f7658ef760dfcf7f6578b4b8951e0a0', name: "interactions" }))));
+        return (h("div", { key: 'c72b21d24a1d8cddeb53808ebf8d7e04f60036f8', class: "dso-document-card-container" }, h("div", { key: '75256d968cd55399b5c8eb3b4b30a38dffad9b83', class: "dso-document-card-heading" }, h("a", { key: 'a43c1bc6c5e03b5a00e3593380a3d95118ce9d02', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { key: '2c270a800db99c77c9b2800ca73c12e30ef83efd', class: "icon-container" }, h("dso-icon", { key: 'b712516ef47e844366872eca75a8050cedfab48b', icon: "chevron-right" }), h("slot", { key: 'ac375e345c607f0d9c97dbeae2be353dae327a43', name: "heading" })))), h("div", { key: '497d02ed37eae4648615e49caafbf080188ca1b2', class: "dso-document-card-type" }, h("slot", { key: 'cd3a3383991e8ab9a9ec5218c09b6d5f0597143b', name: "type" })), h("div", { key: '165974a97a18323fe9e8d02029df3598e93ad763', class: "dso-document-card-status" }, this.metaSlottedElement !== null && h("slot", { key: 'd6a1085eb9e8868053322efe49473222417f7dba', name: "meta" }), h("slot", { key: '7089e7150743a67472cd8c23e93b49a8f5f4620a', name: "status" }), this.interactionsSlottedElement !== null && h("slot", { key: '70f02c9f9d7851d6022634d83f139a1223d03889', name: "interactions" }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-dropdown-menu.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-Dx5skKSq.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom-_RZbmuMU.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './floating-ui.dom-C1uSuLE3.js';
 import { t as tabbable } from './index.esm-DDSMs62-.js';
 import { g as getActiveElement } from './get-active-element-CodDyi2J.js';
 import { v as v4 } from './v4-C_akviUd.js';
@@ -176,7 +176,7 @@ const DropdownMenu = class {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '28f8eb6a00bf4a1b139c917e44ce8de42067e8c6', onFocusout: this.focusOutListener }, h("slot", { key: 'fcf093b872932b1f604ae3d5f93391189ac60bbb', name: "toggle" }), h("div", { key: '2a621a9cdcf5817faf1354640a0062caa5c5fe04', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '68633d9a0c505d120acac96e15058d44e01d9a00' }))));
+        return (h(Host, { key: '59b1f150f35e5af275cf928d8b776122af646e8b', onFocusout: this.focusOutListener }, h("slot", { key: '5b362762db082f147eefe8db1b53c3e7e8075ee6', name: "toggle" }), h("div", { key: '3fa0dabc6161774c541e69b7784fd1a41273ba14', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '41564bd57e586458088373db77ad8212a1850e44' }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-header.entry.js

@@ -154,7 +154,7 @@ const Header = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fbffe5d78c5accb4d35d3416c18bb7254a29cc7f', "is-compact": this.isCompact }, h("div", { key: '5c541ab04d09d41dd59fdbca795ac12aa36737f7', class: "dso-header" }, h("div", { key: '7ead039c9d347846af8d7a1f632e7f3477486b18', class: "logo-container" }, h("slot", { key: '68a984ea68f23e43b752fccc19f04e8eb994c413', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: '305ef493b091a74d76ed4f4a109c7a2eb025950e', "is-compact": this.isCompact }, h("div", { key: '7b316c39fb646174bcb852cabf823004f47565c7', class: "dso-header" }, h("div", { key: '0939fd1ef3d64f34c44c4177a2d031d1b700a324', class: "logo-container" }, h("slot", { key: '9b417bdb99968e034ea9283cf81206db28a6d4ba', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     renderCompact() {
         return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), 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 }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))));

package/dist/esm/dso-highlight-box.entry.js

@@ -9,7 +9,7 @@ const HighlightBox = class {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '3e6f545e389b9e0b11886e6512a56ff578f4b8a1', "has-counter": hasCounter }, hasCounter && h("div", { key: '7ba0529e57274b47810171a3737f3436900e1c5e', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '4d1114f4372274819c24208a0d5839933523cae7', name: "icon" })), h("slot", { key: '5e77702dfc379e466a6178beb82257b41b040f46' })));
+        return (h(Host, { key: '9ed65a845d685ecb62b44ac4df2ee4c57a92d8a4', "has-counter": hasCounter }, hasCounter && h("div", { key: '57392d31cbc22d059e0d037679c06a08ecfff5e8', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '044da0d260d9d9257cc4ab0a48622aeba11d2f8d', name: "icon" })), h("slot", { key: '67e1cf3f59845e6451ac20cfbe8003df4089bd8d' })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/dso-history-item.entry.js

@@ -41,7 +41,7 @@ const HistoryItem = class {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h(Fragment, { key: 'a2c558b685f6c6658732bb2b98bddf709ebb94b4' }, h("div", { key: 'e0d2aa64e6ecda1538a21371f8658daf611ff731', class: "history-item-date" }, h("slot", { key: '436465cae9f9e28bc1ba2d7469359be5940354a8', name: "date" })), h("div", { key: 'd7a4485394a43cc1bb8e5db9fddcb977ed5cf5a1', class: "history-item-content" }, h("div", { key: 'd73c9368ecb65fc1b8fc54393416d3e619586caf', class: "history-item-status-message" }, h("dso-icon", { key: '8debd5c78e2595fd4d4c300fbc55ab01aca3e1fc', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'd5324a4d4551c44aae17b4b66eee9c2f1f480d2d', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '7f9d7fd07a9404b5587a1f54393152d5415ceac4', class: "history-item-title" }, h("a", { key: 'b05dff01d271490082467ad9b8e10e4864568c9a', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '52a904617d6c8acb0da75324772696344e11087c', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '6accc3de05b6122d9540ff2cdf26dda7dc9066e4', class: "history-item-explanation" }, h("slot", { key: '40ca448364c8aa1c35f014a8cf2e5de79bed6769', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'fefcad7ef764dcf6918d1b409456820e5949c719', class: "history-item-warning" }, h("dso-icon", { key: '96c357399ec8b5aa49e8f5e6254e4c60563972b0', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'b8848b26ab839a4eb00e8239447eaa879672066f', name: "warning" }))))));
+        return (h(Fragment, { key: '8cfda0c27b483a01888f2c81413fc0d90ba2e43b' }, h("div", { key: '456e4002b8f510bf0eea433b75432c2eea2f0544', class: "history-item-date" }, h("slot", { key: '48947f94875b10154f7d039a29fd6b36adfe0bbf', name: "date" })), h("div", { key: '05fa9da1f7908628e1c15fdfa9a7204bea6f4a1f', class: "history-item-content" }, h("div", { key: 'aa31efe35bfcea60d17f0fd5e974c83268eeec40', class: "history-item-status-message" }, h("dso-icon", { key: '513c99028ec6a4f78e3169b8d2b9e5a442de7a1d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'd5fe6da657e7dba4f0209ff7d08ab4934dadb3ba', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '39d8e70b1c49c84c3770a45394653ec43b257211', class: "history-item-title" }, h("a", { key: 'f126b0823432b853e3b921feee1fa7a7bacc0fe3', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6639a69f724c4a6653e723f5ae427ff62b3ba972', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '9f9caab19a09a0de025fca3cc37588c712336f5d', class: "history-item-explanation" }, h("slot", { key: '23179fa7f11c8a5d2b5d8819de2039cae303d7b1', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '321e1f83f4e446689e1cbd93d7e44cd53c6f1b05', class: "history-item-warning" }, h("dso-icon", { key: 'be8d3a9e358e7087f644b56f0045accc2019ce15', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'c65a0e9a11f4954aaa9c5890180a3034d6b9393c', name: "warning" }))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/dso-icon_2.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, d as createEvent } from './index-Dx5skKSq.js';
-import { p as positionTooltip } from './position-tooltip.function-C5-1llBb.js';
-import { T as Tooltip } from './tooltip.functional-component-B01Xtod2.js';
-import './floating-ui.dom-_RZbmuMU.js';
+import { p as positionTooltip } from './position-tooltip.function-gQf7Uoh1.js';
+import { T as Tooltip } from './tooltip.functional-component-faOeuQGr.js';
+import './floating-ui.dom-C1uSuLE3.js';
 import './clsx-ChV9xqsO.js';
 
 var air = `<svg id="air" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -706,7 +706,7 @@ const Icon = class {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '5f01bf5d366f95e1f47af95c3bd8eda1c103b353', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'cfe2b6ff0bb2d810eee4064bf32beebe10d0c118', class: "icon-container", innerHTML: icon.svg });
         }
     }
 };
@@ -735,6 +735,36 @@ const iconButtonCss = () => `.dso-tooltip {
 }
 .dso-tooltip {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #666;
   color: #fff;
   border-radius: 4px;
@@ -746,6 +776,7 @@ const iconButtonCss = () => `.dso-tooltip {
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s;
+  max-inline-size: 320px;
 }
 .dso-tooltip.visible {
   opacity: 1;
@@ -775,6 +806,36 @@ const iconButtonCss = () => `.dso-tooltip {
 }
 .dso-tooltip .tooltip-inner {
   --_dso-icon-button-tertiary-color: #fff;
+  --_dso-icon-button-tertiary-hover-color: #e5e5e5;
+  --_dso-icon-button-tertiary-disabled-color: #b2b2b2;
+  --_dso-button-primary-background-color: #fff;
+  --_dso-button-primary-hover-background-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-background-color: #f2f2f2;
+  --_dso-button-primary-disabled-background-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-border-color: #fff;
+  --_dso-button-primary-hover-border-color: rgba(255, 255, 255, 0.8);
+  --_dso-button-primary-active-border-color: #f2f2f2;
+  --_dso-button-primary-disabled-border-color: rgba(255, 255, 255, 0.6);
+  --_dso-button-primary-color: #191919;
+  --_dso-button-primary-hover-color: #191919;
+  --_dso-button-primary-active-color: #191919;
+  --_dso-button-primary-disabled-color: #666;
+  --_dso-button-secondary-background-color: none;
+  --_dso-button-secondary-hover-background-color: rgba(255, 255, 255, 0.2);
+  --_dso-button-secondary-active-background-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-background-color: none;
+  --_dso-button-secondary-border-color: #fff;
+  --_dso-button-secondary-hover-border-color: #fff;
+  --_dso-button-secondary-active-border-color: rgba(255, 255, 255, 0.4);
+  --_dso-button-secondary-disabled-border-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-secondary-color: #fff;
+  --_dso-button-secondary-hover-color: #fff;
+  --_dso-button-secondary-active-color: #fff;
+  --_dso-button-secondary-disabled-color: rgba(255, 255, 255, 0.7);
+  --_dso-button-tertiary-color: #fff;
+  --_dso-button-tertiary-hover-color: #fff;
+  --_dso-button-tertiary-active-color: #fff;
+  --_dso-button-tertiary-disabled-color: #b2b2b2;
   background-color: #666;
   color: #fff;
   font-family: Asap, sans-serif;
@@ -784,34 +845,10 @@ const iconButtonCss = () => `.dso-tooltip {
   padding-inline: 8px;
   border-radius: 4px;
   line-height: 1.5;
-  max-inline-size: 320px;
 }
 .dso-tooltip .tooltip-arrow {
-  --_dso-alert-success-border-color: #39870c;
-  --_dso-alert-error-border-color: #ce3f51;
-  --_dso-alert-info-border-color: #6ca4d9;
-  --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
-}
-.dso-tooltip .tooltip-arrow a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
-}
-.dso-tooltip .tooltip-arrow {
-  --_dso-icon-button-tertiary-color: #fff;
-  background-color: #666;
-  color: #fff;
   position: absolute;
+  background-color: #666;
   border-start-start-radius: 4px;
   block-size: 8px;
   inline-size: 8px;
@@ -840,6 +877,7 @@ const iconButtonCss = () => `.dso-tooltip {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-secondary:focus, .dso-secondary:focus-visible {
   outline-offset: 2px;
@@ -996,6 +1034,7 @@ const iconButtonCss = () => `.dso-tooltip {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-tertiary:focus, .dso-tertiary:focus-visible {
   outline-offset: 2px;
@@ -1035,6 +1074,7 @@ const iconButtonCss = () => `.dso-tooltip {
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-clip: padding-box;
 }
 .dso-map:focus, .dso-map:focus-visible {
   outline-offset: 2px;
@@ -1286,7 +1326,7 @@ const IconButton = class {
         this.cleanUp = undefined;
     }
     render() {
-        return (h("button", { key: 'cfa3c7d98955a1965d46abe68e9faea867c55679', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: 'f6978374915ba3e9d27c19582114ab2a36838115', icon: this.icon }), h(Tooltip, { key: '21e7bd67dd9800cd4d596b41aabf9c338c100e17', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '8b22306b71a11a9a5bb331e3138d398a1ea28c25', ref: (el) => (this.buttonElRef = el), type: "button", disabled: this.disabled, "aria-label": this.label, class: `icon-button dso-${this.variant}`, onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: this.handleClick }, h("dso-icon", { key: '5e0331ca7a343c70ef6f0fc0667d567d7c2814ad', icon: this.icon }), h(Tooltip, { key: 'ddf5f41269e6102ef81b05096119386e15478236', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
 };
 IconButton.style = iconButtonCss();

package/dist/esm/dso-info-button.entry.js

@@ -1,34 +1,116 @@
-import { r as registerInstance, d as createEvent, h, a as Host } from './index-Dx5skKSq.js';
+import { r as registerInstance, d as createEvent, h, a as Host, g as getElement } from './index-Dx5skKSq.js';
+import { p as positionTooltip } from './position-tooltip.function-gQf7Uoh1.js';
+import { T as Tooltip } from './tooltip.functional-component-faOeuQGr.js';
+import './floating-ui.dom-C1uSuLE3.js';
+import './clsx-ChV9xqsO.js';
 
-const infoButtonCss = () => `:host{display:inline-block}*,*::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)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);vertical-align:top}`;
+const infoButtonCss = () => `:host{--_dt-scrollable-border-radius:4px;--_dt-scrollable-container-padding-inline:16px;--_dt-scrollable-container-padding-block:8px;display:inline-block}*,*::after,*::before{box-sizing:border-box}.dso-tooltip{--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;border-radius:4px;overflow:unset;margin:0;border:0;padding:0;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));opacity:0;visibility:hidden;transition:opacity 0.15s;max-inline-size:640px}.dso-tooltip.visible{opacity:1;visibility:visible}.dso-tooltip .tooltip-inner{--_dt-span-role-paragraph-margin-block:8px;--_dso-alert-success-border-color:initial;--_dso-alert-error-border-color:initial;--_dso-alert-info-border-color:initial;--_dso-alert-warning-border-color:initial;background-color:#fff;color:#191919;font-family:Asap, sans-serif;font-size:1rem;font-weight:normal;padding-block:0;padding-inline:0;border-radius:4px;line-height:1.5}.dso-tooltip .tooltip-arrow{position:absolute;background-color:#fff;border-start-start-radius:4px;block-size:10px;inline-size:10px;pointer-events:none;z-index:-1}.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)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{vertical-align:top;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px)}`;
 
 const InfoButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.dsoToggle = createEvent(this, "dsoToggle", 7);
-        this.hover = false;
+        /**
+         * Whether the InfoButton is active.
+         */
+        this.active = false;
         /**
          * The label.
          */
         this.label = "Toelichting bij optie";
+        /**
+         * The placement of the Toggletip on click.
+         */
+        this.toggletipPlacement = "top";
+        this.toggletipActive = false;
+        this.hasToggletip = false;
+        this.keyDownHandler = (event) => {
+            if (!this.toggletipActive)
+                return;
+            if (event.key === "Escape") {
+                this.toggletipActive = false;
+            }
+        };
+        this.focusOutHandler = (event) => {
+            var _a;
+            if (!this.host.contains(event.relatedTarget)) {
+                this.toggletipActive = false;
+                (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            }
+        };
     }
     /**
      * To set focus to the toggle button.
      */
     async setFocus() {
-        var _a, _b;
-        (_a = this.button) === null || _a === void 0 ? void 0 : _a.setFocus();
-        (_b = this.buttonSecondary) === null || _b === void 0 ? void 0 : _b.focus();
+        var _a, _b, _c;
+        if (this.secondary) {
+            (_a = this.buttonSecondary) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            (_c = (_b = this.button) === null || _b === void 0 ? void 0 : _b.setFocus) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
     }
     handleToggle(originalEvent) {
-        this.active = !this.active;
-        this.dsoToggle.emit({ originalEvent, active: this.active });
+        if (this.hasToggletip) {
+            this.toggletipActive = !this.toggletipActive;
+        }
+        else {
+            this.dsoToggle.emit({ originalEvent, active: !this.active });
+        }
+    }
+    cleanupTooltip() {
+        var _a;
+        (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanUp = undefined;
+    }
+    componentDidRender() {
+        var _a, _b, _c;
+        if (!this.hasToggletip) {
+            (_a = this.toggletipElRef) === null || _a === void 0 ? void 0 : _a.hidePopover();
+            this.cleanupTooltip();
+            return;
+        }
+        if (!this.cleanUp && this.toggletipActive && this.button && this.toggletipElRef && this.toggletipArrowElRef) {
+            this.cleanUp = positionTooltip({
+                referenceElement: this.button,
+                tipRef: this.toggletipElRef,
+                tipArrowRef: this.toggletipArrowElRef,
+                placementTip: this.toggletipPlacement,
+                restrictContentElement: this.restrictContentElement,
+            });
+        }
+        if (this.cleanUp) {
+            if (this.toggletipActive) {
+                (_b = this.toggletipElRef) === null || _b === void 0 ? void 0 : _b.showPopover();
+            }
+            else {
+                (_c = this.toggletipElRef) === null || _c === void 0 ? void 0 : _c.hidePopover();
+                this.cleanupTooltip();
+            }
+        }
+    }
+    connectedCallback() {
+        this.mutationObserver = new MutationObserver(() => {
+            this.hasToggletip = !!this.host.querySelector("[slot='toggletip']");
+        });
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+            attributes: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.cleanupTooltip();
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '081ec92479c56bc53665fc9fb909838cff959c9e', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.hover ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
+        return (h(Host, { key: '731a5752654925228e0116b60ae106eda7ad08bc', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, !this.secondary ? (h("dso-icon-button", { variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-active" : "info", ref: (element) => (this.button = element) })) : (
         // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working
-        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label)))));
+        h("button", { type: "button", class: "dso-info-secondary", "aria-expanded": (this.active || this.toggletipActive).toString(), onClick: (e) => this.handleToggle(e), ref: (element) => (this.buttonSecondary = element) }, h("dso-icon", { icon: this.active || this.toggletipActive ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))), this.hasToggletip !== null && (h(Tooltip, { key: 'a80bae5b9e9e1126bbc4a0b0f72c59f0b90f33a8', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: '73189990daa593b27f1a3d89e6dff380eedac29e', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '7b944161e7a9c0db7824628619623b97f82498fd', name: "toggletip" }))))));
     }
+    get host() { return getElement(this); }
 };
 InfoButton.style = infoButtonCss();