@dso-toolkit/core 62.24.0 → 62.26.0

package/dist/collection/components/image-overlay/image-overlay.css

@@ -32,10 +32,10 @@ button::-moz-focus-inner {
   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;
@@ -45,16 +45,17 @@ button::-moz-focus-inner {
   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;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-  min-width: auto;
+  min-inline-size: auto;
   padding: 8px;
   opacity: 0;
   position: absolute;
-  right: 16px;
-  top: 16px;
+  inset-inline-end: 16px;
+  inset-block-start: 16px;
 }
 .open:focus, .open:focus-visible {
   outline-offset: 2px;
@@ -82,21 +83,21 @@ button::-moz-focus-inner {
 }
 .open.dso-small dso-icon,
 .open.dso-small svg.di, .open.dso-small.extern::after, .open.dso-small.download::after, .open.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .open.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .open.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .open > span {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -113,56 +114,53 @@ button::-moz-focus-inner {
   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.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;
 }
 .open.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .open.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;
 }
 .open.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;
 }
 .open.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 
 .dimmer {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   z-index: 19;
   display: flex;
   padding: 32px;
@@ -186,27 +184,27 @@ button::-moz-focus-inner {
   position: absolute;
 }
 .wrapper img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: calc(100vh - 64px);
+  inline-size: auto;
+  block-size: auto;
+  max-inline-size: 100%;
+  max-block-size: calc(100vh - 64px);
 }
 .wrapper .figuur-bijschrift:not([hidden]) {
   display: block;
   font-size: 0.75rem;
   font-style: italic;
-  padding-bottom: 12px;
-  padding-top: 16px;
+  padding-block-end: 12px;
+  padding-block-start: 16px;
 }
 
 .close {
   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;
@@ -216,15 +214,16 @@ button::-moz-focus-inner {
   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;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-  min-width: auto;
+  min-inline-size: auto;
   padding: 8px;
   position: absolute;
-  top: 16px;
-  right: 16px;
+  inset-block-start: 16px;
+  inset-inline-end: 16px;
 }
 .close:focus, .close:focus-visible {
   outline-offset: 2px;
@@ -252,21 +251,21 @@ button::-moz-focus-inner {
 }
 .close.dso-small dso-icon,
 .close.dso-small svg.di, .close.dso-small.extern::after, .close.dso-small.download::after, .close.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 .close.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close > span {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -283,48 +282,48 @@ button::-moz-focus-inner {
   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.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.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 .close.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.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.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 
 ins.editaction-add {

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

@@ -8,8 +8,8 @@
   border-style: none;
   padding: 0;
   position: absolute;
-  right: 8px;
-  top: 8px;
+  inset-inline-end: 8px;
+  inset-block-start: 8px;
 }
 
 :host(:not([active], [fixed])),
@@ -46,8 +46,8 @@ button::-moz-focus-inner {
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;

package/dist/collection/components/info/info.js

@@ -5,7 +5,7 @@ export class Info {
         this.active = undefined;
     }
     render() {
-        return (h(Fragment, { key: 'e5f657a636b290b194ccbb89b8cd10c361a3addd' }, h("slot", { key: '08ff21c78926849c1b0461abfc551f96fd4a769a' }), !this.fixed && (h("button", { key: '5312aa3e0b79e3c46c28b272b1fe2161f3c625a2', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '7473fe06abfd42aa7c39eb97b4ea1b8113e9bfe4', icon: "times" }), h("span", { key: 'e5b9d4414e871ff4ec15e18adb6ab819ddcfb0f5', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '3dcb0b7964995734a527775251fac2c0dac5a62f' }, h("slot", { key: 'b6217bab04d44d36de11b0876a07825253303100' }), !this.fixed && (h("button", { key: '41c1f3facca9066b6c760e5a7b9b71aeaecb1590', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '615e0cf09f692c0cb2a9efdf96e35035db6baf20', icon: "times" }), h("span", { key: 'f69da4351264fe6283e71e6fd2af584c09ef6815', class: "sr-only" }, "Sluiten")))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,8 +10,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -23,7 +23,7 @@ button {
   background-color: transparent;
   color: #39870c;
   border: 0;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   padding: 0;
   cursor: pointer;
   vertical-align: top;

package/dist/collection/components/info-button/info-button.js

@@ -19,7 +19,7 @@ export class InfoButton {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: 'f92cf2e064117a666eff6e06918d1b8bfaa0ae4b', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '9a9a095f29dff2d7ef53be6df2a5bb0de1fd9673', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: 'b2fc1665fa93d7a131833fc71b9cd17b0b29f5c6', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '9aa27a9e5ecc316e89c5ad0af463e711328d1857', class: "sr-only" }, this.label))));
+        return (h(Host, { key: 'a9afc4b8538284ccbbfb0ef26de4309380faa673', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '08911957ed2c44f2576cc541aae4c4fe2e2afb60', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '1cff75564204ba2ba31600e9c721fbfcb7b2dbb8', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '4d615ba1e61ddec946c39cb44eac90bbb3691045', class: "sr-only" }, this.label))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js

@@ -13,13 +13,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '01c22533d0eddbb7bb513317c531bcc04ab5d12f', id: "description", hidden: true }, this.description)), h("span", { key: 'fc58429b96deef9728b7ede4707176124d5b2ca5', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'a9bee5cb4aef9a32141b12237a8cd80d453599a1', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'da13ae51dbb89593f553c2cecac9c5f889e65376', id: "description", hidden: true }, this.description)), h("span", { key: '7a244701a0e9a7ccc54c4565644f0a04bd7ea7cc', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: 'adf4e0ef4b5339f4744a105be76af9bb12087859', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '883c3c66f15ae009ea147c265da96ba1b8e2167a', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '85bef9f227fd222860c83f600f0266447bb9a647', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 
 *,
@@ -11,8 +11,8 @@
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -24,7 +24,7 @@
   border-radius: 4px;
   display: inline-block;
   line-height: 1.5;
-  max-width: 100%;
+  max-inline-size: 100%;
   padding: 4px 8px;
 }
 .dso-label:focus-within, .dso-label.dso-hover {
@@ -35,12 +35,12 @@
   border: 0;
   border-radius: 0 4px 4px 0;
   color: inherit;
-  float: right;
+  float: inline-end;
   font-size: 1rem;
-  margin-bottom: -4px;
-  margin-left: 8px;
-  margin-right: -4px;
-  margin-top: 0;
+  margin-block-end: -4px;
+  margin-inline-start: 8px;
+  margin-inline-end: -4px;
+  margin-block-start: 0;
   padding: 0;
 }
 .dso-label button:hover {
@@ -106,7 +106,7 @@
 
 .dso-truncate.dso-label-content {
   display: inline-block;
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: bottom;
@@ -114,5 +114,5 @@
 }
 
 :host([removable]) .dso-truncate.dso-label-content {
-  max-width: calc(100% - 28px);
+  max-inline-size: calc(100% - 28px);
 }

package/dist/collection/components/label/label.js

@@ -102,13 +102,13 @@ export class Label {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '7d0859b14bf6b8b6bc1f1ea7f6e6428431cc1197' }, h("span", { key: 'b1c8c1302f21caaaebb0193a171a95e4330b92b8', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: 'cbeb665084f6c9ae343ec221c27e7fda24a2215b' }, h("span", { key: 'e5876df3c31450fdf4b06c988f55cfcab5278220', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: '5f3f5b65b4e4b44949b817800b505c5db1d25275', name: "symbol" }), h("span", { key: '6070e0d015cf2464121cf0dfb0088676ab00628b', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '200321159ee7c00f20678f66bd25aadf4ab160d2', name: "symbol" }), h("span", { key: '17a7ffd2f9f89e301930910ad102a7762a614448', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '04b20cade12d23246ce7b21e1aae447689e9c1c7' })), this.removable && (h("button", { key: 'bb184213b1ca01f83e2a1f265429293f3dda8f3b', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '9805c7dcd105ba5a6a59e75e822250defb107940', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '19fef3d7fbd4b017cc880bc02fb3408706536933', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'c136e39ed459e5c4680888b2a27bd0c17485406b', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '606fdf8fb1b38519741054b3c84fdce6a9af7b3b' })), this.removable && (h("button", { key: '74d6b6e8c4da368c22aedbd538d4d57112e8834d', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '84ce4a2c450ed605f4337e098690dd0843023812', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '02e15f5243b78776015f36010bd672f42247dcc8', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '0480b653c2d490919ccab44cb8ba1dab6e9e608b', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     static get is() { return "dso-label"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,6 +1,7 @@
 :host {
   display: block;
-  padding: 4px;
+  padding-block: 4px;
+  padding-inline: 4px;
 }
 
 *,
@@ -27,10 +28,10 @@ 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;
   border: 0;
@@ -67,7 +68,7 @@ button.dso-align {
   position: relative;
 }
 button.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -77,25 +78,25 @@ button.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;
 }
 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: middle;
-  width: 24px;
-  margin-left: 8px;
+  inline-size: 24px;
+  margin-inline-start: 8px;
 }
 button > span {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;

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

@@ -25,10 +25,10 @@ export class LegendItem {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasBody = this.bodySlottedElement !== null;
         const isSelectable = this.selectableSlottedElement !== null;
-        return (h(Host, { key: '3a732bff9d1e998b7468c7e508edf41e472cdf1f', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '8b2bba6b998955c91e5d67fa6dcd4424807b7c2a', class: clsx("legend-item", {
+        return (h(Host, { key: 'c004f8202b61416261292f9d662e36e8165f3439', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '61fbea4d5443eb885542fe60c2a291e1b15c58f7', class: clsx("legend-item", {
                 "legend-item-symbol": hasSymbol,
                 "legend-item-selectable": isSelectable,
-            }) }, h("div", { key: '1f3bb12d214ed0877786a195dbae6185b00b6c97', hidden: !hasSymbol }, h("slot", { key: '032e27bcad7cf0a711e7afe05f782c7d51246d1d', name: "symbol" })), h("div", { key: '7ba425d10db6401e450090b94824bb66ff709e9b' }, h("slot", { key: 'a4f911e41c0a700a4aa13a7fb4aab1fcdbeffe8a' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'f094a3c424c1d1fd181b57bfd51638bfb8ea0797', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: '025272a3802507a54d2e50741dd79ed8bd1ba130', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'a1f96e0028b2af5d115216676bb2a2f31403f53d', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: 'b2c18e31618d3ce43536c1b2d3d48f5d66c16658', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'ef084b28d39bac92df86f5e4e9f441588fa77d3f', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: '2ca66b1cadf279727750086f02e3423029b39fec', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '6fe03e75ecbc08e02956d75c10212ad3f566d6f4', icon: this.showBody ? "times" : "more" })))), h("div", { key: '061973981aa31be8a7b1ab51f94e301a1c4aa68b', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '9817bbb5df6790ecf30c97c688aed899a7b9ef9e', name: "body" }))));
+            }) }, h("div", { key: 'e3871d797250ad550f5beed65af222fe14191182', hidden: !hasSymbol }, h("slot", { key: 'a32b0a6a2b2f42317de05841458944866bf6b8ad', name: "symbol" })), h("div", { key: '22e1a547ed3f275af2ca4484867a31c32216141c' }, h("slot", { key: '93731a611e898b6e5c53b171f3f6e44af7e6622e' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '69eb20452cbb47bc241a9923bf0b659e4d5e6ce4', position: "bottom" }, this.disabledMessage)), this.removable && (h("button", { key: 'f2de4d27c5f851857a3b0d17e347025772e0b800', id: "remove-button", type: "button", onClick: (e) => this.dsoRemoveClick.emit({ originalEvent: e }) }, h("span", { key: 'da0491938193ed5b0fb113ed6750b5ff33f19043', class: "sr-only" }, "Legenda item verwijderen"), h("dso-icon", { key: '3395148769cf6cbbbea2e7c724e2189a7f4b4440', icon: "trash" }))), hasBody && !this.disabled && (h("button", { key: 'fc172ae2f4f95da35a6beb6be749e966e5270bb9', id: "edit-button", type: "button", onClick: () => (this.showBody = !this.showBody) }, h("span", { key: 'd69e26a81c630511fc51d0cb0f7e46591ab0315b', class: "sr-only" }, "Legenda item aanpassen"), h("dso-icon", { key: '94e76ca98fc6180ac40fc7b3dd9d2520b051fef2', icon: this.showBody ? "times" : "more" })))), h("div", { key: '212e6659dff04e22f64d10cb18aae9b5d5ee26df', hidden: !hasBody || this.disabled || !this.showBody, class: "body" }, h("slot", { key: '395b05d3e877e1cb1f0ca5d5ff908fd9122c2a59', name: "body" }))));
     }
     static get is() { return "dso-legend-item"; }
     static get encapsulation() { return "shadow"; }