@dso-toolkit/core 92.0.0-ghi-3567.0 → 93.0.0

package/dist/cjs/{position-tooltip.function-BjWi5ZKZ.js → position-tooltip.function-CppeKAt4.js}

@@ -10,9 +10,7 @@ var floatingUi_dom = require('./floating-ui.dom-ClybLJQM.js');
  */
 function positionTooltip(options) {
     const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible, restrictContentElement, } = options;
-    let animationFrameId;
-    let disposed = false;
-    const cleanup = floatingUi_dom.autoUpdate(referenceElement, tipRef, () => {
+    return floatingUi_dom.autoUpdate(referenceElement, tipRef, () => {
         const padding = 5;
         const arrowOffsetWidth = tipArrowRef.offsetWidth;
         const axisOffsetCalc = Math.sqrt(2 * arrowOffsetWidth ** 2);
@@ -53,80 +51,58 @@ function positionTooltip(options) {
             ],
             placement,
         }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {
-            if (disposed) {
-                return;
-            }
-            if (animationFrameId !== undefined) {
-                cancelAnimationFrame(animationFrameId);
-            }
-            // Defer DOM writes until the next frame so ResizeObserver notifications
-            // can settle before the tooltip mutates its own layout again.
-            animationFrameId = requestAnimationFrame(() => {
-                if (disposed) {
-                    return;
-                }
+            if (middlewareData.hide) {
                 // Tooltip needs to be visible at all times on small viewports or when forceVisible is true
-                const disappear = !smallViewport && !forceVisible && !!middlewareData.hide?.referenceHidden;
+                const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;
                 Object.assign(tipRef.style, {
                     // Both of these properties have a CSS transition
                     visibility: disappear ? "hidden" : "visible",
-                    opacity: disappear ? "0" : "1",
+                    opacity: disappear ? 0 : 1,
                 });
-                Object.assign(tipRef.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                    strategy,
-                });
-                const side = computedPlacement.split("-")[0];
-                const staticSide = side
-                    ? {
-                        top: "bottom",
-                        right: "left",
-                        bottom: "top",
-                        left: "right",
-                    }[side]
-                    : "top";
-                let angle;
-                switch (staticSide) {
-                    default:
-                    case "top":
-                        angle = 45;
-                        break;
-                    case "right":
-                        angle = 135;
-                        break;
-                    case "bottom":
-                        angle = 225;
-                        break;
-                    case "left":
-                        angle = 315;
-                        break;
-                }
-                if (middlewareData.arrow && staticSide) {
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    Object.assign(tipArrowRef.style, {
-                        right: "",
-                        bottom: "",
-                        left: arrowX ? `${arrowX}px` : "",
-                        top: arrowY ? `${arrowY}px` : "",
-                        [staticSide]: `${-arrowOffsetWidth / 2}px`,
-                        transform: `rotate(${angle}deg)`,
-                    });
-                }
+            }
+            Object.assign(tipRef.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                strategy,
             });
+            const side = computedPlacement.split("-")[0];
+            const staticSide = side
+                ? {
+                    top: "bottom",
+                    right: "left",
+                    bottom: "top",
+                    left: "right",
+                }[side]
+                : "top";
+            let angle;
+            switch (staticSide) {
+                default:
+                case "top":
+                    angle = 45;
+                    break;
+                case "right":
+                    angle = 135;
+                    break;
+                case "bottom":
+                    angle = 225;
+                    break;
+                case "left":
+                    angle = 315;
+                    break;
+            }
+            if (middlewareData.arrow && staticSide) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                Object.assign(tipArrowRef.style, {
+                    right: "",
+                    bottom: "",
+                    left: arrowX ? `${arrowX}px` : "",
+                    top: arrowY ? `${arrowY}px` : "",
+                    [staticSide]: `${-arrowOffsetWidth / 2}px`,
+                    transform: `rotate(${angle}deg)`,
+                });
+            }
         });
     });
-    return () => {
-        disposed = true;
-        Object.assign(tipRef.style, {
-            visibility: "hidden",
-            opacity: "0",
-        });
-        if (animationFrameId !== undefined) {
-            cancelAnimationFrame(animationFrameId);
-        }
-        cleanup();
-    };
 }
 
 exports.positionTooltip = positionTooltip;

