@dso-toolkit/core 93.0.1 → 95.0.0

package/dist/collection/components/map-layer/map-layer.css

@@ -47,7 +47,7 @@
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 :host([wijzigactie=verwijder]) {
@@ -82,7 +82,7 @@
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: #000;
+  --_dt-ozon-content-toggletip-color: #000;
 }
 
 .map-layer {

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

@@ -21,7 +21,7 @@ export class MapLayer {
         };
     }
     render() {
-        return (h(WrapWijzigactie, { key: '1888e355a80fef9de95b3dc4b009cf81f57dc85f', wijzigactie: this.wijzigactie }, h("div", { key: '10359e02b7c768648cf228be389912ff124de2e1', class: "map-layer" }, h("div", { key: 'ea2d69b38b0769ba445b5858c825cf8161b1cb61', class: "map-layer-heading" }, h("slot", { key: '8edb08c850e54d74173e5aa9b47124b4a19946c4', name: "name" }), h("slot", { key: 'f559211fde9f1af6dda210d7e05fc1337716a562', name: "label" })), this.activatable && (h("div", { key: '884a1bfc55ae09eb434a7f663515ad3831fc9cdb', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: '2f85c2edd3b89ca15f323b881c6e780d6231bddc', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: '06fa74f16bc861262bcad8285e0432926178c075' })));
+        return (h(WrapWijzigactie, { key: 'da8857b71f2e5546c35a9449393a6696d7fe888e', wijzigactie: this.wijzigactie }, h("div", { key: '5a65e6afedfa0b591a6bbb57d41831ddf4a7188b', class: "map-layer" }, h("div", { key: '6f552eab820bab4848a80e86c879b6fbf34e06ef', class: "map-layer-heading" }, h("slot", { key: '7b4480d6d6876e6b7e0ee6d712333307b1a37aa7', name: "name" }), h("slot", { key: '7ce6dfc406b9e0a3bcbefccdc6b94cda1e8bb300', name: "label" })), this.activatable && (h("div", { key: 'd800d425deb67f31d12f461310a1fe8e8fc57025', class: "slide-toggle-container" }, h("dso-slide-toggle", { key: 'a854995e89971a6e8c6201afe98d0973d1093ef2', accessibleLabel: "Toon op kaart", checked: this.active, onDsoActiveChange: this.handleActiveChange })))), h("slot", { key: 'edcc28c7ee97bb62db8a2b869c044fc00fd94703' })));
     }
     static get is() { return "dso-map-layer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -20,11 +20,11 @@ export class MapMessage {
     render() {
         const iconName = this.variant ? iconMap[this.variant] : undefined;
         const role = this.variant === "error" ? "alert" : "status";
-        return (h("div", { key: 'f61bb20b1cb29cd29cd848a1ce23a469628a70f1', class: {
+        return (h("div", { key: '4cb55bf66c8b792e49a4464005b513871823e255', class: {
                 "map-message-content": true,
                 "has-icon": iconName !== undefined,
                 "has-actions": this.hasActions,
-            }, role: role, "aria-atomic": "true" }, h("div", { key: '6bb520bafce05b3d30ccf74d051b56f13e0deded', class: "map-message-body" }, iconName && h("dso-icon", { key: '562d40cfd80902b3420bca2f73a395562ed6bd53', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: 'a11113a808c8ad7c77568e086288cfd24530adf3', class: "map-message-text" }, h("slot", { key: '322dec4055e69936249f05862f4cb63da4da1277', name: "message" }))), h("slot", { key: 'b2e023741280c36794784e4aa86c029c981db4cf', name: "actions", onSlotchange: this.handleActionsSlotChange })));
+            }, role: role, "aria-atomic": "true" }, h("div", { key: 'bef35edb27a8006736f6c86be8e5f4182e8d5c15', class: "map-message-body" }, iconName && h("dso-icon", { key: '392f466099016711116080a7f17a2cdbfa252f12', class: "map-message-icon", icon: iconName, "aria-hidden": "true" }), h("span", { key: '20ad46a9b1ffaf10ebe3eabb029d43f7d6d9f9f4', class: "map-message-text" }, h("slot", { key: '2639f290f94618fb0af88e46488f3fdac1328775', name: "message" }))), h("slot", { key: '6b65e022ba2bf0d536654fe2cd8030c8143186e7', name: "actions", onSlotchange: this.handleActionsSlotChange })));
     }
     static get is() { return "dso-map-message"; }
     static get encapsulation() { return "shadow"; }

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

@@ -27,7 +27,7 @@ export class MapOverlays {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '2092eeaf0e10ac4d8836e097895570e1457a4c3a', class: "form-group dso-checkboxes" }, h("legend", { key: 'fdb0cec1cd8deee591c8b83b87902009f1817bda', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'd96f4e9495957dff19ce17bc26948a97b2a1e524', class: "dso-label-container" }, h("span", { key: '2ee2223b049367caab7713e011e9d7a0fec50b8a', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '8649873d384127bfb109459a8b523bc6a480a199', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: '930f973dafb8b329b93ead220ee828cc91a0235a', class: "form-group dso-checkboxes" }, h("legend", { key: 'f3dbb07e4e45417db260fc490e8012cc2ee5444d', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'e12f2026648cbd6341b0954c1754a3563ac63126', class: "dso-label-container" }, h("span", { key: '3cf899c2f82901d691eed720b538e60f305c6d15', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: '1a951fbb61b586aa6314ea62e3ed25d8b84809ed', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     static get is() { return "dso-map-overlays"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mark-bar/mark-bar.js

@@ -41,7 +41,7 @@ export class MarkBar {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: 'd09aa94ffd06188445f96c64a4a3719d37949d3e', class: "dso-mark-bar" }, h("div", { key: 'd89230751206bd78aeacf8c56c8c171ab55a7096', class: "dso-mark-bar-input" }, h("input", { key: 'dab47647c66731e7b669e1768508c2d994e33778', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'b43e1efa704876deb197853f2f8dbba146597a88', htmlFor: "search-input" }, h("dso-icon", { key: 'c6617679b5d34671e068c766a0236b5cdc12c893', class: "dso-search-icon", icon: "search" }), h("span", { key: '51381737c0a3a999ddc47ae60050a032ed1051e6', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'acdb087e9a2e3482ddf9b799b5143b79e1601500', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '85addfb20a5c2f40ee7a62dcbde354f407472b1c', class: "dso-button-container" }, h("span", { key: '7f572933ce9d4085c5648fe923b122f5462b6706', class: "divider" }), h("dso-icon-button", { key: '022a07592d02e6b015915129d2c333a8a976ffa4', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '12dad58f34bcde382a978617a53b3d89aac5994e' }, current, "/", totalCount), h("dso-icon-button", { key: 'd03ec5b8cefa4bec0f00ef59d94003a1fc0faddb', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: 'ff07927d93ae0d068fa8121fa69c1585f2a0114b', class: "dso-mark-bar" }, h("div", { key: '44a0d245a2b41b8273beb93e4a4305cdd2d7b6bc', class: "dso-mark-bar-input" }, h("input", { key: '2177523b24bfa60d47d1ebe47c85cf05308dfa8f', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '39b70427cae09819a161581234ddfb1515742c42', htmlFor: "search-input" }, h("dso-icon", { key: 'd8968f09af42566e3f02b5f5043f93e38e317792', class: "dso-search-icon", icon: "search" }), h("span", { key: '9b275ee67a4f774e6e21cf5d58c45409c97970a9', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'fb9d18b0f479cb7ddd1acadfbb8b7df46665d625', icon: "cross", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: 'e952339d0dcbac32c76c3167202ef17f5744e331', class: "dso-button-container" }, h("span", { key: 'e447ef9716b9cd3560bb406654ac5a6c7536aaee', class: "divider" }), h("dso-icon-button", { key: '2a628dc6844f53f2c788c77225b7e9c8b4405ef1', icon: "chevron-up", variant: "tertiary", label: `Vorig zoekresultaat ${current - 1}/${totalCount}`, onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '6a2a9bb6601ed528836f18a92643d5c226e021e6', role: "status" }, current, "/", totalCount), h("dso-icon-button", { key: 'ef03f237fedff5486a2c3b17052664c49620bf2d', icon: "chevron-down", variant: "tertiary", label: `Volgend zoekresultaat ${current + 1}/${totalCount}`, onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get is() { return "dso-mark-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.css

@@ -53,6 +53,7 @@
     flex-shrink: 0;
   }
 }
+
 .sr-only {
   position: absolute;
   inline-size: 1px;
@@ -85,20 +86,49 @@ button::-moz-focus-inner {
 }
 
 .dso-modal {
+  --_dt-button-float-tertiary: inline-start;
+  --_dt-button-padding-block-tertiary: 14px;
   overflow: visible;
   padding: 0;
   border: 0;
+  inline-size: var(--_dt-modal-inline-size, auto);
+  margin: var(--_dt-modal-margin, auto);
+}
+@media screen and (max-width: 767px) {
+  .dso-modal {
+    --_dt-button-inline-size: 100%;
+    --_dt-button-after-button-margin-inline-start: 0;
+    --_dt-button-after-button-margin-block-start: 8px;
+    --_dt-button-text-align: center;
+    inline-size: 100%;
+  }
+}
+@media screen and (max-height: 380px) {
+  .dso-modal {
+    min-block-size: 216px;
+    margin-block-start: 8px;
+    margin-block-end: 8px;
+  }
 }
 .dso-modal::backdrop {
   background-color: rgba(255, 255, 255, 0.8);
 }
 .dso-modal .dso-dialog {
-  inline-size: 640px;
+  inline-size: var(--_dt-modal-dialog-inline-size, 640px);
+  margin-block-start: var(--_dt-modal-dialog-margin-block-start, 0);
+  margin-inline-start: var(--_dt-modal-dialog-margin-inline-start, auto);
+  margin-inline-end: var(--_dt-modal-dialog-margin-inline-end, auto);
   background-color: #fff;
   opacity: 1;
   box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
   animation: 200ms ease-out 0s 1 ModalFadeIn;
 }
+@media screen and (max-width: 767px) {
+  .dso-modal .dso-dialog {
+    max-inline-size: 100%;
+    margin-block-start: 0;
+  }
+}
 .dso-modal .dso-header {
   position: relative;
   padding: 16px;
@@ -109,16 +139,16 @@ button::-moz-focus-inner {
   margin: 0;
   color: #275937;
 }
-.dso-modal .dso-header .dso-close {
+.dso-modal .dso-header dso-icon-button {
   position: absolute;
-  inset-block-start: 16px;
-  inset-inline-end: 13px;
-  block-size: 32px;
-  inline-size: 32px;
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-  text-align: center;
+  inset-block-start: var(--_dt-modal-header-close-btn, 22px);
+  inset-inline-end: 17px;
+}
+@media screen and (max-height: 380px) {
+  .dso-modal .dso-header {
+    padding-block: 8px;
+    padding-inline: 16px;
+  }
 }
 .dso-modal > .dso-dialog > .dso-body p {
   margin-block: 0 var(--_dt-rich-content-margin-block, 16px);
@@ -156,14 +186,16 @@ button::-moz-focus-inner {
 }
 .dso-modal > .dso-dialog > .dso-body {
   block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
+  /* prettier-ignore */
+  max-block-size: var(--_dt-modal-body-max-block-size, calc(70vh - 144px - 1.5em));
   min-block-size: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
 .dso-modal > .dso-dialog > dso-scrollable {
   block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
+  /* prettier-ignore */
+  max-block-size: var(--_dt-modal-body-max-block-size, calc(70vh - 144px - 1.5em));
   min-block-size: 6.5rem;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
@@ -203,25 +235,15 @@ button::-moz-focus-inner {
 .dso-modal > .dso-dialog > dso-scrollable .dso-body {
   padding: 32px;
 }
+@media screen and (max-height: 380px) {
+  .dso-modal .dso-body {
+    padding-block: 16px;
+    padding-inline: 24px;
+  }
+}
 .dso-modal .dso-body:focus-visible {
   outline: none;
 }
-@media screen and (max-width: 767px) {
-  .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  .dso-modal .dso-footer button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  .dso-modal .dso-footer button + button {
-    margin-block-start: 8px;
-  }
-  .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span {
-    float: none;
-  }
-}
 .dso-modal .dso-footer {
   min-block-size: 80px;
   padding-block: 16px;
@@ -236,52 +258,11 @@ button::-moz-focus-inner {
     margin-inline-start: 0;
   }
 }
-@media screen and (max-width: 767px) {
-  .dso-modal .dso-dialog {
-    max-inline-size: 100%;
-    margin-block-start: 0;
-  }
-  .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
-    margin-inline-start: 0;
-  }
-  .dso-modal .dso-footer button {
-    inline-size: 100%;
-    text-align: center;
-  }
-  .dso-modal .dso-footer button + button {
-    margin-block-start: 8px;
-  }
-  .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span {
-    float: none;
-  }
-}
 @media screen and (max-height: 380px) {
-  .dso-modal .dso-dialog {
-    min-block-size: 216px;
-    margin-block-start: 8px;
-    margin-block-end: 8px;
-  }
-  .dso-modal .dso-header {
-    padding-block: 8px;
-    padding-inline: 16px;
-  }
-  .dso-modal .dso-header .dso-close {
-    inset-block-start: 8px;
-  }
-  .dso-modal .dso-body {
-    padding-block: 16px;
-    padding-inline: 24px;
-  }
   .dso-modal .dso-footer {
     min-block-size: auto;
     overflow: auto;
     padding-block: 8px;
     padding-inline: 32px;
   }
-}
-.dso-modal .dso-header dso-icon-button {
-  position: absolute;
-  inset-block-start: 22px;
-  inset-inline-end: 17px;
 }

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

@@ -62,7 +62,7 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '3f82d0319743f333024c6e9924c08d48f85b738b', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: 'd94bad5e57a1b0c0a84e1bf5e27570df1ec00f20', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '954818bf78e2f2db6dd46232730fff39f9e73815' }, h("div", { key: '5bc44af3ae7e08e92c7508d1c2989316e58079a5', class: "dso-body", tabIndex: 0 }, h("slot", { key: '53ee09a3318fe5775d9f87d027818d6d4af2a13c', name: "body" }))), this.hasFooter && (h("div", { key: '21fd34229ad80c81071db82dc2fe97650fec545d', class: "dso-footer" }, h("slot", { key: '77af70dbc6c274bd194bb0cfcac3563a8664d248', name: "footer" }))))));
+        return (h("dialog", { key: 'badbdadcb6dcd1411ba171f7283b590ad9c6de79', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '81de7f17f65cf5a3287fa8a3b724cb54567246d5', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: 'f624e137d4d3cfa27f65cda4bf061b239d5c3a77' }, h("div", { key: '532fb2db408afd57e0fa85a73837932fe9137a16', class: "dso-body", tabIndex: 0 }, h("slot", { key: 'c2fbd08f27c4b21f3d9ed2689371ec9971745bfe', name: "body" }))), this.hasFooter && (h("div", { key: '437260e61d2bd50645c22ceec8043a045236f41c', class: "dso-footer" }, h("slot", { key: 'c0943718816ced146499c1a4a20de93dc54cbb34', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/onboarding-tip/onboarding-tip.js

@@ -65,7 +65,7 @@ export class OnboardingTip {
     }
     render() {
         const ariaLabel = this.headingSlottedElement?.textContent;
-        return (h(Host, { key: 'fa8923c44684b225ec204be511c48edaa85d5223', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '2acf5c31e31e72974c9885ebd52b5f766f138139', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: '4c52b7ebbc3bef2435ea565d2fffc2d0985da9aa', class: "onboarding-tip-inner" }, h("div", { key: '51382c1a584ccf665964deb518643cfad06e6b47', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '5867f4dec0c3c79a4bbeefb88f677dc28cd64f75', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: 'b730b2df1af5a96d0d17a4c3ee97a9bd78ce399a', icon: "light-bulb" }), h("slot", { key: 'e7503900bd00852a9ce0a4561063efbd950db450', name: "heading" }))), h("dso-icon-button", { key: 'b8bd69671342def7471ba20cb59d27d9c4dc913a', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '094a3e0d158b8a3e10bc0cae1bce3f9f44703872' }))), h("div", { key: '1937be09261e1e21b427601d7c79a9ac94b7cd3d', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'e7658be5736d9a5404fa0c0010a5a96b517f731b', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: 'f3730e437d19a4bd3fe3633585ad592a4fb983c4', role: "dialog", class: "onboarding-tip", "aria-label": ariaLabel, onKeyDown: this.blockEscapeKey, tabindex: -1 }, h("div", { key: 'af738a7350f03f71bb8e250502e2c0abefcd970e', class: "onboarding-tip-inner" }, h("div", { key: 'd334491e11eb82748aaf07e22b6e5c5171130528', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: '823797769a24b123408afc8e59f464e3e39b7224', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '7ae6b3b9cf5338bee0842c31e8f7d21e7db9a9e8', icon: "light-bulb" }), h("slot", { key: 'a75e8936520d6412addae7cc7430cf2c8762be3a', name: "heading" }))), h("dso-icon-button", { key: '3aeaa82948c4e32ba451d6999bc388d68dd3aec8', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "cross", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '88d732fe9ee04a023d3a581492352f1181e2de5b' }))), h("div", { key: 'fd71cca54453f15dae82cb186b6fed0a266f9ede', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");

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

@@ -19,13 +19,8 @@
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.15s;
   max-inline-size: 480px;
 }
-.dso-tooltip.visible {
-  opacity: 1;
-  visibility: visible;
-}
 .dso-tooltip .tooltip-inner {
   --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: initial;
@@ -37,8 +32,8 @@
   font-family: Asap, sans-serif;
   font-size: 1rem;
   font-weight: normal;
-  padding-block: 8px;
-  padding-inline: 16px;
+  padding-block: 0;
+  padding-inline: 0;
   border-radius: 4px;
   line-height: 1.5;
 }
@@ -53,8 +48,11 @@
 }
 
 :host {
-  display: inline;
   --_dt-rich-content-margin-block: 8px;
+  --_dt-scrollable-border-radius: 4px;
+  --_dt-scrollable-container-padding-inline: 16px;
+  --_dt-scrollable-container-padding-block: 8px;
+  display: inline;
 }
 
 ::slotted(:not([slot=label])) {
@@ -68,7 +66,7 @@
   margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: start;
+  text-align: var(--_dt-button-text-align, start);
   user-select: none;
   vertical-align: middle;
   background-clip: padding-box;
@@ -81,7 +79,7 @@
 }
 .toggletip-button {
   border: 0;
-  color: var(--_dso-ozon-content-toggletip-color, #2b5780);
+  color: var(--_dt-ozon-content-toggletip-color, #2b5780);
   line-height: 1;
   padding: 0;
   background-color: transparent;
@@ -93,7 +91,7 @@
   white-space: nowrap;
 }
 .toggletip-button, .toggletip-button:hover, .toggletip-button:focus-visible, .toggletip-button:active {
-  text-decoration-line: var(--_dso-ozon-content-toggletip-text-decoration, underline);
+  text-decoration-line: var(--_dt-ozon-content-toggletip-text-decoration, underline);
   text-decoration-style: dotted;
   text-underline-offset: 15%;
 }

package/dist/collection/components/ozon-content/components/ozon-content-toggletip/ozon-content-toggletip.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 import { positionTooltip } from "../../../../functional-components/tooltip/position-tooltip.function";
 import { Tooltip } from "../../../../functional-components/tooltip/tooltip.functional-component";
-export class ozonContentToggletip {
+export class OzonContentToggletip {
     constructor() {
         this.active = false;
         this.toggle = () => {
@@ -10,7 +10,7 @@ export class ozonContentToggletip {
         this.keyDownHandler = (event) => {
             switch (event.key) {
                 case "Escape":
-                    this.toggle();
+                    this.active = false;
                     return;
                 case " ":
                 case "Enter":
@@ -26,7 +26,7 @@ export class ozonContentToggletip {
             return;
         const path = event.composedPath();
         const clickedInsideHost = path.includes(this.host);
-        const clickedInsideTooltip = this.tooltip && path.includes(this.tooltip);
+        const clickedInsideTooltip = this.tooltipElRef && path.includes(this.tooltipElRef);
         if (!clickedInsideHost && !clickedInsideTooltip) {
             this.toggle();
         }
@@ -38,33 +38,34 @@ export class ozonContentToggletip {
         }
     }
     componentDidRender() {
-        if (!this.cleanUp && this.active && this.container && this.tooltip && this.tooltipArrow) {
-            this.cleanUp = positionTooltip({
+        if (!this.cleanUpFunction && this.active && this.container && this.tooltipElRef && this.tooltipArrowElRef) {
+            this.cleanUpFunction = positionTooltip({
                 referenceElement: this.container,
-                tipRef: this.tooltip,
-                tipArrowRef: this.tooltipArrow,
+                tipRef: this.tooltipElRef,
+                tipArrowRef: this.tooltipArrowElRef,
                 placementTip: "top",
+                restrictContentElement: this.restrictContentElement,
             });
         }
-        if (this.cleanUp && this.tooltip) {
+        if (this.cleanUpFunction && this.tooltipElRef) {
             if (this.active) {
-                this.tooltip?.showPopover();
+                this.tooltipElRef?.showPopover();
             }
             else {
-                this.tooltip?.hidePopover();
-                this.cleanupTooltip();
+                this.tooltipElRef?.hidePopover();
+                this.cleanUpTooltip();
             }
         }
     }
     disconnectedCallback() {
-        this.cleanupTooltip();
+        this.cleanUpTooltip();
     }
-    cleanupTooltip() {
-        this.cleanUp?.();
-        this.cleanUp = undefined;
+    cleanUpTooltip() {
+        this.cleanUpFunction?.();
+        this.cleanUpFunction = undefined;
     }
     render() {
-        return (h(Fragment, { key: '42a266732f99e8ff37be7fba775704cb683831e9' }, h("span", { key: '2c9db2d71a2e08dfc9873c6a8fec1cb7e0b73a65', class: "toggletip-button", role: "button", tabindex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: 'a5ea307d3f1b8642dd891b7d6480832a27fad1f3' }, h("span", { key: '063c6a4c4f655a3473f297e38c5617f0a155c0a3', class: "toggletip-label" }, h("slot", { key: '2131443bfcf023d6d1d6703135a835b741c48e9b', name: "label" })), "\u2060", h("dso-icon", { key: '862e8f3559ff9a42339325a7c58d0bef861609db', icon: this.icon }))), !this.icon && h("slot", { key: 'c22316502af49a2d6a1b1ce33d3a6306aaed408b', name: "label" })), h(Tooltip, { key: 'f4b21617701d0e0b9992166c96cc62ecbd959b8c', visible: true, onAfterHidden: () => { }, tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'c75658657d070bd5dfe38e8db27c48d48e910e8a' }))));
+        return (h(Fragment, { key: 'bf158174a4f6cec2b1f4f1418ed2ce401fd51b23' }, h("span", { key: 'ae53fa0b7a102b51661b09511c12694b69e2d467', "aria-describedby": this.active ? "toggletip-tooltip" : undefined, "aria-expanded": this.active.toString(), class: "toggletip-button", role: "button", tabIndex: 0, onClick: this.toggle, onKeyDown: this.keyDownHandler, ref: (element) => (this.container = element) }, this.icon && (h(Fragment, { key: '88b72ebe9fdee6dd0d4d9c2ba473d992b1f9281c' }, h("span", { key: 'c0877b12cca50833d4cc9e5102b783e80c5aa8f5', class: "toggletip-label" }, h("slot", { key: 'c59eea6fc7690161c863b37376cc6111bcb35552', name: "label" })), "\u2060", h("dso-icon", { key: '000e1888aefc8bc1a531cdcb4d86caa6b4f945ea', icon: this.icon }))), !this.icon && h("slot", { key: '4078706dbef961225b13572048d6bf931e79f197', name: "label" })), h(Tooltip, { key: '8381449b14d8392ff689255a824d5414edd04ffe', id: "toggletip-tooltip", tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tooltipArrowElRef = element) }, h("dso-scrollable", { key: '4186b6191e6f07c9ad049ea4db06587002470101', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: 'ae401b2aac5ca42b49a1dbbe6d306232bdb0655f' })))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ozon-content/nodes/noot.node.js

@@ -8,15 +8,14 @@ export class OzonContentNootNode {
     identify() {
         return "Noot";
     }
-    render(node, { mapNodeToJsx, state: openNoteId, setState }) {
+    render(node, { mapNodeToJsx }) {
         const noteId = node.getAttribute("id");
         if (!noteId) {
             console.error("Noot node without id", node);
             return h(Fragment, null);
         }
-        const noteControlsId = `dso-ozon-note-${noteId}`;
         const childNodes = Array.from(node.childNodes);
         const nootNummer = childNodes.find((n) => getNodeName(n) === "NootNummer")?.textContent ?? noteId;
-        return (h(Fragment, null, h("sup", null, h("button", { type: "button", class: "toggle-note", "aria-describedby": noteControlsId, onClick: () => setState?.(openNoteId === noteId ? undefined : noteId), onBlur: () => setState?.(undefined), "aria-expanded": openNoteId === noteId ? "true" : "false" }, nootNummer)), h("dso-tooltip", { active: openNoteId === noteId, id: noteControlsId, stateless: true, descriptive: true }, h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(":scope > Al")))))));
+        return (h("sup", null, h("dso-ozon-content-toggletip", { class: "toggle-note" }, h("span", { slot: "label" }, nootNummer), h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(":scope > Al")))))));
     }
 }