@dso-toolkit/core 62.25.0 → 62.27.0

package/dist/collection/components/document-component/document-component.css

@@ -24,10 +24,10 @@ label.dso-primary {
   display: inline-block;
   font-size: 1em;
   font-weight: 500;
-  margin-bottom: 0;
+  margin-block-end: 0;
   text-decoration: none;
   touch-action: manipulation;
-  text-align: left;
+  text-align: start;
   user-select: none;
   vertical-align: middle;
   background-color: #39870c;
@@ -37,8 +37,9 @@ label.dso-primary {
   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;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -59,7 +60,7 @@ label.dso-primary.extern::after,
 label.dso-primary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-primary:hover,
 button.dso-primary:hover,
@@ -101,20 +102,20 @@ label.dso-primary.dso-small svg.di,
 label.dso-primary.dso-small.extern::after,
 label.dso-primary.dso-small.download::after,
 label.dso-primary.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 a.dso-primary.dso-small.dso-spinner-left::before,
 button.dso-primary.dso-small.dso-spinner-left::before,
 label.dso-primary.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-primary.dso-small.dso-spinner-right::after,
 button.dso-primary.dso-small.dso-spinner-right::after,
 label.dso-primary.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-primary dso-icon,
 a.dso-primary svg.di,
@@ -122,8 +123,8 @@ button.dso-primary dso-icon,
 button.dso-primary svg.di,
 label.dso-primary dso-icon,
 label.dso-primary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 a.dso-primary span + dso-icon,
 a.dso-primary span + svg.di,
@@ -131,8 +132,8 @@ button.dso-primary span + dso-icon,
 button.dso-primary span + svg.di,
 label.dso-primary span + dso-icon,
 label.dso-primary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 a.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],
 button.dso-primary.dso-spinner-left[disabled],
@@ -150,10 +151,10 @@ label.dso-primary.dso-spinner-left::before {
   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;
 }
 a.dso-primary.dso-spinner-right::after,
 button.dso-primary.dso-spinner-right::after,
@@ -162,10 +163,10 @@ label.dso-primary.dso-spinner-right::after {
   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;
 }
 a.dso-primary.download::after,
 button.dso-primary.download::after,
@@ -173,9 +174,9 @@ label.dso-primary.download::after {
   background: url("./dso-icons.svg#img-download-wit") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-primary.extern::after,
 button.dso-primary.extern::after,
@@ -183,9 +184,9 @@ label.dso-primary.extern::after {
   background: url("./dso-icons.svg#img-external-link-wit") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary,
 button.dso-secondary,
@@ -193,10 +194,10 @@ label.dso-secondary {
   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;
@@ -206,8 +207,9 @@ label.dso-secondary {
   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;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -228,7 +230,7 @@ label.dso-secondary.extern::after,
 label.dso-secondary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-secondary:hover,
 button.dso-secondary:hover,
@@ -270,20 +272,20 @@ label.dso-secondary.dso-small svg.di,
 label.dso-secondary.dso-small.extern::after,
 label.dso-secondary.dso-small.download::after,
 label.dso-secondary.dso-small.dso-spinner::before {
-  margin-bottom: -4px;
-  margin-top: -4px;
+  margin-block-end: -4px;
+  margin-block-start: -4px;
 }
 a.dso-secondary.dso-small.dso-spinner-left::before,
 button.dso-secondary.dso-small.dso-spinner-left::before,
 label.dso-secondary.dso-small.dso-spinner-left::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.dso-small.dso-spinner-right::after,
 button.dso-secondary.dso-small.dso-spinner-right::after,
 label.dso-secondary.dso-small.dso-spinner-right::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary dso-icon,
 a.dso-secondary svg.di,
@@ -291,8 +293,8 @@ button.dso-secondary dso-icon,
 button.dso-secondary svg.di,
 label.dso-secondary dso-icon,
 label.dso-secondary svg.di {
-  margin-left: -8px;
-  margin-right: 8px;
+  margin-inline-start: -8px;
+  margin-inline-end: 8px;
 }
 a.dso-secondary span + dso-icon,
 a.dso-secondary span + svg.di,
@@ -300,8 +302,8 @@ button.dso-secondary span + dso-icon,
 button.dso-secondary span + svg.di,
 label.dso-secondary span + dso-icon,
 label.dso-secondary span + svg.di {
-  margin-left: 8px;
-  margin-right: -8px;
+  margin-inline-start: 8px;
+  margin-inline-end: -8px;
 }
 a.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],
 button.dso-secondary.dso-spinner-left[disabled],
@@ -319,10 +321,10 @@ label.dso-secondary.dso-spinner-left::before {
   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;
 }
 a.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]):hover::before,
@@ -331,16 +333,16 @@ label.dso-secondary.dso-spinner-left:not([disabled]):hover::before {
   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;
 }
 a.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
 button.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,
 label.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.dso-spinner-right::after,
 button.dso-secondary.dso-spinner-right::after,
@@ -349,10 +351,10 @@ label.dso-secondary.dso-spinner-right::after {
   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;
 }
 a.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]):hover::after,