package/dist/cjs/tooltip.functional-component-DrN_v5w1.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-Dqk4tvHL.js');
+var clsx = require('./clsx-BtxeOLZW.js');
+
+const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (index.h("div", { popover: "manual", class: clsx.clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
+        e.stopPropagation();
+        if (e.propertyName === "opacity" && !visible) {
+            onAfterHidden?.();
+        }
+    } }, index.h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), index.h("div", { class: "tooltip-inner" }, children)));
+
+exports.Tooltip = Tooltip;

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

@@ -50,14 +50,14 @@
 
 h2 {
   margin-block: 0 16px;
-  color: #275937;
+  color: var(--_dt-heading-base-color, #275937);
   color: var(--_dt-heading-h2-color, #275937);
-  font-size: 1.25rem;
+  font-size: var(--_dt-heading-h2-font-size-xs, 1.25rem);
   font-weight: 700;
 }
 @media screen and (min-width: 480px) {
   h2 {
-    font-size: 1.5rem;
+    font-size: var(--_dt-heading-h2-font-size, 1.5rem);
   }
 }
 

package/dist/collection/components/action-list/components/action-list-item.css

@@ -48,14 +48,14 @@ h3 {
   margin-block-start: 0;
   min-block-size: 48px;
   padding-block-start: 9px;
-  color: #275937;
+  color: var(--_dt-heading-base-color, #275937);
   color: var(--_dt-heading-h3-color, #275937);
-  font-size: 1.125rem;
+  font-size: var(--_dt-heading-h3-font-size-xs, 1.125rem);
   font-weight: 600;
 }
 @media screen and (min-width: 480px) {
   h3 {
-    font-size: 1.25rem;
+    font-size: var(--_dt-heading-h3-font-size, 1.25rem);
   }
 }
 

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

@@ -19,6 +19,7 @@
 }
 
 .active-option {
+  color: inherit;
   display: flex;
   inline-size: 100%;
   justify-content: flex-start;

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

@@ -215,4 +215,42 @@
 }
 .alert.dso-compact {
   min-block-size: 16px;
+}
+
+::slotted(.dso-rich-content) {
+  --_dt-rich-content-margin-block-end: 0;
+  --_dt-rich-content-margin-block-start: 0;
+  --_dso-button-primary-color: #000;
+  --_dso-button-primary-background-color: rgba(25, 25, 25, 0.05);
+  --_dso-button-primary-border-color: rgba(25, 25, 25, 0.05);
+  --_dso-button-primary-hover-color: #000;
+  --_dso-button-primary-hover-background-color: rgba(25, 25, 25, 0.2);
+  --_dso-button-primary-hover-border-color: rgba(25, 25, 25, 0.2);
+  --_dso-button-primary-active-color: #000;
+  --_dso-button-primary-active-background-color: rgba(25, 25, 25, 0.2);
+  --_dso-button-primary-active-border-color: rgba(25, 25, 25, 0.2);
+  --_dt-heading-base-color: #000;
+  --_dt-heading-h2-color: #000;
+  --_dt-heading-h3-color: #000;
+  --_dt-heading-h4-color: #000;
+  --_dt-heading-h5-color: #000;
+  --_dt-heading-h1-font-size-xs: 1em;
+  --_dt-heading-h1-font-size: 1em;
+  --_dt-heading-h2-font-size-xs: 1em;
+  --_dt-heading-h2-font-size: 1em;
+  --_dt-heading-h3-font-size-xs: 1em;
+  --_dt-heading-h3-font-size: 1em;
+  --_dt-heading-h4-font-size: 1em;
+  --_dt-heading-h5-font-size: 1em;
+  --_dt-heading-h6-font-size: 1em;
+  --_dt-heading-h1-line-height: 1.5;
+  --_dt-heading-h2-line-height: 1.5;
+  --_dt-heading-h3-line-height: 1.5;
+  --_dt-heading-h4-line-height: 1.5;
+  --_dt-heading-h5-line-height: 1.5;
+  --_dt-heading-h6-line-height: 1.5;
+  --_dt-heading-margin-large-margin-block-end: 8px;
+  --_dt-heading-margin-large-margin-block-start: 8px;
+  --_dt-heading-margin-small-margin-block-end: 8px;
+  --_dt-heading-margin-small-margin-block-start: 8px;
 }

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

@@ -13,8 +13,13 @@
   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;
@@ -1340,8 +1345,13 @@
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
   opacity: 0;
   visibility: hidden;
+  transition: opacity 0.15s;
   max-inline-size: 320px;
 }
+.toggletip-button + .dso-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
 .toggletip-button + .dso-tooltip .tooltip-inner {
   --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: #39870c;

package/dist/collection/components/badge/badge.js

@@ -132,8 +132,8 @@ export class Badge {
         delete this.mutationObserver;
     }
     render() {
-        return ((this.hasToggletip && (h(Host, { key: '4ab3167d1e0da513bbfbc112cc79ea408dbb8cc6', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: '46c0e3801678e2d103378e3b3000f24a294f5bc6', ref: (el) => (this.buttonElRef = el), type: "button", "aria-label": this.label, class: "toggletip-button", onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: () => this.handleToggle() }, h("span", { key: '2e39d937e4c8b236466c79b3268f8a9d7078a635', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: '9cbf2331a05a1f5e171cb652c6815d144254a67a' }))), h(Tooltip, { key: '95d880fe4828ca2d192ae8b0791abe8e1b9682b1', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label), h(Tooltip, { key: '9e0adf2d1b37731a47e026164763377531b4a3d6', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: '8bf5237b1646ad8d759fa714d2256758813f91be', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '2c2a8624d52666e7e4c63db30117ca7bf47aa57f', name: "toggletip" })))))) ||
-            (!this.hasToggletip && (h("span", { key: '13f450c4df829d39ff793499077972a03a5dc060', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '0d275748ccbd98cd1f304796fbfc0defd6dcbbf5' })))));
+        return ((this.hasToggletip && (h(Host, { key: '4ab3167d1e0da513bbfbc112cc79ea408dbb8cc6', onKeyDown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("button", { key: '46c0e3801678e2d103378e3b3000f24a294f5bc6', ref: (el) => (this.buttonElRef = el), type: "button", "aria-label": this.label, class: "toggletip-button", onMouseEnter: this.handleShowTooltip, onMouseLeave: this.handleHideTooltip, onFocus: this.handleShowTooltip, onBlur: this.handleHideTooltip, onClick: () => this.handleToggle() }, h("span", { key: '2e39d937e4c8b236466c79b3268f8a9d7078a635', class: clsx("dso-badge", "interactive", { [`badge-${this.status}`]: this.status }, { toggled: this.toggletipActive }) }, h("slot", { key: '9cbf2331a05a1f5e171cb652c6815d144254a67a' }))), h(Tooltip, { key: 'f70128b0b00fbc1374b5ea7e0ab7aada334cc8ab', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label), h(Tooltip, { key: '93eff7b7f0f7039e1be485cd0603db096eba1f1c', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'e6327308f6c9938bd1913d6afa5dfbea2c13caea', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '53996d108958bbd0f822c04cc1f02e6cece2617d', name: "toggletip" })))))) ||
+            (!this.hasToggletip && (h("span", { key: '773bc90e7868bb66eb50a043242024f2916a3d76', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'b32655c2b7d8344c681dff6d727283b58e4e7d4d' })))));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1351,8 +1351,8 @@ mark.dso-highlight {
   gap: 8px;
 }
 
