@dso-toolkit/core 62.25.0 → 62.26.0

package/dist/collection/components/list-button/list-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;
@@ -27,10 +27,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;
   border: 0;
@@ -66,7 +66,7 @@
   position: relative;
 }
 .dso-tertiary.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -76,32 +76,32 @@
   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;
 }
 .dso-tertiary.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;
 }
 .dso-tertiary dso-icon + span:not(.sr-only),
 .dso-tertiary svg.di + span:not(.sr-only),
 .dso-tertiary span:not(.sr-only) + dso-icon,
 .dso-tertiary span:not(.sr-only) + svg.di {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 .dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 .dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
 .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
 .dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -111,7 +111,7 @@
 .dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .dso-tertiary dso-icon,
 .dso-tertiary svg.di,
@@ -125,16 +125,16 @@
   flex-wrap: wrap;
 }
 .dso-input-number label {
-  width: 100%;
+  inline-size: 100%;
 }
 .dso-input-number .dso-input-step-counter {
   align-self: center;
   background-color: transparent;
   border: 0;
   display: inline-block;
-  height: 1.5rem;
+  block-size: 1.5rem;
   text-align: center;
-  width: 1.5rem;
+  inline-size: 1.5rem;
 }
 .dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {
   outline: 0;
@@ -164,7 +164,7 @@
   border-radius: 4px 0 0 4px;
 }
 .dso-button-group > *:not(:first-child) {
-  border-left-style: none !important;
+  border-inline-start-style: none !important;
 }
 .dso-button-group > *:last-child {
   border-radius: 0 4px 4px 0;
@@ -214,7 +214,7 @@
   opacity: 1;
 }
 .dso-button-group .dso-list-button {
-  padding-right: 15px;
+  padding-inline-end: 15px;
 }
 
 .dso-selectable {
@@ -236,13 +236,13 @@
 }
 .dso-selectable input[type=checkbox],
 .dso-selectable input[type=radio] {
-  height: 24px;
-  left: 0;
+  block-size: 24px;
+  inset-inline-start: 0;
   margin: 0;
   opacity: 0;
   position: absolute;
-  top: 0;
-  width: 24px;
+  inset-block-start: 0;
+  inline-size: 24px;
   z-index: 100;
   zoom: 1;
 }
@@ -260,7 +260,7 @@
 .dso-selectable input[type=radio] + label {
   display: inline;
   font-style: normal;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 .dso-selectable input[type=checkbox] + label::before,
 .dso-selectable input[type=radio] + label::before {
@@ -268,11 +268,11 @@
   border: 0;
   box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);
   content: "";
-  height: 20px;
-  left: 2px;
+  block-size: 20px;
+  inset-inline-start: 2px;
   position: absolute;
-  top: 2px;
-  width: 20px;
+  inset-block-start: 2px;
+  inline-size: 20px;
 }
 .dso-selectable input[type=checkbox]:focus,
 .dso-selectable input[type=radio]:focus {
@@ -281,20 +281,20 @@
 .dso-selectable input[type=checkbox]:focus + label::before,
 .dso-selectable input[type=radio]:focus + label::before {
   box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);
-  height: 18px;
-  left: 3px;
-  top: 3px;
-  width: 18px;
+  block-size: 18px;
+  inset-inline-start: 3px;
+  inset-block-start: 3px;
+  inline-size: 18px;
 }
 .dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,
 .dso-selectable input[type=radio]:active + label::before,
 .dso-selectable input[type=radio].active + label::before {
   background-color: #ebf3e6;
   box-shadow: 0 0 0 1px #275937;
-  height: 22px;
-  left: 1px;
-  top: 1px;
-  width: 22px;
+  block-size: 22px;
+  inset-inline-start: 1px;
+  inset-block-start: 1px;
+  inline-size: 22px;
 }
 .dso-selectable input[type=checkbox] + label::before {
   border-radius: 4px;
@@ -302,10 +302,10 @@
 .dso-selectable input[type=checkbox] + label::after {
   background: transparent;
   content: "";
-  left: 6px;
+  inset-inline-start: 6px;
   opacity: 0;
   position: absolute;
-  top: 6px;
+  inset-block-start: 6px;
   zoom: 1;
 }
 .dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {
@@ -314,16 +314,16 @@
 .dso-selectable input[type=checkbox]:checked + label::after {
   border: solid;
   border-color: var(--dso-selectable-color, #39870c);
-  border-top-color: transparent;
+  border-block-start-color: transparent;
   border-width: 0 0 3px 3px;
-  height: 8px;
+  block-size: 8px;
   transform: rotate(-45deg);
-  width: 13px;
+  inline-size: 13px;
 }
 .dso-selectable input[type=checkbox]:indeterminate + label::after {
   background-color: var(--dso-selectable-color, #39870c);
-  height: 12px;
-  width: 12px;
+  block-size: 12px;
+  inline-size: 12px;
 }
 .dso-selectable input[type=radio] + label::before {
   border-radius: 50%;
@@ -332,12 +332,12 @@
   background-color: transparent;
   border-radius: 50%;
   content: "";
-  height: 12px;
-  left: 6px;
+  block-size: 12px;
+  inset-inline-start: 6px;
   opacity: 0;
   position: absolute;
-  top: 6px;
-  width: 12px;
+  inset-block-start: 6px;
+  inline-size: 12px;
   zoom: 1;
 }
 .dso-selectable input[type=radio]:checked + label::after {
@@ -352,10 +352,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;
@@ -367,9 +367,9 @@
   font-weight: 600;
   padding: 15px 47px 15px 15px;
   position: relative;
-  text-align: left;
+  text-align: start;
   white-space: normal;
-  width: 100%;
+  inline-size: 100%;
   cursor: pointer;
 }
 .dso-list-button:focus, .dso-list-button:focus-visible {
@@ -401,7 +401,7 @@
 }
 @media screen and (min-width: 768px) {
   .dso-list-button.dso-selected.dso-single-count {
-    border-right: 0;
+    border-inline-end: 0;
     box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;
   }
 }
@@ -413,16 +413,16 @@
 }
 .dso-list-button .dso-sublabel {
   font-weight: 400;
-  width: 100%;
+  inline-size: 100%;
 }
 .dso-list-button dso-icon,
 .dso-list-button svg.di,
 .dso-list-button .dso-count {
-  height: 24px;
+  block-size: 24px;
   position: absolute;
-  right: 15px;
-  top: 15px;
-  width: 24px;
+  inset-inline-end: 15px;
+  inset-block-start: 15px;
+  inline-size: 24px;
 }
 .dso-list-button dso-icon,
 .dso-list-button svg.di {
@@ -434,31 +434,31 @@
 }
 @media screen and (max-width: 767px) {
   .dso-list-button.dso-selected.dso-single-count::after {
-    width: 0;
+    inline-size: 0;
   }
 }
 .dso-list-button .dso-sublabel {
-  padding-left: 32px;
+  padding-inline-start: 32px;
 }
 
 .dso-list-button + .dso-list-button,
 .dso-list-button + .dso-button-group,
 .dso-button-group + .dso-list-button,
 .dso-button-group + .dso-button-group {
-  margin-top: 4px;
+  margin-block-start: 4px;
 }
 
 .dso-input-wrapper {
   position: relative;
 }
 .dso-input-wrapper .form-control {
-  width: 9ch;
+  inline-size: 9ch;
 }
 
 .form-control {
   display: block;
-  width: 100%;
-  height: 40px;
+  inline-size: 100%;
+  block-size: 40px;
   padding: 6px 14px;
   font-size: 1rem;
   line-height: 1.5;
@@ -506,17 +506,14 @@
   line-height: 40px;
 }
 .form-control[size] {
-  width: auto;
+  inline-size: auto;
 }
 
 .dso-manual-input-button[type=button] {
   background-color: transparent;
   border: 0;
-  bottom: 0;
-  left: 0;
   position: absolute;
-  right: 0;
-  top: 0;
+  inset: 0;
 }
 
 .hidden {

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

@@ -113,7 +113,7 @@ export class ListButton {
     render() {
         const showButtonInputs = this.manualCount === undefined;
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: 'd40fdadfac45c00b7657ff365ddfac8769c72710', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '916de1d699fdb155530dfb5aa5b4b9315eb78b33', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'cf718524bcc8bff10602d19701319522276390b6', class: "dso-selectable" }, h("input", { key: '2d36b3e7a9377ff765cbfbbd19874f2db49786e4', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: 'b5997457d4260bcf7971d2e57c7cb22ba036ef17', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: 'c3747912f68572b004672ae49d770037cc40ed3c', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: '85bd8620045f43ee3af685fcc9805f287b992ebd', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: '0936df007aa982b94bd63f63d2744dc342d0ec96', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '4e54fda951864d13c59bbf70f9052b7aeabb6bdb', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '8bd1030c7f7e779da73c67886c6da74e59eee9e9', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: 'eeaf4920e388b5315a705859832fafe6d14920e3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '60020bb171ed5b33e9850bc7472a7caa08bfbfd6', icon: "minus-circle" }), h("span", { key: '6f085b670db936d7ae44405a87d5aa04e663de8e', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: 'aeacf135c45b4b255a5399dcded381769cc5962b', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: '84dd0679203c6ff85ea858e689366fb952a9e666', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: '19b9381145862bf3893284594479ff009f37a310', onSubmit: (e) => this.setCount(e) }, h("div", { key: 'e6bb25bd9ba9b848431e7451154ab91888f3193d', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: 'da5757dc2be34a994e1a54ceae73e176cccb99b8', class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { key: 'cce6b85e2cbb094c7dbe9b008320758c075106d6', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: '09fd129b37155929d83573123cb15fd4c072cee3', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: '53bc95e299e1c0af676e397382f15137016c58e7', icon: "plus-circle" }), h("span", { key: 'a22ef9ead527e8ba09685fc9ec89b26661f22c7e', class: "sr-only" }, "Aantal verhogen")))))));
+        return (h("div", { key: 'a7081662fb2f3ff4379657cba4b16bc1d7f6c794', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '9634845843257078488292d9d2d16d0cfc413744', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("div", { key: 'd24d32d2e9de61b0f641e7d09bbf8aae17ac6b9b', class: "dso-selectable" }, h("input", { key: '1cfa9ae22dfc4a104a2f4ab6d2dc8ab29cd61753', id: "dso-list-button-checkbox", type: "checkbox", value: "list-button", name: "naam", "aria-describedby": [this.sublabel && "sublabel", this.subcontentSlot && "description"].filter((s) => !!s).join(" ") || null, checked: selected, disabled: this.disabled }), h("label", { key: '2f49787d8800edfdd41ac70d30d07f876f4add44', htmlFor: "dso-list-button-checkbox" }, this.label), this.subcontentSlot && (h("div", { key: '8068c6495c7aedd29b8965a761d9d84486bbd8e6', class: "sr-only", id: "description" }, this.subcontentPrefix && this.subcontentPrefix + ":", h("div", { key: 'c1efb3c0b83658846da26d7df8018aa0a015b792', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && (h("span", { key: 'b82a8b9fa1e47afea93ed7884ad609df0c340d69', class: "dso-sublabel", id: "sublabel" }, this.sublabel)), h("slot", { key: '97538ed22e40c42bf8dee90f02fc1f555c2b3486', name: "subcontent" })), this.count !== undefined && this.count > 0 && (h("div", { key: '4d667eecc82c48e3c471bea637d4eda22bbc5464', class: "dso-input-number" }, this.manualCount === undefined && this.count > 1 && (h("button", { key: '45f56234d9263924a921060f98e670127bbc5c0c', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.min) || this.disabled, onClick: (e) => this.stepValue(e, "decrement") }, h("dso-icon", { key: '7471483fd19876dada62fc3d6a9fad65858d9dea', icon: "minus-circle" }), h("span", { key: 'b0ff9565269b8b78647fadba0cbcb7dd2e5816a7', class: "sr-only" }, "Aantal verlagen"))), h("div", { key: '315ed0f7f87dfc0a1d27dded8a38cec5c60f9a63', class: "dso-input-wrapper" }, this.manualCount === undefined && this.count > 1 && (h("input", { key: '620db229f96ab2956d7adcd0552661394dbfb015', class: "dso-input-step-counter", type: "number", tabIndex: -1, "aria-label": "Aantal", value: this.count, readOnly: true })), h("form", { key: 'eef1f15d159adc64f9baa496719bd94be26b24a5', onSubmit: (e) => this.setCount(e) }, h("div", { key: '20e1b4018c23b564e54040014b853848e13f9d2c', ref: (element) => (this.manualInputWrapperElement = element) }, h("input", { key: '772f05dbc9104b2b4ad2e2e238512f3f98d58373', class: clsx("form-control", { hidden: showButtonInputs }), type: "number", "aria-label": "Aantal", value: this.manualCount, min: this.min, max: this.max, onInput: (e) => this.handleOnChange(e) })), this.manual && (h("button", { key: 'ae5a7ec0e6413ab9fc86dca79631e1a1ea27d15e', class: clsx("dso-manual-input-button", { "sr-only": !showButtonInputs }), type: !showButtonInputs ? "submit" : "button", disabled: this.disabled, onClick: () => showButtonInputs && this.startManualCountInput() }, showButtonInputs ? (h("span", { class: "sr-only" }, "Handmatig aantal invullen")) : (h("span", { class: "sr-only" }, "Zet waarde")))))), showButtonInputs && (h("button", { key: 'e726222f54d93445295364e0b493b099b6dccc78', type: "button", class: "dso-tertiary", disabled: this.count === Number(this.max) || this.disabled, onClick: (e) => this.stepValue(e, "increment") }, h("dso-icon", { key: 'c0d43c185a704259d330e2ee413355c5f7af34d7', icon: "plus-circle" }), h("span", { key: '6a54fd8645e34cc6850a675743eb89fb66329663', class: "sr-only" }, "Aantal verhogen")))))));
     }
     static get is() { return "dso-list-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/logo/logo.css

@@ -93,7 +93,8 @@
   background-color: #8b4a6a;
   border-radius: 3px;
   transform: rotate(3deg);
-  padding: 0 8px;
+  padding-block: 0;
+  padding-inline: 8px;
   font-size: 0.75rem;
   font-weight: normal;
   text-transform: uppercase;

package/dist/collection/components/logo/logo.js

@@ -15,8 +15,8 @@ export class Logo {
         this.ribbon = undefined;
     }
     render() {
-        return (h(Host, { key: 'd57dfbb27ec2be56630b4a78ade3a9922e81c3c3', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, null))) : (h(DsoLogo, null)), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '8c22fc7c3b90a05312eedb04dd9c356cba7fa27e', class: "logo-ribbon" }, this.ribbon)));
+        return (h(Host, { key: 'cfefb38a8651cd1a5eb5316cbaad5079486fd8bb', "aria-label": ["Omgevingsloket", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(" ") }, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo, null))) : (h(DsoLogo, null)), this.label &&
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: 'dd347c7c408b8314470b674e75d2a5a1202fcaf8', class: "logo-ribbon" }, this.ribbon)));
     }
     static get is() { return "dso-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-base-layers/map-base-layers.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;
@@ -22,15 +22,15 @@
 fieldset {
   border: 0;
   margin: 0;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
 }
 fieldset .control-label {
   display: inline-block;
   font-weight: bold;
-  margin-bottom: 8px;
-  max-width: 100%;
-  text-align: left;
+  margin-block-end: 8px;
+  max-inline-size: 100%;
+  text-align: start;
 }
 
 p[slot=info] {

package/dist/collection/components/map-base-layers/map-base-layers.js

@@ -22,7 +22,7 @@ export class MapBaseLayers {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'ce4733538fc133e4d016ebe43df3b13a58797446', class: "form-group dso-radios" }, h("legend", { key: 'b1f4ceb4f0c8d9fefce0ca9646e02097e95afbd4', class: "sr-only" }, "Achtergrond"), h("div", { key: '702d557a61547834151275a488d207d3b78d3407', class: "dso-label-container" }, h("span", { key: 'e44d8e0a6d88ab41a8c36989229bc4d577f9c61f', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '0b97e49d0288373b77f8edcc15efa1f77c440c8c', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'c2421f83ea87da2807861bcb3507829c4f7df412', class: "form-group dso-radios" }, h("legend", { key: '89a8b5d0a4e68b07b057b5c14911877ddec46104', class: "sr-only" }, "Achtergrond"), h("div", { key: '71820b7deb8ac233990cc66b23f78f794b04d91c', class: "dso-label-container" }, h("span", { key: 'c752c9d8d0db2ff11afe3a1d47a902c73003114c', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '3c1e7690ec3a5c7ac5967b8b69f5af46af4d1f6b', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     static get is() { return "dso-map-base-layers"; }
     static get encapsulation() { return "shadow"; }