@dso-toolkit/core 62.26.0 → 62.27.0

package/dist/collection/components/alert/alert.js

@@ -4,13 +4,14 @@ export class Alert {
     constructor() {
         this.status = undefined;
         this.roleAlert = undefined;
+        this.compact = undefined;
     }
     render() {
         const status = Alert.statusMap.get(this.status);
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: '01e29736f5e523a65eb9f36e6958c5c5fed5dc5b', class: clsx("alert", `alert-${this.status}`), role: this.roleAlert ? "alert" : undefined }, h("dso-icon", { key: 'dc160d1ab1c32ce9007a05c4304a9ced3dc85a19', icon: "status-" + this.status }), h("span", { key: '26d986b2d19d17984353cf853c71e148201590eb', class: "sr-only" }, status, ":"), h("slot", { key: '2b468fc1267d5d485dea09eac739d333286229bc' })));
+        return (h("div", { key: '417e26be9e6ff6536cc8c2afb9ce0122f44ecdde', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: 'bfa8f41e437b89708eba82ba1a9607cc6fb006a8', icon: "status-" + this.status }), h("span", { key: '1ed463e8789085f4dce8e2ce47540f3e171760b3', class: "sr-only" }, status, ":"), h("slot", { key: '9892c04178c20fafea1969feb551fc4917e1b915' })));
     }
     static get is() { return "dso-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -59,6 +60,23 @@ export class Alert {
                 },
                 "attribute": "role-alert",
                 "reflect": false
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show alert as compact variant (without icon)"
+                },
+                "attribute": "compact",
+                "reflect": true
             }
         };
     }