-:host([type=ARTIKEL]:not([alternative-title])) dso-ozon-content.kop::part(_kop),
-:host([type=ARTIKEL]:not([alternative-title])) .toggle-button {
+:host([type=ARTIKEL]:not([alternative-title]):not([mode=table-of-contents])) dso-ozon-content.kop::part(_kop),
+:host([type=ARTIKEL]:not([alternative-title]):not([mode=table-of-contents])) .toggle-button {
   --_dso-icon-button-tertiary-color: #000;
   color: #000;
 }

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

@@ -188,11 +188,11 @@ export class DocumentComponent {
                 next: !this.openAnnotation,
                 scrollRef: this.host,
                 originalEvent: e.detail.originalEvent,
-            }) }))))))), this.openAnnotation && (h("div", { key: '8746bc4ed68bc3620c113eef074b948272959f87', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: 'ae75591436513944b20b30962f4291cfb157efca', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
+            }) }))))))), this.openAnnotation && (h("div", { key: '8162cc176d5a8c05b983c36cbb769722c91c9813', class: "annotation-container", part: "_annotation-container", role: "dialog", "aria-labelledby": "annotations-heading" }, h("dso-panel", { key: 'ffd7c0629cb9bb955551ac716d6edcfffab9c78e', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({
                 current: true,
                 next: false,
                 originalEvent: e,
-            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '37175e255f0a9dfa3a024b14be3fbca10f18f64c', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '950f26b33105a31a4d957164ca3c426d2dcb4110', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: 'e4dd128387e4407a11f9e10420e3f88309754fd8', class: "content", part: "_content" }, h(AantekenAlert, { key: '3f7e2c0ca74defd8fac24ba02822843db173e6ee', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'b7aa32e7939d50978ef7730132c84e8cd038344c', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '85bfd9f8b0737cea51673410fb7c226dae2474c9', class: "children-container", part: "_children-container" }, h("slot", { key: 'eb36a4df9e2252f25ba39e36e0cd4b0b4bc2e6cc' }))));
+            }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'c25b22f974f8396f2bbc44c0ae7a368d293bf88c', id: "annotations-heading", slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '3006e43fe595baf212fb17f9a47474151fa29966', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '1026dadf34687669b2f09833a17286668842d5b4', class: "content", part: "_content" }, h(AantekenAlert, { key: '67918f72432b3a6f4c8cc1d2f4b21f51ba032437', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'b782dc85db857445454076ddeeca96524f4e3012', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: '5fbcca6a7d74bf25f29213bcdc64a2f9a38564d2', class: "children-container", part: "_children-container" }, h("slot", { key: 'a4424bd30e1b65048ba35a1ab9ff8b583cf73738' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,8 +61,13 @@
   filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
   opacity: 0;
   visibility: hidden;
+  transition: opacity 0.15s;
   max-inline-size: 320px;
 }
+.dso-tooltip.visible {
+  opacity: 1;
+  visibility: visible;
+}
 .dso-tooltip .tooltip-inner {
   --_dt-span-role-paragraph-margin-block: 8px;
   --_dso-alert-success-border-color: #39870c;

package/dist/collection/components/icon-button/icon-button.js

@@ -80,7 +80,7 @@ export class IconButton {
         this.cleanUp = undefined;
     }
     render() {
-        return (h("button", { key: '39b2888ecb9c678d727b500044de8eb8e040b10d', 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: '1a5eb6257dcae2dd73d2307018821e51f6df04c1', icon: this.icon }), h(Tooltip, { key: '73bca54aca26879f2b6ce2e73f6ad80b11e67ded', tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
+        return (h("button", { key: '39b2888ecb9c678d727b500044de8eb8e040b10d', 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: '1a5eb6257dcae2dd73d2307018821e51f6df04c1', icon: this.icon }), h(Tooltip, { key: 'cf80d8d08594dd9d493d17732604c9b2749bb569', visible: this.showTooltip, onAfterHidden: this.handleHideTooltip, tipElementRef: (element) => (this.tooltipElRef = element), tipArrowElementRef: (element) => (this.tipArrowElRef = element) }, this.label)));
     }
     static get is() { return "dso-icon-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,8 +26,13 @@
   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;

package/dist/collection/components/info-button/info-button.js

@@ -89,7 +89,7 @@ export class InfoButton {
         delete this.mutationObserver;
     }
     render() {
-        return (h(Host, { key: '9b6f13f1575ec545343cb421c7e79379b2820825', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("dso-icon-button", { key: 'b41305da964156d8bf789acb230ef85286383ea6', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element) }), this.hasToggletip && (h(Tooltip, { key: '6ba0d0d5a19fa61fbf12121346f3d200a7022ecc', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element) }, h("dso-scrollable", { key: 'd7f7d0c4b2731b4a40acd6b4cf3b164f65d62302', ref: (element) => (this.restrictContentElement = element) }, h("slot", { key: '199f4689d3bd57337a567ca215b3dfce8672f5fc', name: "toggletip" }))))));
+        return (h(Host, { key: '9b6f13f1575ec545343cb421c7e79379b2820825', onKeydown: this.keyDownHandler, onFocusout: this.focusOutHandler }, h("dso-icon-button", { key: '0b2d46eb999c4b8b95e2685d21dca2742090c94c', variant: "tertiary", label: this.label, onDsoClick: (e) => this.handleToggle(e.detail.originalEvent), icon: this.active || this.toggletipActive ? "info-solid" : "info-outline", ref: (element) => (this.button = element), "aria-expanded": this.toggletipActive ? "true" : "false", "aria-controls": "toggletip-content" }), this.hasToggletip && (h(Tooltip, { key: 'f893b20b2ab9137e80336df9865886416f5cb14b', tipElementRef: (element) => (this.toggletipElRef = element), tipArrowElementRef: (element) => (this.toggletipArrowElRef = element), visible: this.toggletipActive }, h("dso-scrollable", { key: 'ff5ef61cebe5a264de3e8eb170a1901cbb9cd723', ref: (element) => (this.restrictContentElement = element), id: "toggletip-content", "aria-live": "polite" }, h("slot", { key: '17b598b17aa331ddec9f8c65fa0045ba0c9cd7ca', name: "toggletip" }))))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,8 +19,13 @@
   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;

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

@@ -64,7 +64,7 @@ export class ozonContentToggletip {
         this.cleanUp = 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: 'e03cbd7b59d6020007e1ce9a4e258f8408175fdb', tipElementRef: (element) => (this.tooltip = element), tipArrowElementRef: (element) => (this.tooltipArrow = element) }, h("slot", { key: 'a9679de367309c86d2420bb729b3cc817e059dbb' }))));
+        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' }))));
     }
     static get is() { return "dso-ozon-content-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/functional-components/tooltip/position-tooltip.function.js

@@ -7,9 +7,7 @@ import { arrow, autoUpdate, computePosition, flip, hide, offset, shift, size } f
  */
 export function positionTooltip(options) {
     const { referenceElement, tipRef, tipArrowRef, placementTip, topPositionSmallViewPort, halfMainAxisOffset, forceVisible, restrictContentElement, } = options;
-    let animationFrameId;
-    let disposed = false;
-    const cleanup = autoUpdate(referenceElement, tipRef, () => {
+    return autoUpdate(referenceElement, tipRef, () => {
         const padding = 5;
         const arrowOffsetWidth = tipArrowRef.offsetWidth;
         const axisOffsetCalc = Math.sqrt(2 * arrowOffsetWidth ** 2);
@@ -50,78 +48,56 @@ export function positionTooltip(options) {
             ],
             placement,
         }).then(({ x, y, middlewareData, placement: computedPlacement, strategy }) => {
-            if (disposed) {
-                return;
-            }
-            if (animationFrameId !== undefined) {
-                cancelAnimationFrame(animationFrameId);
-            }
-            // Defer DOM writes until the next frame so ResizeObserver notifications
-            // can settle before the tooltip mutates its own layout again.
-            animationFrameId = requestAnimationFrame(() => {
-                if (disposed) {
-                    return;
-                }
+            if (middlewareData.hide) {
                 // Tooltip needs to be visible at all times on small viewports or when forceVisible is true
-                const disappear = !smallViewport && !forceVisible && !!middlewareData.hide?.referenceHidden;
+                const disappear = !smallViewport && !forceVisible && middlewareData.hide.referenceHidden;
                 Object.assign(tipRef.style, {
                     // Both of these properties have a CSS transition
                     visibility: disappear ? "hidden" : "visible",
-                    opacity: disappear ? "0" : "1",
+                    opacity: disappear ? 0 : 1,
                 });
-                Object.assign(tipRef.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                    strategy,
-                });
-                const side = computedPlacement.split("-")[0];
-                const staticSide = side
-                    ? {
-                        top: "bottom",
-                        right: "left",
-                        bottom: "top",
-                        left: "right",
-                    }[side]
-                    : "top";
-                let angle;
-                switch (staticSide) {
-                    default:
-                    case "top":
-                        angle = 45;
-                        break;
-                    case "right":
-                        angle = 135;
-                        break;
-                    case "bottom":
-                        angle = 225;
-                        break;
-                    case "left":
-                        angle = 315;
-                        break;
-                }
-                if (middlewareData.arrow && staticSide) {
-                    const { x: arrowX, y: arrowY } = middlewareData.arrow;
-                    Object.assign(tipArrowRef.style, {
-                        right: "",
-                        bottom: "",
-                        left: arrowX ? `${arrowX}px` : "",
-                        top: arrowY ? `${arrowY}px` : "",
-                        [staticSide]: `${-arrowOffsetWidth / 2}px`,
-                        transform: `rotate(${angle}deg)`,
-                    });
-                }
+            }
+            Object.assign(tipRef.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                strategy,
             });
+            const side = computedPlacement.split("-")[0];
+            const staticSide = side
+                ? {
+                    top: "bottom",
+                    right: "left",
+                    bottom: "top",
+                    left: "right",
+                }[side]
+                : "top";
+            let angle;
+            switch (staticSide) {
+                default:
+                case "top":
+                    angle = 45;
+                    break;
+                case "right":
+                    angle = 135;
+                    break;
+                case "bottom":
+                    angle = 225;
+                    break;
+                case "left":
+                    angle = 315;
+                    break;
+            }
+            if (middlewareData.arrow && staticSide) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                Object.assign(tipArrowRef.style, {
+                    right: "",
+                    bottom: "",
+                    left: arrowX ? `${arrowX}px` : "",
+                    top: arrowY ? `${arrowY}px` : "",
+                    [staticSide]: `${-arrowOffsetWidth / 2}px`,
+                    transform: `rotate(${angle}deg)`,
+                });
+            }
         });
     });
-    return () => {
-        disposed = true;
-        Object.assign(tipRef.style, {
-            visibility: "hidden",
-            opacity: "0",
-        });
-        if (animationFrameId !== undefined) {
-            cancelAnimationFrame(animationFrameId);
-        }
-        cleanup();
-    };
 }

package/dist/collection/functional-components/tooltip/tooltip.functional-component.js

@@ -1,2 +1,8 @@
 import { h } from "@stencil/core";
-export const Tooltip = ({ tipElementRef, tipArrowElementRef }, children) => (h("div", { popover: "manual", class: "dso-tooltip", ref: tipElementRef }, h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), h("div", { class: "tooltip-inner" }, children)));
+import { clsx } from "clsx";
+export const Tooltip = ({ visible, onAfterHidden, tipElementRef, tipArrowElementRef }, children) => (h("div", { popover: "manual", class: clsx(["dso-tooltip", { visible }]), ref: tipElementRef, onTransitionEnd: (e) => {
+        e.stopPropagation();
+        if (e.propertyName === "opacity" && !visible) {
+            onAfterHidden?.();
+        }
+    } }, h("span", { class: "tooltip-arrow", ref: tipArrowElementRef }), h("div", { class: "tooltip-inner" }, children)));

package/dist/components/alert.js

@@ -1 +1 @@
-import{proxyCustomElement as o,HTMLElement as r,createEvent as e,h as t,transformTag as a}from"@stencil/core/internal/client";import{c as i}from"./clsx.js";import{i as s}from"./i18n.js";import{d}from"./icon.js";import{d as l}from"./icon-button.js";const n={en:{"dso-alert":{close:"Close",success:"Success",info:"Notice",warning:"Warning",error:"Error"}},nl:{"dso-alert":{close:"Sluiten",success:"Gelukt",info:"Opmerking",warning:"Waarschuwing",error:"Fout"}}},c=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClose=e(this,"dsoClose",7),this.closable=!1,this.text=s((()=>this.host),n)}render(){const o=this.text(this.status);if(!o)throw new Error(`Invalid status ${this.status}`);return t("div",{key:"3523f656fb83ebc5c1b64b6a81796debcb180d5a",class:i("alert",`alert-${this.status}`,{"dso-compact":this.compact}),role:this.roleAlert?"alert":void 0},!this.compact&&t("dso-icon",{key:"cc5b49cc6711309d3beac250028aff76dc0d25c4",class:"icon-status",icon:`status-${"info"===this.status?"info-solid":this.status}`}),t("span",{key:"facad507699a3b11049f516b189dae8f54ce42e4",class:"sr-only"},o,":"),t("slot",{key:"33b0fda4382a8cd1408b4b423ba4f29ef2c132a7"}),this.closable&&t("dso-icon-button",{key:"ab8e6a15ea79dc19252fd7adcb68243d50e7a937",label:this.text("close"),variant:"tertiary",icon:"cross",onDsoClick:o=>this.dsoClose.emit({originalEvent:o})}))}get host(){return this}static get style(){return':host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::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)}.alert{line-height:1.5;margin-block-end:var(--_dso-alert-margin-block-end, 24px);min-block-size:56px;position:relative;border:1px solid transparent}@media screen and (min-width: 481px){.alert{padding-block:15px;padding-inline:54px 39px}.alert.dso-compact{padding-block:7px;padding-inline:15px 39px}}@media screen and (max-width: 480px){.alert{padding-block:54px 15px;padding-inline:15px}.alert.dso-compact{padding-block:7px;padding-inline:15px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:15px;inset-inline-start:15px;position:absolute}.alert.dso-compact{border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}.alert.dso-compact::before{content:"";position:absolute;inset-block-start:-1px;inset-block-end:-1px;inset-inline-start:-9px;border-start-start-radius:8px;border-end-start-radius:8px;inline-size:8px}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-success 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-zwart"))}.alert.alert-success 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-zwart"))}.alert.alert-success 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-zwart"))}.alert.alert-success 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#mail-outline-zwart"))}.alert.alert-success{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-error 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-zwart"))}.alert.alert-error 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-zwart"))}.alert.alert-error 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-zwart"))}.alert.alert-error 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#mail-outline-zwart"))}.alert.alert-error{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-warning 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-zwart"))}.alert.alert-warning 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-zwart"))}.alert.alert-warning 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-zwart"))}.alert.alert-warning 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#mail-outline-zwart"))}.alert.alert-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919;border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-info 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-zwart"))}.alert.alert-info 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-zwart"))}.alert.alert-info 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-zwart"))}.alert.alert-info 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#mail-outline-zwart"))}.alert.alert-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919;border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}'}},[257,"dso-alert",{status:[513],roleAlert:[4,"role-alert"],compact:[516],closable:[4]}]);function b(){"undefined"!=typeof customElements&&["dso-alert","dso-icon","dso-icon-button"].forEach((o=>{switch(o){case"dso-alert":customElements.get(a(o))||customElements.define(a(o),c);break;case"dso-icon":customElements.get(a(o))||d();break;case"dso-icon-button":customElements.get(a(o))||l()}}))}export{c as A,b as d}
+import{proxyCustomElement as o,HTMLElement as r,createEvent as t,h as e,transformTag as a}from"@stencil/core/internal/client";import{c as i}from"./clsx.js";import{i as d}from"./i18n.js";import{d as n}from"./icon.js";import{d as s}from"./icon-button.js";const l={en:{"dso-alert":{close:"Close",success:"Success",info:"Notice",warning:"Warning",error:"Error"}},nl:{"dso-alert":{close:"Sluiten",success:"Gelukt",info:"Opmerking",warning:"Waarschuwing",error:"Fout"}}},c=o(class extends r{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.dsoClose=t(this,"dsoClose",7),this.closable=!1,this.text=d((()=>this.host),l)}render(){const o=this.text(this.status);if(!o)throw new Error(`Invalid status ${this.status}`);return e("div",{key:"3523f656fb83ebc5c1b64b6a81796debcb180d5a",class:i("alert",`alert-${this.status}`,{"dso-compact":this.compact}),role:this.roleAlert?"alert":void 0},!this.compact&&e("dso-icon",{key:"cc5b49cc6711309d3beac250028aff76dc0d25c4",class:"icon-status",icon:`status-${"info"===this.status?"info-solid":this.status}`}),e("span",{key:"facad507699a3b11049f516b189dae8f54ce42e4",class:"sr-only"},o,":"),e("slot",{key:"33b0fda4382a8cd1408b4b423ba4f29ef2c132a7"}),this.closable&&e("dso-icon-button",{key:"ab8e6a15ea79dc19252fd7adcb68243d50e7a937",label:this.text("close"),variant:"tertiary",icon:"cross",onDsoClick:o=>this.dsoClose.emit({originalEvent:o})}))}get host(){return this}static get style(){return':host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::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)}.alert{line-height:1.5;margin-block-end:var(--_dso-alert-margin-block-end, 24px);min-block-size:56px;position:relative;border:1px solid transparent}@media screen and (min-width: 481px){.alert{padding-block:15px;padding-inline:54px 39px}.alert.dso-compact{padding-block:7px;padding-inline:15px 39px}}@media screen and (max-width: 480px){.alert{padding-block:54px 15px;padding-inline:15px}.alert.dso-compact{padding-block:7px;padding-inline:15px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:15px;inset-inline-start:15px;position:absolute}.alert.dso-compact{border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}.alert.dso-compact::before{content:"";position:absolute;inset-block-start:-1px;inset-block-end:-1px;inset-inline-start:-9px;border-start-start-radius:8px;border-end-start-radius:8px;inline-size:8px}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-success 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-zwart"))}.alert.alert-success 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-zwart"))}.alert.alert-success 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-zwart"))}.alert.alert-success 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#mail-outline-zwart"))}.alert.alert-success{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-error 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-zwart"))}.alert.alert-error 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-zwart"))}.alert.alert-error 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-zwart"))}.alert.alert-error 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#mail-outline-zwart"))}.alert.alert-error{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-warning 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-zwart"))}.alert.alert-warning 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-zwart"))}.alert.alert-warning 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-zwart"))}.alert.alert-warning 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#mail-outline-zwart"))}.alert.alert-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919;border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-info 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-zwart"))}.alert.alert-info 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-zwart"))}.alert.alert-info 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-zwart"))}.alert.alert-info 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#mail-outline-zwart"))}.alert.alert-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;--_dso-button-tertiary-color:#191919;--_dso-button-tertiary-hover-color:#4c4c4c;--_dso-button-tertiary-active-color:#173521;--_dso-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919;border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}::slotted(.dso-rich-content){--_dt-rich-content-margin-block-end:0;--_dt-rich-content-margin-block-start:0;--_dso-button-primary-color:#000;--_dso-button-primary-background-color:rgba(25, 25, 25, 0.05);--_dso-button-primary-border-color:rgba(25, 25, 25, 0.05);--_dso-button-primary-hover-color:#000;--_dso-button-primary-hover-background-color:rgba(25, 25, 25, 0.2);--_dso-button-primary-hover-border-color:rgba(25, 25, 25, 0.2);--_dso-button-primary-active-color:#000;--_dso-button-primary-active-background-color:rgba(25, 25, 25, 0.2);--_dso-button-primary-active-border-color:rgba(25, 25, 25, 0.2);--_dt-heading-base-color:#000;--_dt-heading-h2-color:#000;--_dt-heading-h3-color:#000;--_dt-heading-h4-color:#000;--_dt-heading-h5-color:#000;--_dt-heading-h1-font-size-xs:1em;--_dt-heading-h1-font-size:1em;--_dt-heading-h2-font-size-xs:1em;--_dt-heading-h2-font-size:1em;--_dt-heading-h3-font-size-xs:1em;--_dt-heading-h3-font-size:1em;--_dt-heading-h4-font-size:1em;--_dt-heading-h5-font-size:1em;--_dt-heading-h6-font-size:1em;--_dt-heading-h1-line-height:1.5;--_dt-heading-h2-line-height:1.5;--_dt-heading-h3-line-height:1.5;--_dt-heading-h4-line-height:1.5;--_dt-heading-h5-line-height:1.5;--_dt-heading-h6-line-height:1.5;--_dt-heading-margin-large-margin-block-end:8px;--_dt-heading-margin-large-margin-block-start:8px;--_dt-heading-margin-small-margin-block-end:8px;--_dt-heading-margin-small-margin-block-start:8px}'}},[257,"dso-alert",{status:[513],roleAlert:[4,"role-alert"],compact:[516],closable:[4]}]);function b(){"undefined"!=typeof customElements&&["dso-alert","dso-icon","dso-icon-button"].forEach((o=>{switch(o){case"dso-alert":customElements.get(a(o))||customElements.define(a(o),c);break;case"dso-icon":customElements.get(a(o))||n();break;case"dso-icon-button":customElements.get(a(o))||s()}}))}export{c as A,b as d}