@dso-toolkit/core 47.0.0 → 48.0.0

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

@@ -6,21 +6,73 @@
     opacity: 1;
   }
 }
-:host .dso-dialog {
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+button {
+  -webkit-appearance: button;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  font-family: inherit;
+  font-size: 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 {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 530;
+}
+.dso-modal .dso-dialog {
+  animation: 1s ease-out 0s 1 slideInFromTop;
+  margin-top: 15vh;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 640px;
+  opacity: 1;
   background-color: #fff;
   box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
 }
-:host .dso-header {
+.dso-modal .dso-header {
   border-bottom: 1px solid #ccc;
   padding: 16px;
   position: relative;
 }
-:host .dso-header h2 {
+.dso-modal .dso-header h2 {
   color: #275937;
   margin: 0;
   max-width: calc(100% - 24px);
 }
-:host .dso-header .dso-close {
+.dso-modal .dso-header .dso-close {
   background-color: transparent;
   border: 0;
   height: 32px;
@@ -31,123 +83,99 @@
   top: 16px;
   width: 32px;
 }
-:host .dso-body {
+.dso-modal .dso-body {
   height: calc(100% - 96px - 1.5rem);
   max-height: calc(70vh - 144px - 1.5em);
   min-height: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
-:host .dso-body p {
+.dso-modal .dso-body p {
   margin: 0 0 16px;
 }
-:host .dso-body ul,
-:host .dso-body ol {
+.dso-modal .dso-body ul,
+.dso-modal .dso-body ol {
   margin-bottom: 16px;
 }
-:host .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-:host .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
   padding-inline-start: 24px;
 }
-:host .dso-body pre {
+.dso-modal .dso-body pre {
   margin: 0 0 16px;
 }
-:host .dso-body blockquote {
+.dso-modal .dso-body blockquote {
   padding: 16px 24px;
 }
-:host .dso-body dso-highlight-box,
-:host .dso-body .dso-highlight-box {
+.dso-modal .dso-body dso-highlight-box,
+.dso-modal .dso-body .dso-highlight-box {
   margin-bottom: 24px;
 }
-:host .dso-body img {
+.dso-modal .dso-body img {
   height: auto;
   max-width: 100%;
 }
-:host .dso-footer {
+.dso-modal .dso-footer {
   min-height: 80px;
   padding: 0 32px 32px;
   text-align: right;
 }
-@media screen and (min-width: 768px) {
-  :host {
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 530;
+@media screen and (max-width: 767px) {
+  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .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 + .btn, .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 + .btn, .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-left: 0;
   }
-  :host .dso-dialog {
-    animation: 1s ease-out 0s 1 slideInFromTop;
-    margin: auto;
-    margin-top: 15vh;
-    max-width: 640px;
-    opacity: 1;
+  .dso-modal .dso-footer button {
+    text-align: center;
+    width: 100%;
+  }
+  .dso-modal .dso-footer button + button {
+    margin-top: 8px;
   }
-  :host .dso-footer .btn + .dso-secondary, :host .dso-footer .btn + .btn-default, :host .dso-footer .dso-primary + .dso-secondary, :host .dso-footer .dso-primary + .btn-default, :host .dso-footer .dso-secondary + .dso-secondary, :host .dso-footer .dso-secondary + .btn-default, :host .dso-footer .dso-tertiary + .dso-secondary, :host .dso-footer .dso-tertiary + .btn-default {
+  .dso-modal .dso-footer button.dso-tertiary,
+.dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
+.dso-modal .dso-footer button.btn-link span {
+    float: none;
+  }
+}
+@media screen and (min-width: 768px) {
+  .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .btn-default, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .btn-default, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .btn-default, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .btn-default {
     margin-left: 16px;
   }
-  :host .dso-footer .btn + .dso-tertiary, :host .dso-footer .btn + .btn-link, :host .dso-footer .dso-primary + .dso-tertiary, :host .dso-footer .dso-primary + .btn-link, :host .dso-footer .dso-secondary + .dso-tertiary, :host .dso-footer .dso-secondary + .btn-link, :host .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-footer .dso-tertiary + .btn-link {
+  .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .btn + .btn-link, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn-link, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn-link, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn-link {
     margin-left: 0;
   }
 }
 @media screen and (max-width: 767px) {
-  :host {
+  .dso-modal .dso-dialog {
     max-width: 100%;
+    margin-top: 0;
   }
-  :host .dso-footer .btn + .btn, :host .dso-footer .btn + .dso-primary, :host .dso-footer .btn + .dso-secondary, :host .dso-footer .btn + .dso-tertiary, :host .dso-footer .dso-primary + .btn, :host .dso-footer .dso-primary + .dso-primary, :host .dso-footer .dso-primary + .dso-secondary, :host .dso-footer .dso-primary + .dso-tertiary, :host .dso-footer .dso-secondary + .btn, :host .dso-footer .dso-secondary + .dso-primary, :host .dso-footer .dso-secondary + .dso-secondary, :host .dso-footer .dso-secondary + .dso-tertiary, :host .dso-footer .dso-tertiary + .btn, :host .dso-footer .dso-tertiary + .dso-primary, :host .dso-footer .dso-tertiary + .dso-secondary, :host .dso-footer .dso-tertiary + .dso-tertiary {
+  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .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 + .btn, .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 + .btn, .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-left: 0;
   }
-  :host .dso-footer button {
+  .dso-modal .dso-footer button {
     text-align: center;
     width: 100%;
   }
-  :host .dso-footer button + button {
+  .dso-modal .dso-footer button + button {
     margin-top: 8px;
   }
-  :host .dso-footer button.dso-tertiary,
-:host .dso-footer button.dso-tertiary span, :host .dso-footer button.btn-link,
-:host .dso-footer button.btn-link span {
+  .dso-modal .dso-footer button.dso-tertiary,
+.dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
+.dso-modal .dso-footer button.btn-link span {
     float: none;
   }
 }
 
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-button {
-  -webkit-appearance: button;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-family: inherit;
-  font-size: 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-overlay {
+  background-color: rgba(255, 255, 255, 0.8);
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 529;
 }
 
 .dso-close dso-icon {

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 import { createFocusTrap } from "focus-trap";
 import { v4 } from "uuid";
 export class Modal {
@@ -13,16 +13,14 @@ export class Modal {
     this.hasFooter = this.host.querySelector("*[slot = 'footer']") !== null;
   }
   componentDidLoad() {
-    document.body.classList.add(Modal.modalOpenClass);
     this.setFocusTrap();
   }
   disconnectedCallback() {
     var _a;
-    document.body.classList.remove(Modal.modalOpenClass);
     (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
   }
   render() {
-    return (h(Host, { class: "dso-modal", role: this.role, "aria-modal": "true", "aria-labelledby": this.ariaId }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body" }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" }))))));
+    return (h(Fragment, null, h("div", { class: "dso-modal-overlay" }), h("div", { class: "dso-modal", role: this.role, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("div", { class: "dso-body" }, h("slot", { name: "body" })), this.hasFooter && (h("div", { class: "dso-footer" }, h("slot", { name: "footer" })))))));
   }
   setFocusTrap() {
     if (this.dialogElement && !this.trap) {
@@ -33,7 +31,7 @@ export class Modal {
           getShadowRoot: true,
         },
         clickOutsideDeactivates: (e) => {
-          if (e instanceof MouseEvent && e.composedPath()[0] === this.host) {
+          if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {
             return true;
           }
           return false;
@@ -84,8 +82,7 @@ export class Modal {
           "resolved": "\"alert\" | \"alertdialog\" | \"dialog\"",
           "references": {
             "ModalRole": {
-              "location": "import",
-              "path": "@dso-toolkit/sources"
+              "location": "local"
             }
           }
         },
@@ -141,7 +138,8 @@ export class Modal {
           "resolved": "DsoModalCloseEvent",
           "references": {
             "DsoModalCloseEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./modal.interfaces"
             }
           }
         }
@@ -149,4 +147,3 @@ export class Modal {
   }
   static get elementRef() { return "host"; }
 }
-Modal.modalOpenClass = "dso-modal-open";

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

@@ -18,6 +18,6 @@ export class OzonContentNootNode {
     const noteControlsId = `dso-ozon-note-${noteId}`;
     const childNodes = Array.from(node.childNodes);
     const nootNummer = (_b = (_a = childNodes.find((n) => getNodeName(n) === "NootNummer")) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : noteId;
-    return (h(Fragment, null, h("sup", null, h("button", { type: "button", class: "toggle-note", id: noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : setState(undefined), "aria-expanded": openNoteId === noteId ? "true" : "false" }, nootNummer)), h("dso-tooltip", { active: openNoteId === noteId, for: noteControlsId, stateless: true, descriptive: true }, h("span", { role: "section" }, mapNodeToJsx(Array.from(node.querySelectorAll(":scope > Al")))))));
+    return (h(Fragment, null, h("sup", null, h("button", { type: "button", class: "toggle-note", "aria-describedby": noteControlsId, onClick: () => setState === null || setState === void 0 ? void 0 : setState(openNoteId === noteId ? undefined : noteId), onBlur: () => setState === null || setState === void 0 ? void 0 : 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")))))));
   }
 }

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

@@ -21,6 +21,6 @@ export class OzonContentTableNode {
   }
   render(node, context) {
     const { caption, colspecs, headRows, bodyRows } = mapData(node);
-    return (h("dso-table", null, h("table", { class: "table" }, caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context }))))));
+    return (h("dso-table", null, h("table", { class: "table dso-table-vertical-lines" }, caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context }))))));
   }
 }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -61,7 +61,7 @@ export class Progressindicator {
           "text": ""
         },
         "attribute": "size",
-        "reflect": false
+        "reflect": true
       },
       "block": {
         "type": "boolean",

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

@@ -1,6 +1,5 @@
 :host {
   display: block;
-  padding: 0 0 0 32px;
   position: relative;
 }
 :host .dso-selectable-options {
@@ -147,4 +146,22 @@
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+.dso-selectable-input-wrapper {
+  display: inline-block;
+  padding-left: 32px;
+}
+.dso-selectable-input-wrapper:focus-within {
+  border-radius: 2px;
+  outline-offset: 3px;
+  outline: 3px solid #008ccc;
+}
+.dso-selectable-input-wrapper input[type=radio]:focus + label::before,
+.dso-selectable-input-wrapper input[type=checkbox]:focus + label::before {
+  box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
+  height: 20px;
+  left: 2px;
+  top: 2px;
+  width: 20px;
 }

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

@@ -0,0 +1 @@
+export {};

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

@@ -41,7 +41,7 @@ export class Selectable {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null)), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
+    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
   }
   getIdentifier() {
     var _a;
@@ -271,7 +271,8 @@ export class Selectable {
           "resolved": "SelectableChangeEvent",
           "references": {
             "SelectableChangeEvent": {
-              "location": "local"
+              "location": "import",
+              "path": "./selectable.interfaces"
             }
           }
         }

package/dist/collection/components/table/table.css

@@ -11,6 +11,9 @@
   margin-bottom: 24px;
 }
 
+.dso-header {
+  min-height: 32px;
+}
 .dso-header h2 {
   color: #275937;
   font-size: 1.5rem;
@@ -21,12 +24,25 @@
 }
 
 :host .dso-modal {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 530;
   inset: 0px;
   height: 100%;
   position: fixed;
   z-index: 530;
 }
 :host .dso-modal .dso-dialog {
+  animation: 1s ease-out 0s 1 slideInFromTop;
+  margin-top: 15vh;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 640px;
+  opacity: 1;
   background-color: #fff;
   box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
 }
@@ -88,23 +104,24 @@
   padding: 0 32px 32px;
   text-align: right;
 }
-@media screen and (min-width: 768px) {
-  :host .dso-modal {
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 530;
+@media screen and (max-width: 767px) {
+  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+    margin-left: 0;
   }
-  :host .dso-modal .dso-dialog {
-    animation: 1s ease-out 0s 1 slideInFromTop;
-    margin: auto;
-    margin-top: 15vh;
-    max-width: 640px;
-    opacity: 1;
+  :host .dso-modal .dso-footer button {
+    text-align: center;
+    width: 100%;
+  }
+  :host .dso-modal .dso-footer button + button {
+    margin-top: 8px;
+  }
+  :host .dso-modal .dso-footer button.dso-tertiary,
+:host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
+:host .dso-modal .dso-footer button.btn-link span {
+    float: none;
   }
+}
+@media screen and (min-width: 768px) {
   :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {
     margin-left: 16px;
   }
@@ -113,8 +130,9 @@
   }
 }
 @media screen and (max-width: 767px) {
-  :host .dso-modal {
+  :host .dso-modal .dso-dialog {
     max-width: 100%;
+    margin-top: 0;
   }
   :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
@@ -134,8 +152,12 @@
 }
 
 .dso-modal .dso-dialog.dso-table-dialog {
+  margin-top: 1rem;
   max-width: calc(100% - 2rem);
 }
+.dso-modal .dso-dialog.dso-table-dialog .dso-body {
+  max-height: calc(100vh - 112px - 1.5em - 2rem);
+}
 @media screen and (max-width: 767px) {
   .dso-modal .dso-dialog.dso-table-dialog {
     max-width: 100%;
@@ -276,6 +298,17 @@
   border: 0;
 }
 
+.dso-modal-overlay {
+  background-color: rgba(255, 255, 255, 0.8);
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 529;
+}
+
 .dso-table-placeholder {
   box-shadow: inset 0 0 0 1px #ccc;
   display: grid;

package/dist/collection/components/table/table.js

@@ -30,16 +30,14 @@ export class Table {
   render() {
     var _a, _b;
     const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-    return (h(Host, null, this.modalActive && this.placeholderHeight && (h("div", { class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), h("div", { class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" }))))), this.modalActive && (h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))), h("div", { class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", null))))));
+    return (h(Host, null, this.modalActive && this.placeholderHeight && (h("div", { class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { class: "dso-modal-overlay" }), h("div", { class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { class: "dso-responsive-message" }, h("span", null, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", null, "vergroten"), h("dso-icon", { icon: "external-link" }))))), this.modalActive && (h("div", { class: "dso-header" }, h("h2", { id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))), h("div", { class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", null))))));
   }
   openModal() {
     this.placeholderHeight = this.host.clientHeight;
-    document.body.classList.add("dso-modal-open");
     this.modalActive = true;
   }
   closeModal() {
     this.placeholderHeight = undefined;
-    document.body.classList.remove("dso-modal-open", "dso-modal-open");
     this.modalActive = false;
   }
   setFocusTrap() {
@@ -99,7 +97,7 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Prevents the table being   opened in a modal."
+          "text": "Prevents the table being opened in a modal."
         },
         "attribute": "no-modal",
         "reflect": true,

package/dist/collection/components/toggletip/toggletip.js

@@ -35,7 +35,7 @@ export class Toggletip {
     this.secondary = undefined;
   }
   render() {
-    return (h(Fragment, null, h("dso-info-button", { id: "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { stateless: true, descriptive: true, for: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
+    return (h(Fragment, null, h("dso-info-button", { "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { stateless: true, descriptive: true, id: "toggle", active: this.active, position: this.position, small: this.small }, h("slot", null))));
   }
   static get is() { return "dso-toggletip"; }
   static get encapsulation() { return "shadow"; }

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

@@ -34,7 +34,6 @@ export class Tooltip {
     this.descriptive = false;
     this.position = "top";
     this.strategy = "auto";
-    this.for = undefined;
     this.noArrow = false;
     this.stateless = undefined;
     this.small = undefined;
@@ -124,7 +123,10 @@ export class Tooltip {
     if (!(tooltip instanceof HTMLElement)) {
       throw new Error("tooltip element is not instanceof HTMLElement");
     }
-    this.target = this.getTarget();
+    if (!this.element.id) {
+      throw new Error("Unable to find reference tooltip has no [id] attribute.");
+    }
+    this.target = this.getTarget(this.element.id);
     this.popper = createPopper(this.target, tooltip, {
       placement: this.position,
       modifiers: [maxSize, this.applyMaxSize],
@@ -160,28 +162,18 @@ export class Tooltip {
     }
   }
   render() {
-    return (h(Host, { class: { hidden: this.hidden } }, h("div", { class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", null)))));
+    return (h(Host, { class: { hidden: this.hidden }, role: "tooltip" }, h("div", { class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", null)))));
   }
-  getTarget() {
-    if (this.for instanceof HTMLElement) {
-      return this.for;
+  getTarget(id) {
+    const rootNode = this.element.getRootNode();
+    if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+      throw new Error(`rootNode is not instance of Document or ShadowRoot`);
     }
-    if (typeof this.for === "string") {
-      const rootNode = this.element.getRootNode();
-      if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
-        throw new Error(`rootNode is not instance of Document or ShadowRoot`);
-      }
-      const reference = rootNode.getElementById(this.for);
-      if (!reference) {
-        throw new Error(`Unable to find reference with id ${this.for}`);
-      }
-      return reference;
+    const reference = rootNode.querySelector(`[aria-describedBy="${id}`);
+    if (!reference) {
+      throw new Error(`Unable to find reference with aria-describedby ${id}`);
     }
-    const { parentElement } = this.element;
-    if (!parentElement) {
-      throw new Error("No reference given with [for] attribute but no parent found either");
-    }
-    return parentElement;
+    return reference;
   }
   static get is() { return "dso-tooltip"; }
   static get encapsulation() { return "shadow"; }
@@ -251,27 +243,6 @@ export class Tooltip {
         "reflect": false,
         "defaultValue": "\"auto\""
       },
-      "for": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | HTMLElement",
-          "resolved": "HTMLElement | string | undefined",
-          "references": {
-            "HTMLElement": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Specify target element that the tooltip will describe and listens to for events.\r\n* `undefined`: The direct parent is used.\r\n* `string`: The element is located using `document.getElementById()`\r\n* `HTMLElement`: Pass the target element directly\r\nIf the element is not found an Error is thrown."
-        },
-        "attribute": "for",
-        "reflect": false
-      },
       "noArrow": {
         "type": "boolean",
         "mutable": false,