@dso-toolkit/core 62.25.0 → 62.27.0

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

@@ -55,8 +55,8 @@
 }
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -121,6 +121,7 @@ button::-moz-focus-inner {
   text-align: center;
 }
 .dso-modal > .dso-dialog > .dso-body {
+  /* stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline */
   block-size: calc(100% - 96px - 1.5rem);
   max-block-size: calc(70vh - 144px - 1.5em);
   min-block-size: 1.5rem;
@@ -128,31 +129,35 @@ button::-moz-focus-inner {
   padding: 32px;
 }
 .dso-modal > .dso-dialog > .dso-body p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-modal > .dso-dialog > .dso-body ul,
 .dso-modal > .dso-dialog > .dso-body ol {
-  margin-bottom: 16px;
+  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 pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-modal > .dso-dialog > .dso-body blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 .dso-modal > .dso-dialog > .dso-body dso-highlight-box,
 .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 .dso-modal > .dso-dialog > .dso-body img {
-  height: auto;
-  max-width: 100%;
+  block-size: auto;
+  max-inline-size: 100%;
 }
 .dso-modal > .dso-dialog > dso-scrollable {
+  /* stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline */
   block-size: calc(100% - 96px - 1.5rem);
   max-block-size: calc(70vh - 144px - 1.5em);
   min-block-size: 6.5rem;
@@ -161,36 +166,40 @@ button::-moz-focus-inner {
   padding: 32px;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
 .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
-  margin-bottom: 16px;
+  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 pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
 .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
-  margin-bottom: 24px;
+  margin-block-end: 24px;
 }
 .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
-  height: auto;
-  max-width: 100%;
+  block-size: auto;
+  max-inline-size: 100%;
 }
 .dso-modal .dso-body:focus-visible {
   outline: none;
 }
 .dso-modal .dso-footer {
   min-block-size: 80px;
-  padding: 16px 32px;
+  padding-block: 16px;
+  padding-inline: 32px;
   text-align: end;
 }
 @media screen and (max-width: 767px) {
@@ -244,18 +253,21 @@ button::-moz-focus-inner {
     margin-block-end: 8px;
   }
   .dso-modal .dso-header {
-    padding: 8px 16px;
+    padding-block: 8px;
+    padding-inline: 16px;
   }
   .dso-modal .dso-header .dso-close {
     inset-block-start: 8px;
   }
   .dso-modal .dso-body {
-    padding: 16px 24px;
+    padding-block: 16px;
+    padding-inline: 24px;
   }
   .dso-modal .dso-footer {
     min-block-size: auto;
     overflow: auto;
-    padding: 8px 32px;
+    padding-block: 8px;
+    padding-inline: 32px;
   }
 }
 

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

@@ -33,10 +33,10 @@ export class Modal {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '105a90e070e128bc42e652e71e2d65d7075c3b22', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '9d9172de470f4cd41bcc9120284796f61eb2e108', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '62928005e012b28a4bb3292577d338a19564d900', class: "dso-dialog", role: "document" }, 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("dso-scrollable", { key: 'a3b8ca827f4f810111748c8afce16376a2855ea2' }, h("div", { key: 'e1b8da8b7f989fb9218225717b42a442ccdbba68', class: "dso-body", tabIndex: 0 }, h("slot", { key: '75d7237cd6361428ee1a8fde43297105c13a5a70', name: "body" }))), this.hasFooter && (h("div", { key: 'ccba551213f760dc116181a15c5d14ccc4e69b55', class: "dso-footer" }, h("slot", { key: '723581c8230a74655480866e0cb319c0e3f40215', name: "footer" }))))));
+            } }, h("div", { key: '8b55f0d93087079ae9553ed923f8a91d6263f106', class: "dso-dialog", role: "document" }, 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("dso-scrollable", { key: '67237cd6b47ad31bb1c3b9ef0ff7ed857a2dab3e' }, h("div", { key: '9fab8506d664740d1e8201339064d12cae1513bf', class: "dso-body", tabIndex: 0 }, h("slot", { key: '36f25fee6e2ef67c5263c5b71d14207a566e835c', name: "body" }))), this.hasFooter && (h("div", { key: '279afafbbd24f6c285f7d85b755a4ec41ecd43d1', class: "dso-footer" }, h("slot", { key: '0a894d9bb649768c53f99bd4569df9dc0db0aef3', name: "footer" }))))));
     }
     static get is() { return "dso-modal"; }
     static get encapsulation() { return "shadow"; }