@@ -361,16 +363,16 @@ label.dso-secondary.dso-spinner-right:not([disabled]):hover::after {
   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;
 }
 a.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
 button.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,
 label.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {
-  height: 16px;
-  width: 16px;
+  block-size: 16px;
+  inline-size: 16px;
 }
 a.dso-secondary.download::after,
 button.dso-secondary.download::after,
@@ -378,9 +380,9 @@ label.dso-secondary.download::after {
   background: url("./dso-icons.svg#img-download") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary.download:hover::after,
 button.dso-secondary.download:hover::after,
@@ -398,9 +400,9 @@ label.dso-secondary.extern::after {
   background: url("./dso-icons.svg#img-external-link") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-secondary.extern:hover::after,
 button.dso-secondary.extern:hover::after,
@@ -418,10 +420,10 @@ label.dso-tertiary {
   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;
@@ -449,7 +451,7 @@ label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   content: "";
   display: inline-block;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary[disabled],
 button.dso-tertiary[disabled],
@@ -479,13 +481,14 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,
 button.dso-tertiary.dso-truncate,
 label.dso-tertiary.dso-truncate {
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -497,10 +500,10 @@ label.dso-tertiary.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;
 }
 a.dso-tertiary.dso-spinner-right::after,
 button.dso-tertiary.dso-spinner-right::after,
@@ -509,10 +512,10 @@ label.dso-tertiary.dso-spinner-right::after {
   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;
 }
 a.dso-tertiary dso-icon + span:not(.sr-only),
 a.dso-tertiary svg.di + span:not(.sr-only),
@@ -526,7 +529,7 @@ label.dso-tertiary dso-icon + span:not(.sr-only),
 label.dso-tertiary svg.di + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + dso-icon,
 label.dso-tertiary span:not(.sr-only) + svg.di {
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 a.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 a.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
@@ -540,7 +543,7 @@ label.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),
 label.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),
 label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,
 label.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 a.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),
 a.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),
@@ -566,7 +569,7 @@ label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,
 label.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],
 label.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 a.dso-tertiary dso-icon,
 a.dso-tertiary svg.di,
@@ -585,7 +588,7 @@ button.dso-tertiary.download::after,
 label.dso-tertiary.extern::after,
 label.dso-tertiary.download::after {
   position: relative;
-  top: -2px;
+  inset-block-start: -2px;
 }
 a.dso-tertiary.download::after,
 button.dso-tertiary.download::after,
