@dso-toolkit/core 62.25.0 → 62.26.0

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

@@ -7,21 +7,21 @@ dso-annotation-output {
   background-color: #f2f2f2;
   clear: both;
   display: flex;
-  margin-bottom: 2px;
-  margin-top: 8px;
-  padding-left: 16px;
-  padding-right: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  margin-block-end: 2px;
+  margin-block-start: 8px;
+  padding-inline-start: 16px;
+  padding-inline-end: 8px;
+  padding-block-start: 8px;
+  padding-block-end: 8px;
 }
 .dso-annotation-header > [slot=title] {
   color: #000;
   font-size: 1.25rem;
-  margin-bottom: 0;
-  margin-top: 0;
+  margin-block-end: 0;
+  margin-block-start: 0;
 }
 .dso-annotation-header > :nth-child(2) {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 dso-responsive-element[small] .dso-annotation-header,
@@ -38,13 +38,13 @@ dso-responsive-element[small] .dso-annotation-header *[slot=addons],
 dso-responsive-element[medium] .dso-annotation-header *[slot=addons] {
   grid-row: 2;
   grid-column: 1;
-  margin-left: initial;
+  margin-inline-start: initial;
 }
 dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,
 dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button {
   grid-row: 1;
   grid-column: 2;
-  margin-left: 8px;
+  margin-inline-start: 8px;
   text-align: end;
 }
 
@@ -55,10 +55,10 @@ dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-butt
   background-color: #f2f2f2;
   border-color: #f2f2f2;
   color: #191919;
-  padding-left: 16px;
-  padding-right: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-inline-start: 16px;
+  padding-inline-end: 8px;
+  padding-block-start: 8px;
+  padding-block-end: 8px;
 }
 .dso-annotation-content a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -74,7 +74,7 @@ dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-butt
 }
 
 .dso-annotation-close-button {
-  margin-left: 32px;
+  margin-inline-start: 32px;
 }
 
 .dso-annotation-prefix {

package/dist/collection/components/attachments-counter/attachments-counter.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;

package/dist/collection/components/attachments-counter/attachments-counter.js

@@ -4,7 +4,7 @@ export class AttachmentsCounter {
         this.count = undefined;
     }
     render() {
-        return (h("span", { key: '54b3a9b513d57c2ee0aa40d654e365445affd021', class: "dso-attachments" }, this.count, " ", h("span", { key: 'ca1ae3ac9b052e1e4aba77487aa82c91c1d8577c', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '234da788bfb62fce6fa08f6d99fd0fc7a863b5f8', icon: "paperclip" })));
+        return (h("span", { key: '6c0172efe12b76d30a79941c0de5354e6fba5d13', class: "dso-attachments" }, this.count, " ", h("span", { key: '098cc1c6e75dbce12fe21911001f245230520ad5', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: 'aafb92bb71efa0b7ee151c7f2b330586cc31bcda', icon: "paperclip" })));
     }
     static get is() { return "dso-attachments-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/autosuggest/autosuggest.css

@@ -11,24 +11,28 @@ ul,
   border-radius: 4px;
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
   list-style-type: none;
-  margin-top: 2px;
-  padding: 4px 0;
+  margin-block-start: 2px;
+  padding-block: 4px;
+  padding-inline: 0;
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 100%;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inset-block-start: 100%;
   z-index: 200;
 }
 
 .autosuggest-progress-box {
-  padding: 12px 8px;
+  padding-block: 12px;
+  padding-inline: 8px;
 }
 
 ul {
-  padding: 8px 0;
+  padding-block: 8px;
+  padding-inline: 0;
 }
 ul li {
-  padding: 4px 16px;
+  padding-block: 4px;
+  padding-inline: 16px;
 }
 ul li .suggestion-row {
   display: flex;

package/dist/collection/components/autosuggest/autosuggest.js

@@ -283,7 +283,7 @@ export class Autosuggest {
         }, []);
     }
     render() {
-        return (h(Fragment, null, h("slot", { key: '35cf8591164d444dfb2728da5f638ecae1c223a0' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
+        return (h(Fragment, null, h("slot", { key: '25902d545f68c0bc90c42e9fb768e080c1c8a891' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, this.handleMark(suggestion, suggestion.value, "value")), suggestion.type ? (h("span", { class: "type" }, this.handleMark(suggestion, suggestion.type, "type"))) : undefined), suggestion.extras &&
                 this.getChunkedExtras(suggestion.extras).map((chunk, index) => (h("div", { class: "suggestion-row" }, chunk.map((c, i) => (h("span", { class: "extra" }, this.handleMark(suggestion, c, "extra", index * 2 + i))))))))))) ||

package/dist/collection/components/badge/badge.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;
@@ -25,7 +25,7 @@
   display: inline-block;
   font-size: 0.875em;
   line-height: 1;
-  min-width: 1.5rem;
+  min-inline-size: 1.5rem;
   padding: 4px 8px;
   text-align: center;
 }

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

@@ -5,7 +5,7 @@ export class Badge {
         this.status = undefined;
     }
     render() {
-        return (h("span", { key: 'fd6c32075509a81c31f1e21afab9de5aa7e38039', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: 'ad352b0cfe534421fd566277b54c31c2bcaabcf9' })));
+        return (h("span", { key: '8ae2d297040799c18e286b084ed761d3538c23f3', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '08748c51706389028be923917aad1133542cf04b' })));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/banner/banner.js

@@ -7,9 +7,9 @@ export class Banner {
         this.noIcon = true;
     }
     render() {
-        return (h("section", { key: 'b8ca330b6db6505cf178f85cf8f970012b13585d', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: '7b598c5ca499588cfeb894d65864f28adc552c71', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: 'f759d4207e830eb6a420d660b2a40775df7a0573' })));
+            }), role: "alert" }, h("slot", { key: '4ecf1e6d785c3b006a7042245c3f6ae8511a47ad' })));
     }
     static get is() { return "dso-banner"; }
     static get encapsulation() { return "shadow"; }

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,8 +7,8 @@
 
 .dso-date__input {
   display: block;
-  width: 100%;
-  height: 40px;
+  inline-size: 100%;
+  block-size: 40px;
   padding: 6px 14px;
   font-size: 1rem;
   line-height: 1.5;
@@ -56,7 +56,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"; }