@dso-toolkit/core 62.25.0 → 62.27.0

package/dist/collection/components/header/header.css

@@ -3,7 +3,7 @@
 }
 
 .dso-header {
-  border-bottom: 1px solid #ccc;
+  border-block-end: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
   position: relative;
@@ -25,14 +25,14 @@
 .logo-container {
   flex: 1 1 12.5rem;
   margin-inline-end: 24px;
-  padding-bottom: 16px;
-  padding-top: 16px;
+  padding-block-end: 16px;
+  padding-block-start: 16px;
 }
 
 .dso-header-session {
   display: flex;
   align-items: center;
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .dso-header-session .profile .dso-tertiary,
 .dso-header-session .login .dso-tertiary,
@@ -44,13 +44,13 @@
   line-height: 1.5;
 }
 .dso-header-session .profile {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 .dso-header-session .profile + .logout,
 .dso-header-session .profile ~ .help {
-  border-left: 3px solid #ccc;
-  margin-left: 8px;
-  padding-left: 8px;
+  border-inline-start: 3px solid #ccc;
+  margin-inline-start: 8px;
+  padding-inline-start: 8px;
 }
 .dso-header-session .help a,
 .dso-header-session .help button {
@@ -61,7 +61,7 @@
   flex-basis: 100%;
 }
 .dso-navbar .dso-dropdown-options {
-  border-top: 1px solid #ccc;
+  border-block-start: 1px solid #ccc;
 }
 
 dso-dropdown-menu button {
@@ -70,7 +70,7 @@ dso-dropdown-menu button {
   border: 0;
   display: flex;
   font-family: Asap, sans-serif;
-  padding-right: 32px;
+  padding-inline-end: 32px;
 }
 dso-dropdown-menu .dso-dropdown-options {
   border: 0;
@@ -78,12 +78,12 @@ dso-dropdown-menu .dso-dropdown-options {
 }
 @media screen and (min-width: 768px) {
   dso-dropdown-menu .dso-dropdown-options {
-    width: 375px;
+    inline-size: 375px;
   }
 }
 @media screen and (max-width: 767px) {
   dso-dropdown-menu .dso-dropdown-options {
-    width: 100%;
+    inline-size: 100%;
   }
 }
 dso-dropdown-menu .dso-dropdown-options ul li a,
@@ -107,11 +107,11 @@ dso-dropdown-menu .dso-dropdown-options ul li.dso-active a {
   font-weight: 600;
 }
 dso-dropdown-menu .dso-dropdown-options ul li + li {
-  border-top: 1px solid #ccc;
+  border-block-start: 1px solid #ccc;
 }
 
 .dropdown {
-  margin-left: auto;
+  margin-inline-start: auto;
   display: flex;
   align-items: center;
 }
@@ -119,8 +119,8 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   position: static;
 }
 .dropdown dso-dropdown-menu .dso-dropdown-options {
-  right: 0;
-  top: 100%;
+  inset-inline-end: 0;
+  inset-block-start: 100%;
 }
 .dropdown dso-dropdown-menu > button {
   color: #39870c;
@@ -130,10 +130,10 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   position: relative;
 }
 .dropdown dso-dropdown-menu > button::after {
-  margin-left: 8px;
+  margin-inline-start: 8px;
   position: absolute;
-  right: 0px;
-  top: 50%;
+  inset-inline-end: 0px;
+  inset-block-start: 50%;
   transform: translateY(-50%);
 }
 .dropdown dso-dropdown-menu > button:hover, .dropdown dso-dropdown-menu > button:active {
@@ -146,12 +146,12 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   column-gap: 32px;
   display: flex;
   list-style: none;
-  margin-bottom: 0;
-  margin-top: 0;
-  padding-left: 0;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  padding-inline-start: 0;
 }
 .dso-nav > li {
-  margin-bottom: 4px;
+  margin-block-end: 4px;
 }
 .dso-nav > li > a {
   display: block;
@@ -160,10 +160,10 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   color: #275937;
 }
 .dso-nav > li.dso-active, .dso-nav > li.is-active {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 .dso-nav > li.dso-active > a, .dso-nav > li.is-active > a {
-  border-bottom: 4px solid #8b4a6a;
+  border-block-end: 4px solid #8b4a6a;
   font-weight: bold;
 }
 .dso-nav.dso-nav-main {
@@ -173,44 +173,46 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   text-decoration: none;
   font-size: 1.25em;
   line-height: 1;
-  margin-top: 8px;
-  padding: 16px 0;
+  margin-block-start: 8px;
+  padding-block: 16px;
+  padding-inline: 0;
   white-space: nowrap;
 }
 .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 {
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
-  left: -1rem !important;
-  top: 3px !important;
+  inset-inline-start: -1rem !important;
+  inset-block-start: 3px !important;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button {
   font-size: 1.25em;
   line-height: 1;
-  margin-top: 8px;
-  padding: 16px 0;
+  margin-block-start: 8px;
+  padding-block: 16px;
+  padding-inline: 0;
   align-items: center;
   color: #275937;
-  padding-right: 32px;
+  padding-inline-end: 32px;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button:hover, .dso-nav.dso-nav-main dso-dropdown-menu button:active {
   cursor: pointer;
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button::after {
-  margin-left: 8px;
+  margin-inline-start: 8px;
   position: absolute;
-  right: 0px;
-  top: auto;
+  inset-inline-end: 0px;
+  inset-block-start: auto;
   transform: none;
 }
 .dso-nav .menu-user-home {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .dso-nav .menu-user-home dso-icon {
-  height: 1em;
-  margin-right: 8px;
+  block-size: 1em;
+  margin-inline-end: 8px;
   position: relative;
-  top: -2px;
-  width: 1.2em;
+  inset-block-start: -2px;
+  inline-size: 1.2em;
 }

package/dist/collection/components/helpcenter-panel/helpcenter-panel.css

@@ -4,8 +4,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -14,12 +14,12 @@
 }
 
 .wrapper {
-  height: 100%;
-  left: 0;
+  block-size: 100%;
+  inset-inline-start: 0;
   position: fixed;
-  top: 0;
+  inset-block-start: 0;
   visibility: hidden;
-  width: 100%;
+  inline-size: 100%;
 }
 .wrapper.visible {
   visibility: visible;
@@ -27,19 +27,19 @@
 
 .dimscreen {
   background-color: #000;
-  height: 100%;
+  block-size: 100%;
   opacity: 0.4;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .open-button {
   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;
@@ -49,13 +49,14 @@
   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;
   border: 0;
-  bottom: 16px;
+  inset-block-end: 16px;
   font-family: Asap, sans-serif;
   position: fixed;
-  right: 16px;
+  inset-inline-end: 16px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
 .open-button:focus, .open-button:focus-visible {
@@ -84,26 +85,26 @@
 }
 .open-button.dso-small dso-icon,
 .open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .open-button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .open-button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .open-button dso-icon,
 .open-button svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 .open-button span + dso-icon,
 .open-button span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 .open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {
   background-color: #39870c;
@@ -115,20 +116,20 @@
   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;
 }
 .open-button.dso-spinner-right::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   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;
 }
 .open-button:hover {
   cursor: pointer;
@@ -141,10 +142,10 @@
   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;
@@ -154,18 +155,19 @@
   border-style: solid;
   border-radius: 4px;
   line-height: 1.5;
-  min-width: 56px;
-  padding: 11px 15px;
-  border-right: 0;
-  border-top: 0;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+  border-inline-end: 0;
+  border-block-start: 0;
   border-radius: 0 0 0 8px;
-  height: 40px;
-  min-width: 40px;
+  block-size: 40px;
+  min-inline-size: 40px;
   padding: 0;
   position: fixed;
-  right: 0;
-  width: 40px;
-  top: 0;
+  inset-inline-end: 0;
+  inline-size: 40px;
+  inset-block-start: 0;
 }
 .close-button:focus, .close-button:focus-visible {
   outline-offset: 2px;
@@ -193,26 +195,26 @@
 }
 .close-button.dso-small dso-icon,
 .close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .close-button.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close-button.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close-button dso-icon,
 .close-button svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 .close-button span + dso-icon,
 .close-button span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 .close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {
   background-color: #fff;
@@ -224,55 +226,55 @@
   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;
 }
 .close-button.dso-spinner-left:not([disabled]):hover::before {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   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;
 }
 .close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close-button.dso-spinner-right::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   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;
 }
 .close-button.dso-spinner-right:not([disabled]):hover::after {
   background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
   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;
 }
 .close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close-button dso-icon {
-  margin-left: 0;
-  margin-right: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
   position: absolute;
-  left: 50%;
-  top: 50%;
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
   transform: translate(-50%, -50%);
 }
 .close-button:hover, .close-button:active, .close-button:focus {
@@ -285,37 +287,37 @@
 .iframe-container {
   background-color: #fff;
   border: 0;
-  border-left: 1px solid #ccc;
+  border-inline-start: 1px solid #ccc;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);
-  height: 100%;
+  block-size: 100%;
   position: absolute;
-  top: 0;
-  transition: right 0.5s;
+  inset-block-start: 0;
+  transition: inset-inline-end 0.5s;
 }
 @media screen and (max-width: 480px) {
   .iframe-container {
-    right: -320px;
-    width: 320px;
+    inset-inline-end: -320px;
+    inline-size: 320px;
   }
 }
 @media screen and (min-width: 481px) and (max-width: 767px) {
   .iframe-container {
-    right: -480px;
-    width: 480px;
+    inset-inline-end: -480px;
+    inline-size: 480px;
   }
 }
 @media screen and (min-width: 768px) {
   .iframe-container {
-    right: -640px;
-    width: 640px;
+    inset-inline-end: -640px;
+    inline-size: 640px;
   }
 }
 .iframe-container.open {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 iframe {
   border: 0;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }

package/dist/collection/components/helpcenter-panel/helpcenter-panel.js

@@ -77,10 +77,10 @@ export class HelpcenterPanel {
         }
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '7ebc1495b2933c451a256a4006cc8282e8f2325e', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '119fcbef430ef1808b1a7890dafae7a989ac84d8', icon: "help" }), h("span", { key: '2d92f7abc9c01f217e59f3560ff6ebfb7cc1161b' }, this.label)), h("div", { key: 'f57b69556a038441adc316cce74c5e29b455ff4c', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '4ca3979f6e933c0b102d8443f494d52a51629605', class: "dimscreen", onClick: this.closeClick }), h("div", { key: 'da51b5c07f9bca49f35c0894997634ab736ab44d', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (h(Fragment, null, h("button", { key: '4feefc0a55d6cca8c7eacb63a6a05cceaab2c945', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '5f65143e673f8c81a7caf57c4a1df65f5739d7da', icon: "help" }), h("span", { key: 'a2e52d76c3dd57bf3c2af14cd212c713b625fc14' }, this.label)), h("div", { key: 'cffc86409de62caa06d4923885190390780e492d', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '65c0f760c97ab3e14daa20d088f4a7c7d041e0ef', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '4f8e345279535fc2c8f00d42c7529fb37142a7f9', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (h("div", null))), h("button", { key: 'bf2c1b8eee6509c14ea3710e60c83c2fbc949517', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '3ece8241d7f302a9471ce232e763955a8ffb3094', icon: "times" }), h("span", { key: '284e9eadf0404f45c34b128ff833f0e0e5e81642', class: "sr-only" }, "sluiten")))));
+            } })) : (h("div", null))), h("button", { key: '17f29f66e7a11910f7cbe611d5e7587cb4becbda', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '6857ebf299bda79c7783847af915baeee53fc3c2', icon: "times" }), h("span", { key: '2d186f391469a05e1f2a0fece42720cf0ff55f99', class: "sr-only" }, "sluiten")))));
     }
     static get is() { return "dso-helpcenter-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/highlight-box/highlight-box.css

@@ -12,19 +12,19 @@
   color: #fff;
   font-size: 1.25rem;
   font-weight: 500;
-  height: 2rem;
-  left: 16px;
+  block-size: 2rem;
+  inset-inline-start: 16px;
   line-height: 2rem;
   position: absolute;
   text-align: center;
-  top: -1.5rem;
-  width: 2rem;
+  inset-block-start: -1.5rem;
+  inline-size: 2rem;
 }
 
 :host {
-  margin-top: 16px;
+  margin-block-start: 16px;
   padding: 16px;
-  margin-bottom: 24px;
+  margin-block-end: 24px;
   block-size: var(--highlight-box-block-size, unset);
   min-block-size: var(--highlight-box-min-block-size, unset);
   display: block;

package/dist/collection/components/highlight-box/highlight-box.js

@@ -10,7 +10,7 @@ export class HighlightBox {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '94dfaf9efb9d2cb1f5910b8dd0f4cc37f8b24c17', "has-counter": hasCounter }, hasCounter && h("div", { key: '005ab4e5b5cec05e4b16e32e8fa6ee8e1da0eb06', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'e6f814e0bb7f5f791f441cd78bd25a0c14e3e60e', name: "icon" })), h("slot", { key: '2dfc8c0d8ea3222c2e8b5a59f168b3df80b70bcc' })));
+        return (h(Host, { key: '8d51ec0165aaaea5a1ebf8582c79be9a4a8ef67f', "has-counter": hasCounter }, hasCounter && h("div", { key: '21deb0ff1e55dd3cdc283921b5bf496625bbd989', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'e3a6ac0f446ab0fe94bc2c9f833b00b936a83f34', name: "icon" })), h("slot", { key: '1f424d6b7c5285e366f2db64383133bcfa3cc8f6' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.css

@@ -1,8 +1,8 @@
 :host {
   display: inline-block;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 
 *,

package/dist/collection/components/icon/icon.js

@@ -209,7 +209,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '118278e8190607c65d05559091539e28fd27b1f8', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '8d9a58ec32a61e261ce372bda5d252dac335730b', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }