@dso-toolkit/core 62.25.0 → 62.27.0

package/dist/collection/components/card/card.css

@@ -70,7 +70,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 :host .dso-card-heading {
   align-items: center;
   display: flex;
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 @media screen and (max-width: 480px) {
   :host .dso-card-heading {
@@ -78,7 +78,7 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   }
 }
 :host .dso-card-image {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 :host(:hover) .dso-card-heading a {
@@ -102,8 +102,8 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
 }
 .heading-anchor .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;

package/dist/collection/components/card/card.js

@@ -50,9 +50,9 @@ export class Card {
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
         const hasImage = this.imageSlottedElement !== null;
-        return (h(Host, { key: '0c66649451517f7964437001acc82fa555882caf', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: 'f422f604c9fe91dfe284b4b01bbf3c053228b056', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '2b1401266e44bb6970849763ecd3b09c2a54ebcc', name: "selectable" })), h("div", { key: 'c2e9b599af341e366dcae1abb8435fcdb8d98074', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: 'fe525fc9248bfdd7482975a6a367c28cda331c95', name: "image" })), h("div", { key: '5811c5f9891e07c486820d28391a83bfc21a5bfc', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
+        return (h(Host, { key: '8bd90130bed0df984bcf89aab7b807eef97794c5', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: '50109582e85cc45cf805c1166075f42344912b36', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '340edc1a1868cbac5583e2b7b9e323881c5d1148', name: "selectable" })), h("div", { key: 'debbca0ce003139f992f12249baf3eb58fdee6ca', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: '1cc32cc8e1a52519534de22348d7321ffd6866ba', name: "image" })), h("div", { key: 'ebe0ac5c0343b4f3b8c06b563048ea624303e353', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
             (this.mode === "extern" && (h("a", { href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: '330c90621b89d1565a35474af14f5bced644dc70', name: "interactions" })), h("div", { key: '11cd1a110f6c5fbbd52611183a8dc6f87448016e', class: "dso-card-content" }, h("slot", { key: 'f7cc4cbd9fe205a75004a65ae8c62df4f62ccac9', name: "content" }))));
+            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: 'd373f9d92186fbc3932fe51cd0d087632fb43304', name: "interactions" })), h("div", { key: '8878c53b0ccc984b68252c3eae22dc103cc58d84', class: "dso-card-content" }, h("slot", { key: 'eb8213fad4e11c237a57258f9802694df1075a6e', name: "content" }))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-container/card-container.css

@@ -1,8 +1,8 @@
 :host .dso-card-list {
-  padding-left: 0;
+  padding-inline-start: 0;
   list-style: none;
-  border-bottom: 1px solid #ccc;
-  margin-top: -1px;
+  border-block-end: 1px solid #ccc;
+  margin-block-start: -1px;
 }
 :host .dso-card-grid {
   display: grid;

package/dist/collection/components/card-container/card-container.js

@@ -4,7 +4,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '4628edd1ea9ebde12abc69482a3586df6824e897', class: "dso-card-list" }, h("slot", { key: '28f8c7af2cb269d034aead2d8f8b24ff36a9707a' }))), this.mode === "grid" && (h("div", { key: '53a740a4c52d3844ea02570259805ae7c98424a2', class: "dso-card-grid" }, h("slot", { key: '300b540b919ea82d20cb9d4fa57ad88cd342e734' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '2cd997846ae44ff29f3ec19b8e1c859d87e0db9b', class: "dso-card-list" }, h("slot", { key: 'b822f07618e1e98fb85825116eebb36901a5566c' }))), this.mode === "grid" && (h("div", { key: '892bd332b724317043b0c550831e624290c0b00b', class: "dso-card-grid" }, h("slot", { key: '92d11bac52fab9500d5ee7ce737568305cab7a61' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,9 +7,10 @@
 
 .dso-date__input {
   display: block;
-  width: 100%;
-  height: 40px;
-  padding: 6px 14px;
+  inline-size: 100%;
+  block-size: 40px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;
@@ -56,7 +57,7 @@
   line-height: 40px;
 }
 .dso-date__input[size] {
-  width: auto;
+  inline-size: auto;
 }
 .dso-date__input::-webkit-calendar-picker-indicator {
   position: relative;

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

@@ -95,7 +95,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        return (h("input", { key: '05ac3c8f265e1cbea015e9cd05bf4a298a7e8e37', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '72dccab73e365afc3991773db7a4a96d2e38d8b4', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

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

@@ -18,8 +18,8 @@
   font-family: "Asap", sans-serif;
   margin: 0;
   position: relative;
-  text-align: left;
-  width: 100%;
+  text-align: start;
+  inline-size: 100%;
 }
 .dso-date:not(.dso-visible) .dso-date__dialog {
   display: none;
@@ -27,9 +27,10 @@
 
 .dso-date__input {
   display: block;
-  width: 100%;
-  height: 40px;
-  padding: 6px 14px;
+  inline-size: 100%;
+  block-size: 40px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;
@@ -76,7 +77,7 @@
   line-height: 40px;
 }
 .dso-date__input[size] {
-  width: auto;
+  inline-size: auto;
 }
 
 .dso-date__toggle {
@@ -88,20 +89,20 @@
   background: transparent;
   border: 0;
   border-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
+  border-end-end-radius: 4px;
+  border-start-end-radius: 4px;
   color: #39870c;
   cursor: pointer;
   display: flex;
-  height: 38px;
+  block-size: 38px;
   justify-content: center;
   padding: 0;
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   transform: translateY(-50%);
-  top: 50%;
+  inset-block-start: 50%;
   user-select: none;
-  width: 38px;
+  inline-size: 38px;
   z-index: 101;
 }
 .dso-date__toggle:disabled {
@@ -112,11 +113,11 @@
 .dso-date__dialog {
   border-width: 1px;
   display: flex;
-  right: 0;
-  min-width: 320px;
+  inset-inline-end: 0;
+  min-inline-size: 320px;
   opacity: 0;
   position: absolute;
-  top: 100%;
+  inset-block-start: 100%;
   transform: scale(0.96) translateZ(0) translateY(-20px);
   transform-origin: top right;
   transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
@@ -127,19 +128,19 @@
 @media (max-width: 35.9375em) {
   .dso-date__dialog {
     background: rgba(25, 25, 25, 0.5);
-    bottom: 0;
+    inset-block-end: 0;
     position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    inset-block-start: 0;
     transform: translateZ(0);
     transform-origin: bottom center;
   }
 }
 .dso-date__dialog.is-left {
-  left: -11px;
-  right: auto;
-  width: auto;
+  inset-inline-start: -11px;
+  inset-inline-end: auto;
+  inline-size: auto;
 }
 .dso-date__dialog.is-active {
   opacity: 1;
@@ -152,30 +153,31 @@
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
-  margin-left: auto;
-  margin-right: -1px;
-  margin-top: 8px;
-  max-width: 310px;
-  min-width: 290px;
+  margin-inline-start: auto;
+  margin-inline-end: -1px;
+  margin-block-start: 8px;
+  max-inline-size: 310px;
+  min-inline-size: 290px;
   padding: 16px;
   position: relative;
   transform: none;
-  width: 100%;
+  inline-size: 100%;
   z-index: 210;
 }
 @media (max-width: 35.9375em) {
   .dso-date__dialog-content {
     border: 0;
     border-radius: 0;
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    bottom: 0;
-    left: 0;
+    border-start-start-radius: 4px;
+    border-start-end-radius: 4px;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     margin: 0;
-    max-width: none;
-    min-height: 26em;
+    max-inline-size: none;
+    min-block-size: 26em;
     opacity: 0;
-    padding: 0 8% 20px;
+    padding-block: 0 20px;
+    padding-inline: 8%;
     position: absolute;
     transform: translateZ(0) translateY(100%);
     transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
@@ -196,16 +198,16 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.25;
-  min-width: 280px;
+  min-inline-size: 280px;
   table-layout: fixed;
   text-align: center;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .dso-date__table-header {
   font-size: 0.875em;
   font-weight: 600;
-  height: 36px;
+  block-size: 36px;
   line-height: 36px;
   text-align: center;
   text-decoration: none;
@@ -213,10 +215,10 @@
 }
 
 .dso-date__cell {
-  height: 40px;
+  block-size: 40px;
   padding: 1px;
   text-align: center;
-  width: 40px;
+  inline-size: 40px;
 }
 
 .dso-date__day {
@@ -233,20 +235,20 @@
   font-family: "Asap", sans-serif;
   font-variant-numeric: tabular-nums;
   font-weight: 400;
-  height: 38px;
+  block-size: 38px;
   line-height: 0;
   padding: 0;
   position: relative;
   text-align: center;
   vertical-align: middle;
-  width: 38px;
+  inline-size: 38px;
   z-index: 100;
 }
 .dso-date__day.is-today {
   background: transparent;
-  height: 36px;
+  block-size: 36px;
   box-shadow: 0 0 0 1px #39870c;
-  width: 36px;
+  inline-size: 36px;
 }
 .dso-date__day:hover, .dso-date__day:active {
   background: #39870c;
@@ -256,9 +258,9 @@
   background: transparent;
   box-shadow: 0 0 0 2px #275937;
   color: #191919;
-  height: 34px;
+  block-size: 34px;
   outline: 0;
-  width: 34px;
+  inline-size: 34px;
 }
 [aria-selected=true] .dso-date__day {
   background: #39870c;
@@ -280,17 +282,17 @@
 .dso-date__day span[aria-hidden=true] {
   border-radius: 50%;
   display: inline-block;
-  height: 34px;
+  block-size: 34px;
   line-height: 34px;
-  width: 34px;
+  inline-size: 34px;
 }
 
 .dso-date__header {
   align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
-  width: 100%;
+  margin-block-end: 16px;
+  inline-size: 100%;
 }
 .dso-date__header span {
   font-size: 0.875rem;
@@ -314,17 +316,17 @@
   cursor: pointer;
   display: inline-flex;
   font-size: 1em;
-  height: 32px;
+  block-size: 32px;
   justify-content: center;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   padding: 0;
-  width: 32px;
+  inline-size: 32px;
 }
 @media (max-width: 35.9375em) {
   .dso-date__prev,
   .dso-date__next {
-    height: 40px;
-    width: 40px;
+    block-size: 40px;
+    inline-size: 40px;
   }
 }
 .dso-date__prev:hover, .dso-date__prev:active,
@@ -348,28 +350,29 @@
 }
 .dso-date__prev svg,
 .dso-date__next svg {
-  margin: 0 auto;
+  margin-block: 0;
+  margin-inline: auto;
 }
 
 .dso-date__select {
   display: inline-flex;
-  height: 28px;
+  block-size: 28px;
   line-height: 28px;
   position: relative;
 }
 .dso-date__select span {
-  margin-right: 4px;
+  margin-inline-end: 4px;
 }
 .dso-date__select select {
   color: #275937;
   cursor: pointer;
   font-size: 1rem;
-  height: 100%;
-  left: 0;
+  block-size: 100%;
+  inset-inline-start: 0;
   opacity: 0;
   position: absolute;
-  top: 0;
-  width: 100%;
+  inset-block-start: 0;
+  inline-size: 100%;
   z-index: 101;
 }
 .dso-date__select select:focus + .dso-date__select-label {
@@ -384,10 +387,11 @@
   border-radius: 4px;
   color: #39870c;
   display: flex;
-  padding: 0 4px 0 8px;
+  padding-block: 0;
+  padding-inline: 8px 4px;
   pointer-events: none;
   position: relative;
-  width: 100%;
+  inline-size: 100%;
   z-index: 100;
 }
 .dso-date__select-label span {
@@ -396,24 +400,25 @@
   line-height: 1.25;
 }
 .dso-date__select-label svg {
-  width: 16px;
-  height: 16px;
+  inline-size: 16px;
+  block-size: 16px;
 }
 
 .dso-date__mobile {
   align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-block-end: 1px solid rgba(0, 0, 0, 0.12);
   display: flex;
   font-size: 1em;
   justify-content: space-between;
-  margin-bottom: 20px;
-  margin-left: -10%;
+  margin-block-end: 20px;
+  margin-inline-start: -10%;
   overflow: hidden;
-  padding: 12px 20px;
+  padding-block: 12px;
+  padding-inline: 20px;
   position: relative;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 120%;
+  inline-size: 120%;
 }
 @media (min-width: 36em) {
   .dso-date__mobile {
@@ -422,16 +427,16 @@
     overflow: visible;
     padding: 0;
     position: absolute;
-    right: -16px;
-    top: -16px;
-    width: auto;
+    inset-inline-end: -16px;
+    inset-block-start: -16px;
+    inline-size: auto;
   }
 }
 
 .dso-date__mobile-heading {
   display: inline-block;
   font-weight: 600;
-  max-width: 84%;
+  max-inline-size: 84%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -453,15 +458,15 @@
   cursor: pointer;
   display: flex;
   font-size: 1em;
-  height: 32px;
+  block-size: 32px;
   justify-content: center;
-  margin-right: -4px;
+  margin-inline-end: -4px;
   padding: 0;
-  width: 32px;
+  inline-size: 32px;
 }
 @media (min-width: 36em) {
   .dso-date__close {
-    margin-right: 0;
+    margin-inline-end: 0;
     opacity: 0;
   }
 }
@@ -478,10 +483,10 @@
 .dso-date__vhidden {
   border: 0;
   clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
+  block-size: 1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  top: 0;
-  width: 1px;
+  inset-block-start: 0;
+  inline-size: 1px;
 }

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

@@ -419,14 +419,14 @@ export class DsoDatePickerLegacy {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '45dc93382b869cae594c284f5a64777b6ce83e20' }, h("div", { key: '4fa976df3079d11e19701c1d4d10225030c8bff8', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'ad246de32f9a5f2ac702c3761500cc901fee74eb', class: "dso-date__input-wrapper" }, h("input", { key: '2ec69c422cc6a54d914e1f8a09832cde659a0ffd', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'f4d34fdea62b07dd8ebd23ab1cd390fb19523ed9', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '3682b7a30487d85e6c4a26d191ee27fe304b5b1d', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'f9b2452ab20fa94fdee09a106ab623f888811ea5', icon: "calendar" })), h("span", { key: '687934d98c04cfb2d9bdc5047d07578492e3b4d3', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: 'c1d7907d3c24d8cbf5f2833d6dd25d98eaef9630' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '152358db0119a3d29d5bb8b91d7a2ad84ee40855', class: {
+        return (h(Host, { key: 'd14bbb1fa4a6fa9496b9790b5c8e7fe3b3e1e995' }, h("div", { key: '7799d1d402293ea89713f93a7e306793ebafa41f', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'f1183710c97e80d989755adf4ba775ec5a2b2b85', class: "dso-date__input-wrapper" }, h("input", { key: '67b4f456f2a653169660eb0e0294a86170a61851', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '8a193722292c56fe7abf08ae93f17fa40ca9d40f', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '1fa5d897acc0081cf347dfa60268788772ba5a62', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'a1dd69e476e6ed633d8329be90d2fb4fea2f8926', icon: "calendar" })), h("span", { key: 'cb3e00a758bd93b709e93e2b5eeff6616c59114d', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '26753798debaabcd060afdfe9c8572761ea9d02e' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '18aba1ca1ec0a28a17e7ef67a26561082d2ee7c5', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'ac00557f0f9e40c668d81863fd3c25d208f0ee4c', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '7178016b07bbd57788d44e31fded5cc8f828b3d3', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '4511337996a99964eb4fd97e1bcf612b3f9454a0', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'c20e75cab9fcdc3541f5bc0eaf5e881b94f5e315', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: 'e1e61f43af41624dfd07801840f5e0b081bd714b', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '84aa4dfe2e0a07bb4e596e5d0bf03fcb86c20d57', icon: "times" }), h("span", { key: '3b1ef4ac7a0ac1d24a5add77c20896bba4f46af7', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '9e4e06d30b41a3ce5aefbb808db87cdf6e883884', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '0b89be253bfd409054a52412969ae2ae6120e382' }, h("h2", { key: '94b922c24f610ce05ce907abcd6014e93f5c155f', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '3813086ca6ee3951d32ad451f1f86c5493f5c4a7', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '834c834c3e941de77ac8cf2d0ccf6bbf0581a2de', class: "dso-date__select" }, h("select", { key: 'aae80a3eaf0c5c997ec53b960f3e33f7e72bfe89', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'a2cb4eac5ebe13f6ac32b3226b74300b5100afad', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '767c3234e62982a414c221a8c2c1f5fee04d5ce5', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '72a45a35e721bec9b4117f09df5e1047bf6ec717', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fe9ef5e66bb819c2f4610dbd7eb8f6332f1aa446', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '22bb3ab6cd85c71fd5ca22311fde0f061260ad3d', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '7cd44065f4eceb4be7955ed991b2affe79b8f20d', icon: "times" }), h("span", { key: '70304b3e5cf5391e3a3b549bc7c66ff1589849a9', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'f50e6ae68c829ef6c67b61e08f261ca13ffbb384', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'dbf18c6f73053877a3788cc580ff13c8e2dcb000' }, h("h2", { key: '18540ccb64bfd82e8d9a9c58e8c0f39809d52ba4', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'cc79dd0065f3e4010e5344b40c57bd3f7390d9e5', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '97578788ea819c9e6fb23e10e39fa638dd6bf51d', class: "dso-date__select" }, h("select", { key: 'dbbfaf38efae5a17742ecd8a859a1d835da1d193', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: 'f9ee321259103e88e5b76bb87cca77860e65b2c1', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'ca117ccf3aeaf9876d3fd627762a7696f3f4e1a4' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '244ffcb4f8a336c8deefc69c14688405e1bc23f7', icon: "chevron-down" }))), h("label", { key: 'f01dc78c49881d6c7d88ca39890e70d0e9785559', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'b3bae01d2ed53da52269a63c86fe291cfca76292', class: "dso-date__select" }, h("select", { key: '63bb09515fa036307995ce4812088e0828f50484', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'db7adc0799385cbe2d60f022acdf73e4ca33ed40', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'f3eaddb8cdc45daf9ef8574509bcc415e675dcc2' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'cb415d3468b9f163f4400d820d22e62406eda2d9', icon: "chevron-down" })))), h("div", { key: '7beead2ff31b3c6b6736c11679d12725e9634ff1', class: "dso-date__nav" }, h("button", { key: 'b21c215d623f5243c3d81e327e383bb062af3db8', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'b755c8a2aafd1676ed517dfe6e303fd69337d415', icon: "chevron-left" }), h("span", { key: '77126a760003533cad64ab8d423b9d945f33f24e', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'f17d30a36392a95ef8d8bf7096674c123231ca82', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: 'fdf88a664810c744eb9da6a6bea4343e09a0aef6', icon: "chevron-right" }), h("span", { key: 'cb017e38ad087b2ded215880fe405a915cdd3922', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: 'ae4da41ad13aa21365703e8470485cef9f8dc994', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: '3199841b30d6e8735446f3d67c48300898cb2512', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'aca70d70bfaad605d9b399b58757b795cc6486ad' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: 'd1e2bdb898278c6f6ba6fc3fce3c54bacc4300e6', icon: "chevron-down" }))), h("label", { key: 'e85a464a083d160ebe2da35435d4d6b8e70594e6', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'c9bb89e82bdce8242c5b88a8c0422bb713f4649f', class: "dso-date__select" }, h("select", { key: '8db7da290dddc3c31519e8b62d8593f3c3ae25c9', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '1d6a4dd37a71e6a25167552e54033f8caba5c926', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '53c46f3503fbe521b3363130cef2c0e77c5a76d1' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '646d1d9262090f0d31244f87d9d1e7a992712445', icon: "chevron-down" })))), h("div", { key: '177c07ee02756bf8d2d562d891b85f525fdf0459', class: "dso-date__nav" }, h("button", { key: '1496337177df07d457f0ee15e70c6cfcc95d54f0', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'af2ffd8b999268c0bf001822e5951060054332b0', icon: "chevron-left" }), h("span", { key: 'e3592b7a770f78223cd02a466375fb86b7c34670', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '695b50d73c7ed486cef08b010d77166baaf51545', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '007286ed973be218e37c6161bf2ad686726a632e', icon: "chevron-right" }), h("span", { key: 'c67ebbd7023e2ff3fbae2e06e1f534c8c5507c83', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '9a7f19704f9774f0e915f9180ccfdbdbfe69ff56', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     static get is() { return "dso-date-picker-legacy"; }
     static get encapsulation() { return "scoped"; }