package/dist/collection/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,KAAK;;;;;IAoBhB,MAAM;QACJ,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YAC3F,iEAAU,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAa;YACpD,6DAAM,KAAK,EAAC,SAAS;gBAAE,MAAM;oBAAS;YACtC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AApBc,eAAS,GAAG,IAAI,GAAG,CAAiB;IACjD,CAAC,SAAS,EAAE,QAAQ,CAAC;IACrB,CAAC,MAAM,EAAE,WAAW,CAAC;IACrB,CAAC,SAAS,EAAE,cAAc,CAAC;IAC3B,CAAC,OAAO,EAAE,MAAM,CAAC;CAClB,CAAC,AALsB,CAKrB","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div class={clsx(\"alert\", `alert-${this.status}`)} role={this.roleAlert ? \"alert\" : undefined}>\r\n        <dso-icon icon={\"status-\" + this.status}></dso-icon>\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,KAAK;;;;;;IA0BhB,MAAM;QACJ,MAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,MAAM,IAAI,KAAK,CAAC,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;QAED,OAAO,CACL,4DACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,iEAAU,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,GAAa;YACtE,6DAAM,KAAK,EAAC,SAAS;gBAAE,MAAM;oBAAS;YACtC,8DAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvBc,eAAS,GAAG,IAAI,GAAG,CAAiB;IACjD,CAAC,SAAS,EAAE,QAAQ,CAAC;IACrB,CAAC,MAAM,EAAE,WAAW,CAAC;IACrB,CAAC,SAAS,EAAE,cAAc,CAAC;IAC3B,CAAC,OAAO,EAAE,MAAM,CAAC;CAClB,CAAC,AALsB,CAKrB","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  private static statusMap = new Map<string, string>([\r\n    [\"success\", \"Gelukt\"],\r\n    [\"info\", \"Opmerking\"],\r\n    [\"warning\", \"Waarschuwing\"],\r\n    [\"error\", \"Fout\"],\r\n  ]);\r\n\r\n  render() {\r\n    const status = Alert.statusMap.get(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon icon={\"status-\" + this.status}></dso-icon>}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -481,7 +481,8 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,

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

@@ -26,7 +26,8 @@
   font-size: 0.875em;
   line-height: 1;
   min-inline-size: 1.5rem;
-  padding: 4px 8px;
+  padding-block: 4px;
+  padding-inline: 8px;
   text-align: center;
 }
 .dso-badge {

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.interfaces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.interfaces.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type BadgeStatus = \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n"]}

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

@@ -5,7 +5,7 @@ export class Badge {
         this.status = undefined;
     }
     render() {
-        return (h("span", { key: '8ae2d297040799c18e286b084ed761d3538c23f3', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '08748c51706389028be923917aad1133542cf04b' })));
+        return (h("span", { key: '915074c0cc5bbbc08128dfd4a421c6bcde03b28c', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '9c2de7dabf46af1b6619dc36e8022322c1e59803' })));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -25,9 +25,15 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\"",
+                    "original": "BadgeStatus",
                     "resolved": "\"attention\" | \"danger\" | \"error\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
-                    "references": {}
+                    "references": {
+                        "BadgeStatus": {
+                            "location": "import",
+                            "path": "./badge.interfaces",
+                            "id": "src/components/badge/badge.interfaces.ts::BadgeStatus"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

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

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,KAAK;;;;IAOhB,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;YACvE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,OAAO,KAAK;;;;IAOhB,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;YACvE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { BadgeStatus } from \"./badge.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: BadgeStatus;\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/banner/banner.css

@@ -9,9 +9,11 @@
 }
 
 .dso-banner {
-  padding: 16px 0;
+  padding-block: 16px;
+  padding-inline: 0;
   position: relative;
 }
 .dso-banner.dso-compact {
-  padding: 12px 0;
+  padding-block: 12px;
+  padding-inline: 0;
 }

package/dist/collection/components/date-picker/date-picker.css

@@ -9,7 +9,8 @@
   display: block;
   inline-size: 100%;
   block-size: 40px;
-  padding: 6px 14px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;

package/dist/collection/components/date-picker-legacy/date-picker-legacy.css

@@ -29,7 +29,8 @@
   display: block;
   inline-size: 100%;
   block-size: 40px;
-  padding: 6px 14px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;

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

@@ -481,7 +481,8 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
-  padding: 16px 32px 16px 16px;
+  padding-block: 16px;
+  padding-inline: 16px 32px;
   position: relative;
 }
 :host > button {

package/dist/collection/components/label/label.css

@@ -25,7 +25,8 @@
   display: inline-block;
   line-height: 1.5;
   max-inline-size: 100%;
-  padding: 4px 8px;
+  padding-block: 4px;
+  padding-inline: 8px;
 }
 .dso-label:focus-within, .dso-label.dso-hover {
   text-decoration: line-through;
@@ -98,7 +99,8 @@
   color: #fff;
 }
 .dso-label.dso-compact {
-  padding: 0 8px;
+  padding-block: 0;
+  padding-inline: 8px;
 }
 .dso-label.dso-hover .dso-label-content {
   text-decoration: line-through;

package/dist/collection/components/legend-item/legend-item.css

@@ -64,7 +64,8 @@ button:not([disabled]):active {
 }
 button.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 button.dso-truncate {

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

@@ -62,7 +62,8 @@
 }
 .dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 .dso-tertiary.dso-truncate {
@@ -179,7 +180,8 @@
   border-style: solid;
   border-width: 1px;
   flex-wrap: nowrap;
-  padding: 0 16px;
+  padding-block: 0;
+  padding-inline: 16px;
 }
 @media screen and (max-width: 767px) {
   .dso-button-group > .dso-input-number {
@@ -220,7 +222,8 @@
 .dso-selectable {
   position: relative;
   display: var(--dso-selectable-display, block);
-  padding: 0 0 0 32px;
+  padding-block: 0;
+  padding-inline: 32px 0;
 }
 .dso-selectable label {
   font-weight: 400;
@@ -365,7 +368,8 @@
   border-width: 1px;
   border-style: solid;
   font-weight: 600;
-  padding: 15px 47px 15px 15px;
+  padding-block: 15px;
+  padding-inline: 15px 47px;
   position: relative;
   text-align: start;
   white-space: normal;
@@ -459,7 +463,8 @@
   display: block;
   inline-size: 100%;
   block-size: 40px;
-  padding: 6px 14px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;

package/dist/collection/components/map-controls/map-controls.css

@@ -72,7 +72,8 @@ button::-moz-focus-inner {
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
   font-weight: 600;
   margin-inline-end: 16px;
-  padding: 8px 16px;
+  padding-block: 8px;
+  padding-inline: 16px;
   white-space: nowrap;
   position: absolute;
   inset-inline-end: calc(
@@ -382,7 +383,8 @@ button::-moz-focus-inner {
 }
 .close-button.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 .close-button.dso-truncate {

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

@@ -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,7 +129,8 @@ 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 {
@@ -139,10 +141,12 @@ button::-moz-focus-inner {
   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 {
@@ -153,6 +157,7 @@ button::-moz-focus-inner {
   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,7 +166,8 @@ 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 {
@@ -172,10 +178,12 @@ button::-moz-focus-inner {
   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 {
@@ -190,7 +198,8 @@ button::-moz-focus-inner {
 }
 .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/ozon-content/ozon-content.css

@@ -481,7 +481,8 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,
@@ -724,7 +725,8 @@ th {
 
 table.table td:not(.plain-content) p,
 table.table th p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 table.table td:not(.plain-content) ul,
 table.table td:not(.plain-content) ol,
@@ -740,11 +742,13 @@ table.table th ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
 }
 table.table td:not(.plain-content) pre,
 table.table th pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 table.table td:not(.plain-content) blockquote,
 table.table th blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 table.table td:not(.plain-content) dso-highlight-box,
 table.table td:not(.plain-content) .dso-highlight-box,
@@ -911,7 +915,8 @@ table.table > tfoot > tr > td,
 .dso-rich-content table > tfoot > tr > th,
 .dso-rich-content table > tfoot > tr > td {
   line-height: 1.5;
-  padding: 12px 8px;
+  padding-block: 12px;
+  padding-inline: 8px;
   vertical-align: top;
 }
 table.table > thead > tr > th a,
@@ -1204,7 +1209,8 @@ button.toggle-note:not([disabled]):active {
 }
 button.toggle-note.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 button.toggle-note.dso-truncate {
@@ -1565,7 +1571,8 @@ del.editaction-remove p:last-child {
 }
 
 .dso-rich-content p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-rich-content ul,
 .dso-rich-content ol {
@@ -1576,10 +1583,12 @@ del.editaction-remove p:last-child {
   padding-inline-start: 24px;
 }
 .dso-rich-content pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 .dso-rich-content blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 .dso-rich-content dso-highlight-box,
 .dso-rich-content .dso-highlight-box {

package/dist/collection/components/pagination/pagination.css

@@ -29,6 +29,8 @@
   position: relative;
   min-inline-size: 2rem;
   padding: 2px;
+  padding-block: 2px;
+  padding-inline: 2px;
 }
 .pagination > li > a:active,
 .pagination > li > span:active {

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

@@ -31,7 +31,8 @@ span.dso-progress-indicator-label {
 }
 :host([size=small]):host([block]),
 :host(:not([size=medium]):not([size=large])):host([block]) {
-  padding: 12px 16px;
+  padding-block: 12px;
+  padding-inline: 16px;
 }
 
 :host([size=medium]) .dso-progress-indicator-spinner,
@@ -49,5 +50,6 @@ span.dso-progress-indicator-label {
   inline-size: 48px;
 }
 :host([size=large]):host([block]) {
-  padding: 24px 16px;
+  padding-block: 24px;
+  padding-inline: 16px;
 }

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

@@ -481,7 +481,8 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,
@@ -734,6 +735,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   text-align: center;
 }
 :host .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;
@@ -741,7 +743,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
   padding: 32px;
 }
 :host .dso-modal > .dso-dialog > .dso-body p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 :host .dso-modal > .dso-dialog > .dso-body ul,
 :host .dso-modal > .dso-dialog > .dso-body ol {
@@ -752,10 +755,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
   padding-inline-start: 24px;
 }
 :host .dso-modal > .dso-dialog > .dso-body pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 :host .dso-modal > .dso-dialog > .dso-body blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 :host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,
 :host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
@@ -766,6 +771,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   max-inline-size: 100%;
 }
 :host .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;
@@ -774,7 +780,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
   padding: 32px;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
@@ -785,10 +792,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
   padding-inline-start: 24px;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {
-  margin: 0 0 16px;
+  margin-block: 0 16px;
+  margin-inline: 0;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
-  padding: 16px 24px;
+  padding-block: 16px;
+  padding-inline: 24px;
 }
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
@@ -803,7 +812,8 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host .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) {
@@ -857,18 +867,21 @@ a.dso-tertiary, a.dso-tertiary:visited {
     margin-block-end: 8px;
   }
   :host .dso-modal .dso-header {
-    padding: 8px 16px;
+    padding-block: 8px;
+    padding-inline: 16px;
   }
   :host .dso-modal .dso-header .dso-close {
     inset-block-start: 8px;
   }
   :host .dso-modal .dso-body {
-    padding: 16px 24px;
+    padding-block: 16px;
+    padding-inline: 24px;
   }
   :host .dso-modal .dso-footer {
     min-block-size: auto;
     overflow: auto;
-    padding: 8px 32px;
+    padding-block: 8px;
+    padding-inline: 32px;
   }
 }
 

package/dist/collection/components/viewer-grid/viewer-grid.css

@@ -99,7 +99,8 @@ button::-moz-focus-inner {
 .expand.dso-align,
 .overlay-close-button.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 .shrink.dso-truncate,
@@ -885,7 +886,8 @@ button::-moz-focus-inner {
   .dso-navbar .dso-navbar-toggle {
     border-radius: 4px;
     min-inline-size: auto;
-    padding: 5px 0;
+    padding-block: 5px;
+    padding-inline: 0;
   }
   .dso-navbar .dso-navbar-toggle dso-icon,
   .dso-navbar .dso-navbar-toggle svg.di {
@@ -939,7 +941,8 @@ button::-moz-focus-inner {
     font-size: 1.25em;
     line-height: 1;
     margin-block-start: 8px;
-    padding: 8px 16px 7px;
+    padding-block: 8px 7px;
+    padding-inline: 16px;
   }
   .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,
   .dso-nav.dso-nav-main > li > button:hover,
@@ -955,7 +958,8 @@ button::-moz-focus-inner {
     text-decoration: none;
     font-size: 1rem;
     margin-block-start: 4px;
-    padding: 4px 8px 3px;
+    padding-block: 4px 3px;
+    padding-inline: 8px;
   }
   .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,
   .dso-nav.dso-nav-sub > li > button:hover,
@@ -1018,7 +1022,8 @@ button::-moz-focus-inner {
   }
   .dso-tertiary.dso-align {
     line-height: calc(1.5em - 1px);
-    padding: 11px 0;
+    padding-block: 11px;
+    padding-inline: 0;
     position: relative;
   }
   .dso-tertiary.dso-truncate {