@dso-toolkit/core 99.3.0 → 99.5.0

package/dist/{bundle/p-BF0_OXTe.js → esm/v4-CK3_k8jD.js}

@@ -25,25 +25,18 @@ function unsafeStringify(arr, offset = 0) {
         byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
-let getRandomValues;
 const rnds8 = new Uint8Array(16);
 function rng() {
-    if (!getRandomValues) {
-        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
-            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
-        }
-        getRandomValues = crypto.getRandomValues.bind(crypto);
-    }
-    return getRandomValues(rnds8);
+    return crypto.getRandomValues(rnds8);
 }
 
-const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
-var native = { randomUUID };
-
 function v4(options, buf, offset) {
-    if (native.randomUUID && true && !options) {
-        return native.randomUUID();
+    if (crypto.randomUUID) {
+        return crypto.randomUUID();
     }
+    return _v4(options);
+}
+function _v4(options, buf, offset) {
     options = options || {};
     const rnds = options.random ?? options.rng?.() ?? rng();
     if (rnds.length < 16) {

package/dist/types/components/advanced-select/advanced-select.d.ts

@@ -1,12 +1,12 @@
 import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
-import { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./advanced-select.interfaces";
+import { AdvancedSelectChangeEvent, AdvancedSelectGroup, AdvancedSelectOption, AdvancedSelectPlaceholder, AdvancedSelectRedirectEvent } from "./advanced-select.interfaces";
 export declare class AdvancedSelect implements ComponentInterface {
     private trap?;
     host: HTMLDsoAdvancedSelectElement;
     /**
      * The options to display in the select.
      */
-    options: AdvancedSelectOptionOrGroup<unknown>[];
+    options: (AdvancedSelectOption<unknown> | AdvancedSelectGroup<unknown> | AdvancedSelectPlaceholder)[];
     /**
      * The active option. By object reference.
      */

package/dist/types/components/advanced-select/advanced-select.interfaces.d.ts

@@ -9,6 +9,7 @@ export interface AdvancedSelectGroupRedirect {
 }
 export interface AdvancedSelectGroup<T> {
     label: string;
+    badgeLabel?: string;
     activeLabel?: string;
     summaryCounter?: boolean;
     redirect?: AdvancedSelectGroupRedirect;
@@ -21,7 +22,6 @@ export interface AdvancedSelectPlaceholder {
     redirect?: AdvancedSelectGroupRedirect;
     placeholder: string;
 }
-export type AdvancedSelectOptionOrGroup<T> = AdvancedSelectOption<T> | AdvancedSelectGroup<T> | AdvancedSelectPlaceholder;
 export interface AdvancedSelectChangeEvent<T> {
     originalEvent: MouseEvent;
     option: AdvancedSelectOption<T>;

package/dist/types/components/document-component/document-component-heading.d.ts

@@ -6,5 +6,5 @@ interface DocumentComponentHeadingProps {
     mode: DocumentComponentMode;
     href?: string;
 }
-export declare const Heading: FunctionalComponent<DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>>;
+export declare const Heading: FunctionalComponent<DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLElement>>;
 export {};

package/dist/types/components/document-component/document-component.d.ts

@@ -12,7 +12,8 @@ import { DocumentComponentAnnotationsWijzigactie, DocumentComponentInputType, Do
 export declare class DocumentComponent implements ComponentInterface {
     host: HTMLDsoDocumentComponentElement;
     /**
-     * The heading element to use.
+     * The heading element to use (only in mode="document"). In mode="table-of-contents" the nested lists carry the
+     * structure and no heading is rendered.
      */
     heading: "h2" | "h3" | "h4" | "h5" | "h6";
     private _kopInput?;

package/dist/types/components/icon-button/icon-button.d.ts

@@ -30,10 +30,14 @@ export declare class IconButton implements ComponentInterface {
      * To disable the Icon Button
      */
     disabled: boolean;
+    /**
+     * Indicates whether the controlled element is expanded.
+     */
+    expanded?: boolean;
     /**
      * Whether the button is toggled.
      */
-    toggled: boolean;
+    toggled?: boolean;
     /**
      * Emitted when the user clicks the Icon Button.
      */

package/dist/types/components/selectable/selectable.d.ts

@@ -30,9 +30,20 @@ export declare class Selectable implements ComponentInterface {
      */
     invalid?: boolean;
     /**
-     * To link this control to an element that describes it.
+     * To link this control to the Info that describes it.
+     * The property `infoFixed` should be set to true.
+     * The slot `info` should be filled.
+     *
+     * Implemented with `aria-describedby` on the `<input>` element; works alongside `errormessage`.
      */
     describedById?: string;
+    /**
+     * To link this control to an element containing an error message.
+     *
+     * The value is the id of the element containing the error message. Implemented with `aria-describedby` on the
+     * `<input>` element; works alongside `describedById`.
+     */
+    errormessage?: string;
     /**
      * To link this control to an element that labels it.
      */

package/dist/types/components.d.ts

@@ -10,7 +10,7 @@ import { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from
 import { AccordionHeading, AccordionSectionActiveChangeEvent, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent, AccordionSectionWijzigactie } from "./components/accordion/components/accordion-section.interfaces";
 import { IconAlias } from "./components/icon/icon.interfaces";
 import { LabelStatus } from "./components/label/label.interfaces";
-import { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
+import { AdvancedSelectChangeEvent, AdvancedSelectGroup, AdvancedSelectOption, AdvancedSelectPlaceholder, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
 import { AlertCloseEvent } from "./components/alert/alert.interfaces";
 import { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components/annotation/annotation.interfaces";
 import { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
@@ -64,7 +64,7 @@ export { RenvooiMarkFunction, RenvooiMarkItemHighlightEvent, RenvooiValue } from
 export { AccordionHeading, AccordionSectionActiveChangeEvent, AccordionSectionAnimationEndEvent, AccordionSectionAnimationStartEvent, AccordionSectionState, AccordionSectionToggleClickEvent, AccordionSectionWijzigactie } from "./components/accordion/components/accordion-section.interfaces";
 export { IconAlias } from "./components/icon/icon.interfaces";
 export { LabelStatus } from "./components/label/label.interfaces";
-export { AdvancedSelectChangeEvent, AdvancedSelectOption, AdvancedSelectOptionOrGroup, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
+export { AdvancedSelectChangeEvent, AdvancedSelectGroup, AdvancedSelectOption, AdvancedSelectPlaceholder, AdvancedSelectRedirectEvent } from "./components/advanced-select/advanced-select.interfaces";
 export { AlertCloseEvent } from "./components/alert/alert.interfaces";
 export { AnnotationActiveChangeEvent, AnnotationWijzigactie } from "./components/annotation/annotation.interfaces";
 export { AnnotationKaartClickEvent } from "./components/annotation/annotation-kaart/annotation-kaart.interfaces";
@@ -236,7 +236,7 @@ export namespace Components {
           * The options to display in the select.
           * @default []
          */
-        "options": AdvancedSelectOptionOrGroup<unknown>[];
+        "options": (AdvancedSelectOption<unknown> | AdvancedSelectGroup<unknown> | AdvancedSelectPlaceholder)[];
     }
     interface DsoAlert {
         /**
@@ -561,7 +561,7 @@ export namespace Components {
          */
         "gereserveerd": DocumentComponentInputType | undefined;
         /**
-          * The heading element to use.
+          * The heading element to use (only in mode="document"). In mode="table-of-contents" the nested lists carry the structure and no heading is rendered.
           * @default "h2"
          */
         "heading": "h2" | "h3" | "h4" | "h5" | "h6";
@@ -789,6 +789,10 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Indicates whether the controlled element is expanded.
+         */
+        "expanded"?: boolean;
         /**
           * The alias of the icon in the button.
          */
@@ -803,9 +807,8 @@ export namespace Components {
         "setFocus": () => Promise<void>;
         /**
           * Whether the button is toggled.
-          * @default false
          */
-        "toggled": boolean;
+        "toggled"?: boolean;
         /**
           * The placement of the tooltip on hover and focus of the Icon Button.
           * @default "top"
@@ -1276,13 +1279,17 @@ export namespace Components {
          */
         "checked"?: boolean;
         /**
-          * To link this control to an element that describes it.
+          * To link this control to the Info that describes it. The property `infoFixed` should be set to true. The slot `info` should be filled.  Implemented with `aria-describedby` on the `<input>` element; works alongside `errormessage`.
          */
         "describedById"?: string;
         /**
           * To disable the Selectable.
          */
         "disabled"?: boolean;
+        /**
+          * To link this control to an element containing an error message.  The value is the id of the element containing the error message. Implemented with `aria-describedby` on the `<input>` element; works alongside `describedById`.
+         */
+        "errormessage"?: string;
         /**
           * To set `<input id>` attribute for external references.
          */
@@ -3007,7 +3014,7 @@ declare namespace LocalJSX {
           * The options to display in the select.
           * @default []
          */
-        "options"?: AdvancedSelectOptionOrGroup<unknown>[];
+        "options"?: (AdvancedSelectOption<unknown> | AdvancedSelectGroup<unknown> | AdvancedSelectPlaceholder)[];
     }
     interface DsoAlert {
         /**
@@ -3396,7 +3403,7 @@ declare namespace LocalJSX {
          */
         "gereserveerd"?: DocumentComponentInputType | undefined;
         /**
-          * The heading element to use.
+          * The heading element to use (only in mode="document"). In mode="table-of-contents" the nested lists carry the structure and no heading is rendered.
           * @default "h2"
          */
         "heading"?: "h2" | "h3" | "h4" | "h5" | "h6";
@@ -3666,6 +3673,10 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Indicates whether the controlled element is expanded.
+         */
+        "expanded"?: boolean;
         /**
           * The alias of the icon in the button.
          */
@@ -3680,7 +3691,6 @@ declare namespace LocalJSX {
         "onDsoClick"?: (event: DsoIconButtonCustomEvent<IconButtonClickEvent>) => void;
         /**
           * Whether the button is toggled.
-          * @default false
          */
         "toggled"?: boolean;
         /**
@@ -4282,13 +4292,17 @@ declare namespace LocalJSX {
          */
         "checked"?: boolean;
         /**
-          * To link this control to an element that describes it.
+          * To link this control to the Info that describes it. The property `infoFixed` should be set to true. The slot `info` should be filled.  Implemented with `aria-describedby` on the `<input>` element; works alongside `errormessage`.
          */
         "describedById"?: string;
         /**
           * To disable the Selectable.
          */
         "disabled"?: boolean;
+        /**
+          * To link this control to an element containing an error message.  The value is the id of the element containing the error message. Implemented with `aria-describedby` on the `<input>` element; works alongside `describedById`.
+         */
+        "errormessage"?: string;
         /**
           * To set `<input id>` attribute for external references.
          */
@@ -4781,6 +4795,7 @@ declare namespace LocalJSX {
         "variant": IconButtonVariant;
         "tooltipPlacement": TooltipPlacement;
         "disabled": boolean;
+        "expanded": boolean;
         "toggled": boolean;
     }
     interface DsoImageOverlayAttributes {
@@ -4922,6 +4937,7 @@ declare namespace LocalJSX {
         "value": string;
         "invalid": boolean;
         "describedById": string;
+        "errormessage": string;
         "labelledById": string;
         "disabled": boolean;
         "required": boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dso-toolkit/core",
-  "version": "99.3.0",
+  "version": "99.5.0",
   "description": "DSO Toolkit Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",
@@ -15,45 +15,45 @@
     "loader/"
   ],
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
     "@popperjs/core": "^2.11.8",
     "@stencil/core": "4.43.5",
     "@stencil/store": "^2.2.2",
     "clsx": "^2.1.1",
     "escape-string-regexp": "^5.0.0",
     "focus-trap": "^8.2.2",
-    "i18next": "^26.3.3",
+    "i18next": "^26.3.6",
     "popper-max-size-modifier": "^0.2.0",
     "tabbable": "^6.5.0",
     "uuid": "^14.0.1",
-    "dso-toolkit": "99.3.0"
+    "dso-toolkit": "99.5.0"
   },
   "devDependencies": {
-    "@stencil/angular-output-target": "^1.4.0",
-    "@stencil/react-output-target": "^1.6.0",
-    "@stencil/sass": "^3.2.3",
+    "@stencil/angular-output-target": "^1.4.1",
+    "@stencil/react-output-target": "^1.6.1",
+    "@stencil/sass": "^3.3.2",
     "@types/debounce": "^1.2.4",
     "@types/lodash.kebabcase": "^4.1.9",
     "@types/lodash.random": "^3.2.9",
     "@types/lodash.samplesize": "^4.2.9",
-    "@types/node": "^24.12.0",
+    "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "concurrently": "^10.0.3",
+    "concurrently": "^10.0.4",
     "debounce": "^3.0.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.random": "^3.2.0",
     "lodash.samplesize": "^4.2.0",
-    "prettier": "^3.9.4",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "prettier": "^3.9.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rimraf": "^6.1.3",
     "stencil-inline-svg": "^1.1.0",
-    "tsx": "^4.22.4",
+    "tsx": "^4.23.1",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "dso-toolkit": "99.3.0"
+    "dso-toolkit": "99.5.0"
   },
   "nx": {
     "includedScripts": []

package/dist/bundle/p-YGjRwvU1.js

@@ -1,161 +0,0 @@
-import { h, p as proxyCustomElement, H, d as createEvent, F as Fragment, t as transformTag } from './p-Di7uBIhp.js';
-import { g as getActiveElement } from './p-BWkWD1Z2.js';
-import { i as i18n } from './p-CUWMAyh7.js';
-import { d as defineCustomElement$3 } from './p-Du2uEAur.js';
-import { d as defineCustomElement$2 } from './p-BVpypRBU.js';
-import { d as defineCustomElement$1 } from './p-BuYJl3wN.js';
-import { v as v4 } from './p-BF0_OXTe.js';
-
-const Body = () => {
-    return (h("div", { class: "dso-body", tabIndex: 0 }, h("slot", { name: "body" })));
-};
-
-const Footer = () => {
-    return (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })));
-};
-
-const Header = ({ modalTitle, closable, ariaId, text, dsoClose }) => {
-    return modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: ariaId }, modalTitle), closable && (h("dso-icon-button", { id: "close-modal", icon: "cross", variant: "tertiary", label: text("close"), onDsoClick: (e) => dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: ariaId }, text("dialog")));
-};
-
-const translations = {
-    en: {
-        "dso-modal": {
-            close: "Close",
-            dialog: "Dialog",
-        },
-    },
-    nl: {
-        "dso-modal": {
-            close: "Sluiten",
-            dialog: "Dialoog",
-        },
-    },
-};
-
-const modalCss = () => `@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.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{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;letter-spacing:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{--_dso-button-float-tertiary:inline-start;--_dso-button-padding-block-tertiary:14px;overflow:visible;padding:0;border:0;inline-size:var(--_dso-modal-inline-size, fit-content);margin:var(--_dso-modal-margin, auto)}@media screen and (max-width: 767px){.dso-modal{--_dso-button-inline-size:100%;--_dso-button-after-button-margin-inline-start:0;--_dso-button-after-button-margin-block-start:8px;--_dso-button-text-align:center}.dso-modal .modal-scrollable{display:flex;flex-direction:column;min-block-size:100%}.dso-modal .dso-body{flex:1 1 auto}}@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.6)}.dso-modal .dso-dialog{inline-size:var(--_dso-modal-dialog-inline-size, 640px);margin-block-start:var(--_dso-modal-dialog-margin-block-start, 0);margin-inline-start:var(--_dso-modal-dialog-margin-inline-start, auto);margin-inline-end:var(--_dso-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;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header dso-icon-button{position:absolute;inset-block-start:var(--_dso-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(--_dso-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body ul ul,.dso-modal>.dso-dialog>.dso-body ul ol,.dso-modal>.dso-dialog>.dso-body ol ul,.dso-modal>.dso-dialog>.dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>.dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>.dso-body blockquote{padding-block:16px;padding-inline:1.5rem}.dso-modal>.dso-dialog>.dso-body dso-highlight-box{margin-block-end:1.5rem}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:var(--_dso-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:var(--_dso-modal-body-max-block-size, calc(70vh - 144px - 1.5em));min-block-size:6.5rem}@media screen and (min-width: 480px) and (max-width: 767px){.dso-modal>.dso-dialog>dso-scrollable.narrow{max-block-size:var(--_dso-modal-body-max-block-size, calc(100vh - 32px))}}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin-block:0 var(--_dso-rich-content-margin-block, 16px);margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ul ol,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol ol{margin-block-end:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin-block:0 16px;margin-inline:0}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding-block:16px;padding-inline:1.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box{margin-block-end:1.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.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}.dso-modal .dso-footer{min-block-size:80px;padding-block:16px;padding-inline:32px;text-align:end}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-height: 380px){.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding-block:8px;padding-inline:32px}}`;
-
-const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsoClose = createEvent(this, "dsoClose", 7);
-        this.startedMouseDownOutsideDialog = false;
-        this.endedMouseUpOutsideDialog = false;
-        this.narrowViewBreakpoint = 768;
-        this.mediaCondition = `(min-width: ${this.narrowViewBreakpoint}px)`;
-        this.ariaId = v4();
-        this.narrowView = window.innerWidth < this.narrowViewBreakpoint;
-        /**
-         * the role for the modal `dialog` | `alert` | `alertdialog`.
-         */
-        this.dialogRole = "dialog";
-        /**
-         * The element to return focus to after the modal is closed.
-         *
-         * * `undefined` will return focus to the previously focused element (default).
-         * * `false` will not return focus to any element.
-         * * or, provide your own `HTMLElement` that will receive focus upon closing.
-         */
-        this.returnFocus = undefined;
-        /**
-         * when `false` the close button in the header will not be rendered.
-         *
-         * Needs `modalTitle` to be set.
-         */
-        this.closable = false;
-        this.text = i18n(() => this.host, translations);
-        this.changeListener = (largeScreen) => (this.narrowView = !largeScreen.matches);
-        this.blockEscapeKey = (e) => {
-            if (e.key === "Escape") {
-                e.preventDefault();
-                if (this.closable) {
-                    this.dsoClose.emit({ originalEvent: e });
-                }
-            }
-        };
-    }
-    get hasFooter() {
-        return this.host.querySelector("[slot='footer']") !== null;
-    }
-    componentDidLoad() {
-        if (this.htmlDialogElement?.isConnected) {
-            const activeElement = getActiveElement();
-            if (activeElement instanceof H) {
-                this.returnFocusElement = activeElement;
-            }
-            this.htmlDialogElement.showModal();
-        }
-    }
-    connectedCallback() {
-        window.matchMedia(this.mediaCondition).addEventListener("change", this.changeListener);
-    }
-    disconnectedCallback() {
-        window.matchMedia(this.mediaCondition).removeEventListener("change", this.changeListener);
-        this.htmlDialogElement?.close();
-        if (this.returnFocus === false) {
-            return;
-        }
-        (this.returnFocus ?? this.returnFocusElement)?.focus();
-    }
-    handleDialogMouseDown(e) {
-        this.startedMouseDownOutsideDialog = e.target === this.htmlDialogElement;
-    }
-    handleDialogMouseUp(e) {
-        this.endedMouseUpOutsideDialog = e.target === this.htmlDialogElement;
-    }
-    handleDialogClick(e) {
-        if (!this.closable) {
-            return;
-        }
-        if (this.startedMouseDownOutsideDialog && this.endedMouseUpOutsideDialog && e.target === this.htmlDialogElement) {
-            this.dsoClose.emit({ originalEvent: e });
-        }
-    }
-    render() {
-        return (h("dialog", { key: '5bf0dd2d3c65fbd1590b96bbe92838076246f507', class: "dso-modal", role: this.dialogRole ?? undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onMouseDown: (e) => this.handleDialogMouseDown(e), onMouseUp: (e) => this.handleDialogMouseUp(e), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '42ca0a18d4e91eaa6e78739b20deb5bc11281599', class: "dso-dialog" }, this.narrowView ? (h("dso-scrollable", { class: "narrow" }, h("div", { class: "modal-scrollable" }, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h(Body, null), this.hasFooter && h(Footer, null)))) : (h(Fragment, null, h(Header, { modalTitle: this.modalTitle, closable: this.closable, ariaId: this.ariaId, text: this.text, dsoClose: this.dsoClose }), h("dso-scrollable", null, h(Body, null)), this.hasFooter && h(Footer, null))))));
-    }
-    get host() { return this; }
-    static get style() { return modalCss(); }
-}, [1, "dso-modal", {
-        "fullscreen": [516],
-        "modalTitle": [1, "modal-title"],
-        "dialogRole": [1, "dialog-role"],
-        "returnFocus": [4, "return-focus"],
-        "closable": [4],
-        "ariaId": [32],
-        "narrowView": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-modal", "dso-icon", "dso-icon-button", "dso-scrollable"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-modal":
-            if (!customElements.get(transformTag(tagName))) {
-                customElements.define(transformTag(tagName), Modal);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$3();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$2();
-            }
-            break;
-        case "dso-scrollable":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Modal as M, defineCustomElement as d };