@dso-toolkit/core 62.25.0 → 62.26.0

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

@@ -24,10 +24,10 @@ label.dso-primary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #39870c;
@@ -37,8 +37,9 @@ label.dso-primary {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -59,7 +60,7 @@ label.dso-primary.extern::after,
 label.dso-primary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-primary:hover,
 button.dso-primary:hover,
@@ -101,20 +102,20 @@ label.dso-primary.dso-small svg.di,
 label.dso-primary.dso-small.extern::after,
 label.dso-primary.dso-small.download::after,
 label.dso-primary.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 a.dso-primary.dso-small.dso-spinner-left::before,
 button.dso-primary.dso-small.dso-spinner-left::before,
 label.dso-primary.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-primary.dso-small.dso-spinner-right::after,
 button.dso-primary.dso-small.dso-spinner-right::after,
 label.dso-primary.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-primary dso-icon,
 a.dso-primary svg.di,
@@ -122,8 +123,8 @@ button.dso-primary dso-icon,
 button.dso-primary svg.di,
 label.dso-primary dso-icon,
 label.dso-primary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 a.dso-primary span + dso-icon,
 a.dso-primary span + svg.di,
@@ -131,8 +132,8 @@ button.dso-primary span + dso-icon,
 button.dso-primary span + svg.di,
 label.dso-primary span + dso-icon,
 label.dso-primary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
 button.dso-primary.dso-spinner-left[disabled],
@@ -150,10 +151,10 @@ label.dso-primary.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-primary.dso-spinner-right::after,
 button.dso-primary.dso-spinner-right::after,
@@ -162,10 +163,10 @@ label.dso-primary.dso-spinner-right::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-primary.download::after,
 button.dso-primary.download::after,
@@ -173,9 +174,9 @@ label.dso-primary.download::after {
   background: url("./dso-icons.svg#img-download-wit") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
@@ -183,9 +184,9 @@ label.dso-primary.extern::after {
   background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -193,10 +194,10 @@ label.dso-secondary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #fff;
@@ -206,8 +207,9 @@ label.dso-secondary {
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -228,7 +230,7 @@ label.dso-secondary.extern::after,
 label.dso-secondary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary:hover,
 button.dso-secondary:hover,
@@ -270,20 +272,20 @@ label.dso-secondary.dso-small svg.di,
 label.dso-secondary.dso-small.extern::after,
 label.dso-secondary.dso-small.download::after,
 label.dso-secondary.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 a.dso-secondary.dso-small.dso-spinner-left::before,
 button.dso-secondary.dso-small.dso-spinner-left::before,
 label.dso-secondary.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.dso-small.dso-spinner-right::after,
 button.dso-secondary.dso-small.dso-spinner-right::after,
 label.dso-secondary.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary dso-icon,
 a.dso-secondary svg.di,
@@ -291,8 +293,8 @@ button.dso-secondary dso-icon,
 button.dso-secondary svg.di,
 label.dso-secondary dso-icon,
 label.dso-secondary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary span + dso-icon,
 a.dso-secondary span + svg.di,
@@ -300,8 +302,8 @@ button.dso-secondary span + dso-icon,
 button.dso-secondary span + svg.di,
 label.dso-secondary span + dso-icon,
 label.dso-secondary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
 button.dso-secondary.dso-spinner-left[disabled],
@@ -319,10 +321,10 @@ label.dso-secondary.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
@@ -331,16 +333,16 @@ label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
 label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.dso-spinner-right::after,
 button.dso-secondary.dso-spinner-right::after,
@@ -349,10 +351,10 @@ label.dso-secondary.dso-spinner-right::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
@@ -361,16 +363,16 @@ label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
 label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.download::after,
 button.dso-secondary.download::after,
@@ -378,9 +380,9 @@ label.dso-secondary.download::after {
   background: url("./dso-icons.svg#img-download") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
@@ -398,9 +400,9 @@ label.dso-secondary.extern::after {
   background: url("./dso-icons.svg#img-external-link") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
@@ -418,10 +420,10 @@ label.dso-tertiary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   border: 0;
@@ -449,7 +451,7 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary[disabled],
 button.dso-tertiary[disabled],
@@ -485,7 +487,7 @@ label.dso-tertiary.dso-align {
 a.dso-tertiary.dso-truncate,
 button.dso-tertiary.dso-truncate,
 label.dso-tertiary.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -497,10 +499,10 @@ label.dso-tertiary.dso-spinner-left::before {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-right: 8px;
+  inline-size: 24px;
+  margin-inline-end: 8px;
 }
 a.dso-tertiary.dso-spinner-right::after,
 button.dso-tertiary.dso-spinner-right::after,
@@ -509,10 +511,10 @@ label.dso-tertiary.dso-spinner-right::after {
   background-repeat: no-repeat;
   content: "";
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: middle;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary dso-icon + span:not(.sr-only),
 a.dso-tertiary svg.di + span:not(.sr-only),
@@ -526,7 +528,7 @@ label.dso-tertiary dso-icon + span:not(.sr-only),
 label.dso-tertiary svg.di + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + dso-icon,
 label.dso-tertiary span:not(.sr-only) + svg.di {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
@@ -540,7 +542,7 @@ label.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 label.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
 label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -566,7 +568,7 @@ label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
 label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 a.dso-tertiary dso-icon,
 a.dso-tertiary svg.di,
@@ -585,7 +587,7 @@ button.dso-tertiary.download::after,
 label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   position: relative;
-  top: -2px;
+  inset-block-start: -2px;
 }
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
@@ -593,9 +595,9 @@ label.dso-tertiary.download::after {
   background: url("./dso-icons.svg#img-download") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
@@ -615,9 +617,9 @@ label.dso-tertiary.extern::after {
   background: url("./dso-icons.svg#img-external-link") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
@@ -663,7 +665,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 
 @keyframes ModalFadeIn {
@@ -676,11 +678,11 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host {
   display: block;
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 
 .dso-header {
-  min-height: 32px;
+  min-block-size: 32px;
 }
 .dso-header h2 {
   color: #275937;
@@ -696,7 +698,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   padding: 0;
   border: 0;
   inset: 0px;
-  height: 100%;
+  block-size: 100%;
   position: fixed;
   z-index: 530;
 }
@@ -743,7 +745,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host .dso-modal > .dso-dialog > .dso-body ul,
 :host .dso-modal > .dso-dialog > .dso-body ol {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 :host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
 :host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
@@ -757,11 +759,11 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,
 :host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 :host .dso-modal > .dso-dialog > .dso-body img {
-  height: auto;
-  max-width: 100%;
+  block-size: auto;
+  max-inline-size: 100%;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable {
   block-size: calc(100% - 96px - 1.5rem);
@@ -776,7 +778,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
-  margin-bottom: 16px;
+  margin-block-end: 16px;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
@@ -790,11 +792,11 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
-  height: auto;
-  max-width: 100%;
+  block-size: auto;
+  max-inline-size: 100%;
 }
 :host .dso-modal .dso-body:focus-visible {
   outline: none;
@@ -871,58 +873,58 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 
 .dso-modal .dso-dialog.dso-table-dialog {
-  margin-top: 1rem;
-  max-width: calc(100% - 2rem);
-  margin-left: auto;
-  margin-right: auto;
+  margin-block-start: 1rem;
+  max-inline-size: calc(100% - 2rem);
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   inline-size: auto;
 }
 .dso-modal .dso-dialog.dso-table-dialog .dso-body {
-  max-height: calc(100vh - 112px - 1.5em - 2rem);
+  max-block-size: calc(100vh - 112px - 1.5em - 2rem);
 }
 @media screen and (max-width: 767px) {
   .dso-modal .dso-dialog.dso-table-dialog {
-    max-width: 100%;
+    max-inline-size: 100%;
   }
 }
 
 :host([is-responsive]) .dso-table-body {
   border: 1px solid #ccc;
-  margin-bottom: 0;
+  margin-block-end: 0;
   overflow-y: auto;
-  width: 100%;
+  inline-size: 100%;
 }
 :host([is-responsive]) .dso-table-body.dso-body {
-  width: calc(100% - 64px);
+  inline-size: calc(100% - 64px);
 }
 
 .dso-table-utilities {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 .dso-table-utilities .dso-responsive-message {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .dso-table-utilities .dso-responsive-message:only-child {
-  width: 100%;
+  inline-size: 100%;
 }
 .dso-table-utilities .open-modal-button:only-child {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .dso-responsive-message {
   font-size: 0.8em;
-  margin-bottom: 8px;
+  margin-block-end: 8px;
   position: relative;
   text-align: center;
 }
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -932,12 +934,9 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 .dso-modal-overlay {
   background-color: rgba(255, 255, 255, 0.8);
-  bottom: 0;
   display: block;
-  left: 0;
   position: fixed;
-  right: 0;
-  top: 0;
+  inset: 0;
   z-index: 529;
 }
 

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

@@ -30,7 +30,7 @@ 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, { key: 'b629c1e25c4d60aa60df91f1853994583c2f2d07' }, this.modalActive && this.placeholderHeight && (h("div", { key: '4e7442a495c7be75cb3bb5370134c1101f02aee2', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'f33754de281a49d8130a5e6dd11d416a167ba920', class: "dso-modal-overlay" }), h("div", { key: 'ffbf7075107a77dc3647a69fe599f37e6bc419cc', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'a94cd512f42be3b1051164d451b552a7bcfeedc3', 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", { key: '139e9caf1f0c8c755ec7803b5259a3e06468c3ac', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'cac3717161b89afe97ad1059040654b0cf48e436', class: "dso-responsive-message" }, h("span", { key: '06390037b80f1351407fb07e761f563ed2edebc1' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '32a6a1ddfd6ea7a05ec6e97d582fdc2a4c99ae79', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'eae2830da62a081b82b4ef51d49adb92da2bf5bb', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '7bc7f04268324863e5d6712d4ffab4c6a46b08dc' }, "vergroten"), h("dso-icon", { key: '04fea1be6bd15d834decf67ffa40ea165d1a7f7b', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'fb55b553daea04a348736fd01ff5d5f85d0723c0', class: "dso-header" }, h("h2", { key: '7943854e13ee199057a599544473c7af2734be1e', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '637d2d54a71d80ea703ecc68df033f6f4eb045d8', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'c52e6f3dc6c0e29672ecc8589382897c2f540cb4', icon: "times" }), h("span", { key: '1df50db1609abe3fc64da59b8c24caeb161bea15', class: "sr-only" }, "Sluiten")))), h("div", { key: '6f2b09f672600b36d1e4a13055c11e7083f611ef', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'bca7497b58cf07b16a22dd1c488650d19ac4aa41' }))))));
+        return (h(Host, { key: '47b713a2c58af6bd707ff5ab9909da6d1c17251a' }, this.modalActive && this.placeholderHeight && (h("div", { key: '3dd0dd88f42ec75724dafe4d23187ac04d3c9758', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '81fd41c91768e881f8c41f8e6c89d3817d76b3e5', class: "dso-modal-overlay" }), h("div", { key: '9ff2c3857e6ca4d3420839cdfd562baeca6c2fd4', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: 'a72a844726a362e40c9fbd4c53ce26391b76d791', 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", { key: '4fa8bcb1652ee196a094f79c641c710d928b18ad', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'e3bd69874b8b5e8addc6f3ca7877468dc406442a', class: "dso-responsive-message" }, h("span", { key: '084c331041acbdec4c24eb9bc7d26887abbb5dff' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '4cf3360b00d14b3a17b31c91cc1b1336100929dd', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'c896c02f1623facba35534df64f90cddd191a5f4', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '3947a9657e48d61f6fb9379750c2ac600c95384d' }, "vergroten"), h("dso-icon", { key: '6b944376b7cc85caf0eb5d481267f7a3ec318972', icon: "external-link" }))))), this.modalActive && (h("div", { key: '7df89d56c9f7109889869f312b9b55a05f98d8d3', class: "dso-header" }, h("h2", { key: 'b51ac04853d121ab258018bfb123d28bb135bd5b', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: 'bb3abc975406aefc0f383ce2343c1ea6687902c2', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '02ad3aca070432470375090648f6a97d216b1ae0', icon: "times" }), h("span", { key: 'a826e532598d27788718665cff2d62d7d2ebd14d', class: "sr-only" }, "Sluiten")))), h("div", { key: '2081a4c492e2f9b5b88db15ea19bd45a0fd6290e', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '0faf74a2a362acd370f14f9cc28a261581e19318' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

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", { key: '98f0254a5ec612596ac32d0f4a5dcde1ce69ff2e', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: 'c1ce14c551312bca9ef753d7b83c683b62c2ae58', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: '6c4cb2adea2902aa49efc686d7418907f10fe5e3' }))));
+        return (h(Fragment, null, h("dso-info-button", { key: 'aee3bb9158762c143652aaa755dd98f13084137b', "aria-describedby": "toggle", onClick: this.click, label: this.label, active: this.active, secondary: this.secondary, ref: (element) => (this.infoButton = element) }), h("dso-tooltip", { key: '79e76c5a50bf68b4760e4715f915f331fdfa3441', stateless: true, descriptive: true, id: "toggle", strategy: "absolute", active: this.active, position: this.position, small: this.small }, h("slot", { key: 'e0daa7695dc20946ed362016a25241489012fbef' }))));
     }
     static get is() { return "dso-toggletip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.css

@@ -14,7 +14,6 @@
   font-weight: 400;
   line-height: 1.5;
   line-break: auto;
-  text-align: left;
   text-align: start;
   text-decoration: none;
   text-shadow: none;
@@ -42,19 +41,19 @@
   color: #191919;
   display: inline-block;
   font-size: 1rem;
-  max-width: 640px;
+  max-inline-size: 640px;
   padding-block: 8px;
   padding-inline: 16px;
   position: relative;
 }
 .tooltip .tooltip-inner.dso-small {
-  max-width: 320px;
+  max-inline-size: 320px;
 }
 .tooltip .tooltip-arrow {
   border-color: transparent;
   border-style: solid;
-  height: 0;
-  width: 0;
+  block-size: 0;
+  inline-size: 0;
 }
 .tooltip[data-popper-placement=top] {
   margin-block-start: -3px;
@@ -62,7 +61,7 @@
   padding-inline: 0;
 }
 .tooltip[data-popper-placement=top] .tooltip-arrow {
-  bottom: 0;
+  inset-block-end: 0;
   border-block-start-color: #fff;
   border-width: 6px;
   border-block-end-width: 0;
@@ -74,7 +73,7 @@
   padding-inline: 6px;
 }
 .tooltip[data-popper-placement=right] .tooltip-arrow {
-  left: 0;
+  inset-inline-start: 0;
   border-inline-end-color: #fff;
   border-width: 6px;
   border-inline-start-width: 0;
@@ -86,7 +85,7 @@
   padding-inline: 0;
 }
 .tooltip[data-popper-placement=bottom] .tooltip-arrow {
-  top: 0;
+  inset-block-start: 0;
   border-block-end-color: #fff;
   border-width: 6px;
   border-block-start-width: 0;
@@ -99,7 +98,7 @@
   padding-inline: 6px;
 }
 .tooltip[data-popper-placement=left] .tooltip-arrow {
-  right: 0;
+  inset-inline-end: 0;
   border-inline-start-color: #fff;
   border-width: 6px;
   border-inline-end-width: 0;