@@ -593,9 +596,9 @@ label.dso-tertiary.download::after {
   background: url("./dso-icons.svg#img-download") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-tertiary.download[disabled]::after,
 button.dso-tertiary.download[disabled]::after,
@@ -615,9 +618,9 @@ label.dso-tertiary.extern::after {
   background: url("./dso-icons.svg#img-external-link") no-repeat;
   background-position: center;
   background-size: cover;
-  height: 24px;
+  block-size: 24px;
   vertical-align: top;
-  width: 24px;
+  inline-size: 24px;
 }
 a.dso-tertiary.extern[disabled]::after,
 button.dso-tertiary.extern[disabled]::after,
@@ -663,13 +666,13 @@ a.dso-tertiary, a.dso-tertiary:visited {
 .dso-tertiary + .dso-primary,
 .dso-tertiary + .dso-secondary,
 .dso-tertiary + .dso-tertiary {
-  margin-left: 16px;
+  margin-inline-start: 16px;
 }
 
 .sr-only {
   position: absolute;
-  width: 1px;
-  height: 1px;
+  inline-size: 1px;
+  block-size: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
@@ -683,14 +686,14 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 
 :host([not-collapsible]:where([wijzigactie=verwijder], [wijzigactie=voegtoe])) {
-  padding-left: 8px;
-  margin-right: 8px;
+  padding-inline-start: 8px;
+  margin-inline-end: 8px;
 }
 
 :host(:where([wijzigactie=verwijder], [wijzigactie=voegtoe])),
 :host(:where([wijzigactie=nieuweContainer], [wijzigactie=verwijderContainer])) .heading-container {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-block-start: 4px;
+  padding-block-end: 4px;
 }
 
 :host([wijzigactie=verwijderContainer]) .heading-container,
@@ -752,17 +755,17 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host([filtered])::before {
   content: "";
-  left: -3px;
+  inset-inline-start: -3px;
   position: absolute;
   display: block;
-  width: 3px;
-  top: 0;
-  bottom: 0;
+  inline-size: 3px;
+  inset-block-start: 0;
+  inset-block-end: 0;
   background-color: #6ca4d9;
 }
 
 :host([open]) .heading-container {
-  margin-bottom: 8px;
+  margin-block-end: 8px;
 }
 
 .recursive-toggle,
@@ -785,10 +788,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 
 :host([not-collapsible]) .heading-container {
-  margin-bottom: 0;
+  margin-block-end: 0;
 }
 :host([not-collapsible]) .editaction-label {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 :host([not-collapsible]) .heading-element {
   color: #000;
@@ -805,7 +808,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
   text-decoration: none;
 }
 :host(:not([not-collapsible])) .editaction-label {
-  margin-left: 24px;
+  margin-inline-start: 24px;
 }
 
 .addons {
@@ -827,10 +830,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 .editaction-label {
   font-style: italic;
-  margin-left: 8px;
+  margin-inline-start: 8px;
 }
 
 .content,
 .heading-container {
-  padding-right: 8px;
+  padding-inline-end: 8px;
 }

package/dist/collection/components/document-component/document-component.js

@@ -73,7 +73,7 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: '9dbd54a67bbf583b2c9db8b159ba709bd1e9111b', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '3f4b58120079753f4cc2c69310e88b76e9f0f2ae', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '75f0d2f067830daa732e3c8e8af6611702312ac8', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'b1f079fbe976495d789cbbf81d5f6afaabe0a5ee', class: "heading" }, h(Heading, { key: '40c631e7cb155734be99c816d3a8411679ae8144', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: 'ea6fe08e091ce6acf6129d451d72e653896de93d', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: 'd97d8e98b27d6c36d604b75ddfdde8d6ceddf79c', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '986060b08f90783a7a5a05549275fd621d3bee25', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '58ffa9527fc168187d5005710f41c5b2996bc803', id: "heading-title" }, this.notApplicable && h("span", { key: '08aff61f4665a09f1271f59a2fe2e594a6bf167e', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: 'ce8285ed0ee76cfde5e6255fdd674ff8356f96bf' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: '6dfc27b8ce553a5d9dfa7fb957c431de7622942d', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: '8052ce5083f0032d7c13e0fc7aded8c68be5b256', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: 'eca112e692e78ac6b2dceabb14eaaa8f3e2ac39b', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '3dd7b71002beb1a2a860960790bbe9d999331189', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '68fc34b5da1558e440ac4edd48249e8e44120c79', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '6aec245dd6d56d9aebd52b89e93f740a02423fbb', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { key: '3eddb2e0766a7f7f48c5c476760e1c4066730604', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { key: '720747bbcaeb1caaf2e944737723361449e8b47d', class: "annotation-container", part: "_annotation-container" }, h("slot", { key: '5ceb1bb029eaf50c7a6d8c689d82aebb066b2b91', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: 'fe5eadfa9fb9b080ab2c611e678c3b3685de5675', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '85075a86cad5db60ac20fa10eb329d66836e063a', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: 'c2805d0679ef7ca5ca87f2e43f1450f568954ee3', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '044236d783f05cc89eb381b44f71920cd33abe25', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: '59f76cb70ed4878b076ede1023347b5092962650', class: "children-container", part: "_children-container" }, h("slot", { key: '911f9a835801979ed3db2f13ae81137d4c13689f' }))));
+        return (h(Host, { key: 'bfb6ee555854e4b5cf73278d24d7008fe6830f25', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'a90998f51f2f93af10a667edab2731d9caca5421', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'd66d044fbe0f5f75b263071d4b2a3cc122d1abc9', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '42483d8c800562b35ad6a76927374370b34be36b', class: "heading" }, h(Heading, { key: 'f9238bedcd71c2ca51ea8fff5c10b253840f68ce', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: 'a43c96ea95b7a9fdafa9632225bb8df51136ed74', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '4f1c732778247ff4e156b6225c3381a78ff4a235', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '341e01ae5d69ad4f78c251cbe49865921da5f56d', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '4dad4090fe0054f3cbf8146069fdd64daaca6ad7', id: "heading-title" }, this.notApplicable && h("span", { key: '37183d391273c8fcf694bfcf57a95f28556abe88', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: 'e970e149aeb3735ddd1fb4299c7a61c2405cbcb1' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: 'b1f1ebeb5dd3efe83326236ac51fa915c26262db', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'd71571572d3071403034541975b2a29aef522ce5', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: '128dbe34a933ee699d00fef842fbe40356b52fc0', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'a4b90bbf0360057ef127c65cc56dd0bc40f1e0f8', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '916b60fd300f8e162620d8172972eb28a3bb1202', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '5e654b7ced1bf120ee164a11c123da58816e1f0d', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { key: '0db088fd3f9e6f9cf88da28c5ebcde644353231a', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { key: '18c677d218b278f1d039e64fe30e1ba8945a7891', class: "annotation-container", part: "_annotation-container" }, h("slot", { key: '5a879818dd41c7fd40db0852269f3a12a4db8ae8', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: '25e96f13592ccb1415e328052393ed1e868e7f1e', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'ca4ee8e1284a6bc6c6fb27634d8f1f86180dedcd', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '577762a1aa10a4654d9748180b8f8a0d7f52ab23', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '8658cf6fb010891db2e60ab33ab792249f949988', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })) })))), h("div", { key: 'bd867aa6ecaf8c164bfc0d2f947f458f39328494', class: "children-container", part: "_children-container" }, h("slot", { key: 'ba82d8cc66f94af76621755131f49b0ed8925683' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/document-component-demo/document-component.demo.css

@@ -1,11 +1,12 @@
 :host {
   display: block;
-  margin: 0 8px;
-  border-left: 1px dashed transparent;
-  border-right: 1px dashed transparent;
+  margin-block: 0;
+  margin-inline: 8px;
+  border-inline-start: 1px dashed transparent;
+  border-inline-end: 1px dashed transparent;
 }
 
 :host([show-canvas]) {
-  border-left: 1px dashed pink;
-  border-right: 1px dashed pink;
+  border-inline-start: 1px dashed pink;
+  border-inline-end: 1px dashed pink;
 }

package/dist/collection/components/document-component-demo/document-component.demo.js

@@ -164,7 +164,7 @@ export class DocumentComponentDemo {
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '72a88e08b7dba5711320033f867992356844faf0', class: "dso-document-components" }, h("div", { key: 'e818c08411681f11a2c03127950fcdb7aed43dfd', class: "dso-navbar" }, h("ul", { key: 'a39cd84e15d36521e51c1d19ccded5b24a504e86', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '8a315805356fa2b3ec5c65681216291a856e9c92', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '339487398b5c24fdd00149a7c6d7a05d8ea8bd62', class: "dso-document-components" }, h("div", { key: '7ff73aeccd8875ab6314201455ef6aeb796a4d4e', class: "dso-navbar" }, h("ul", { key: 'a0f084c3bb26dfdea1ab2c6fa260f728db1bd69e', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '5a0cc3db80919c48c391dc9d64b4e6d15f3186dd', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -208,7 +208,7 @@ export class DropdownMenu {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '77ac6cc50a707d48310edd4224d192d9e8e3cc1b', onFocusout: this.focusOutListener }, h("slot", { key: '3388875ba46e7f5b9711ab3ebdd08daa39e98d22', name: "toggle" }), h("div", { key: '68362bca01cb7f86c6a2e9f760aa5af7a25fcf14', hidden: !this.open }, h("slot", { key: '653ec1ca00468188bf45ef2f6bde361ff8590f56' }))));
+        return (h(Host, { key: '780e049d0f7971387dd4980413cdff233dac637c', onFocusout: this.focusOutListener }, h("slot", { key: '453e8e683a525196ddf717ff8a9f6706c6819975', name: "toggle" }), h("div", { key: '3a891b4d5a05ff25a7c6826f96455d9ffcb2eb01', hidden: !this.open }, h("slot", { key: 'b584d5dbf8776ebcdb4ca23dc572ef367728d0be' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.css

@@ -7,15 +7,17 @@
   overflow: hidden;
 }
 
-:host(:not([enable-animation])) {
+:host(:not([enable-animation])),
+:host([enable-animation=false]) {
   display: none;
 }
 
-:host([open][enable-animation]) {
+:host([open][enable-animation]:not([open=false])) {
   grid-template-rows: 1fr;
 }
 
-:host([open]:not([enable-animation])) {
+:host([open]:not([enable-animation]):not([open=false])),
+:host([open][enable-animation=false]:not([open=false])) {
   display: block;
 }