@dso-toolkit/core 51.1.0 → 51.2.0

package/dist/cjs/dso-badge.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ecec64a0.js');
 const clsx_m = require('./clsx.m-b81c6b86.js');
 
-const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";
+const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";
 
 const Badge = class {
   constructor(hostRef) {

package/dist/cjs/dso-label.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-ecec64a0.js');
 const clsx_m = require('./clsx.m-b81c6b86.js');
 
-const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
+const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
 
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;

package/dist/cjs/dso-ozon-content.cjs.entry.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ecec64a0.js');
 const index_esm = require('./index.esm-03a9e0b4.js');
+const v4 = require('./v4-abb5dc0c.js');
 
 function getNodeName(node) {
   if (node instanceof Element) {
@@ -29,6 +30,15 @@ class OzonContentAlNode {
   }
 }
 
+class OzonContentBronNode {
+  constructor() {
+    this.name = "Bron";
+  }
+  render(node, { mapNodeToJsx }) {
+    return index.h("span", { class: "dso-ozon-bron" }, mapNodeToJsx(node.childNodes));
+  }
+}
+
 class OzonContentDocumentNode {
   constructor() {
     this.name = "#document";
@@ -45,15 +55,28 @@ class OzonContentExtRefNode {
   render(node, { mapNodeToJsx }) {
     const href = node.tagName === "ExtIoRef" ? node.getAttribute("href") : node.getAttribute("ref");
     return (index.h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined },
-      index.h("span", { class: "sr-only" }, "opent in nieuw venster"),
+      index.h("span", { class: "sr-only" }, "opent in nieuw venster "),
       mapNodeToJsx(node.childNodes)));
   }
 }
 
+class OzonContentFallbackNode {
+  constructor() {
+    // This name does not match any elements
+    this.name = ["<fallback>"];
+  }
+  render(node, { mapNodeToJsx }) {
+    return index.h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes));
+  }
+}
+
 const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
   return (index.h("span", { class: "figuur-bijschrift" },
     bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud),
-    bron && `${bijschrift ? " " : ""}(bron: ${mapNodeToJsx(bron)})`));
+    bron && (index.h(index.Fragment, null,
+      `${bijschrift ? " " : ""}(bron: `,
+      mapNodeToJsx(bron),
+      ")"))));
 };
 class OzonContentFiguurNode {
   constructor() {
@@ -70,10 +93,10 @@ class OzonContentFiguurNode {
     }
   }
   render(node, { mapNodeToJsx }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const childNodes = Array.from(node.childNodes);
     const titel = (_a = childNodes.find((n) => getNodeName(n) === "Titel")) === null || _a === void 0 ? void 0 : _a.textContent;
-    const bron = (_b = childNodes.find((n) => getNodeName(n) === "Bron")) === null || _b === void 0 ? void 0 : _b.childNodes;
+    const bron = childNodes.find((n) => getNodeName(n) === "Bron");
     const illustratieNode = childNodes.find((n) => getNodeName(n) === "Illustratie");
     const bijschriftNode = childNodes.find((n) => getNodeName(n) === "Bijschrift");
     if (illustratieNode instanceof Element) {
@@ -88,7 +111,7 @@ class OzonContentFiguurNode {
       const bijschrift = bijschriftNode instanceof Element
         ? {
           inhoud: bijschriftNode.childNodes,
-          locatie: (_c = bijschriftNode.getAttribute("locatie")) !== null && _c !== void 0 ? _c : "onder",
+          locatie: (_b = bijschriftNode.getAttribute("locatie")) !== null && _b !== void 0 ? _b : "onder",
         }
         : undefined;
       return (index.h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` },
@@ -97,7 +120,7 @@ class OzonContentFiguurNode {
         index.h("dso-image-overlay", null,
           titel && (index.h("div", { slot: "titel" },
             index.h("span", null, titel))),
-          index.h("img", { src: (_d = illustratie.naam) !== null && _d !== void 0 ? _d : undefined, alt: (_g = (_f = (_e = illustratie.alt) !== null && _e !== void 0 ? _e : titel) !== null && _f !== void 0 ? _f : illustratie.naam) !== null && _g !== void 0 ? _g : undefined, onLoad: (event) => this.onImageLoad(event, Number(illustratie.schaal)) }),
+          index.h("img", { src: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : undefined, onLoad: (event) => this.onImageLoad(event, Number(illustratie.schaal)) }),
           (bijschrift || bron) && (index.h("div", { slot: "bijschrift" },
             index.h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))),
         ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (index.h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
@@ -124,15 +147,6 @@ class OzonContentInlineTekstAfbeeldingNode {
   }
 }
 
-class OzonContentOpschriftNode {
-  constructor() {
-    this.name = "Opschrift";
-  }
-  render(node, { mapNodeToJsx }) {
-    return index.h(index.Fragment, null, mapNodeToJsx(node.childNodes));
-  }
-}
-
 class OzonContentInlineNodes {
   constructor() {
     this.name = ["sub", "sup", "strong", "b", "u", "i", "br"];
@@ -200,6 +214,30 @@ class OzonContentIntRefNode {
   }
 }
 
+class OzonContentLijstNode {
+  constructor() {
+    this.name = "Lijst";
+  }
+  render(node, { mapNodeToJsx }) {
+    var _a;
+    const childNodes = Array.from(node.childNodes);
+    const aanhef = childNodes.find((n) => getNodeName(n) === "Lijstaanhef");
+    const sluiting = childNodes.find((n) => getNodeName(n) === "Lijstsluiting");
+    const listItems = childNodes.filter((n) => getNodeName(n) === "Li");
+    return (index.h("div", { class: "dso-ozon-lijst od-Lijst" },
+      aanhef && mapNodeToJsx(aanhef),
+      index.h("ul", { class: (_a = node.getAttribute("type")) !== null && _a !== void 0 ? _a : "" }, listItems.map((item) => {
+        var _a;
+        const itemNodes = Array.from(item.childNodes);
+        const liNummer = (_a = itemNodes.find((n) => getNodeName(n) === "LiNummer")) === null || _a === void 0 ? void 0 : _a.textContent;
+        return (index.h("li", { class: "od-Li" },
+          liNummer && index.h("span", { class: "od-LiNummer" }, liNummer),
+          mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer"))));
+      })),
+      sluiting && mapNodeToJsx(sluiting)));
+  }
+}
+
 class OzonContentNootNode {
   constructor() {
     this.name = "Noot";
@@ -226,6 +264,15 @@ class OzonContentNootNode {
   }
 }
 
+class OzonContentOpschriftNode {
+  constructor() {
+    this.name = "Opschrift";
+  }
+  render(node, { mapNodeToJsx }) {
+    return index.h(index.Fragment, null, mapNodeToJsx(node.childNodes));
+  }
+}
+
 function mapColspecs(count, nodeList) {
   const elements = Array.from(nodeList);
   const totalWidth = getTotalWidth(elements);
@@ -313,17 +360,20 @@ class OzonContentTableNode {
   constructor() {
     this.name = "table";
     this.handles = ["title", "tgroup", "colspec", "thead", "tbody", "row", "cell"];
+    this.id = v4.v4();
   }
   render(node, context) {
     const { caption, colspecs, headRows, bodyRows } = mapData(node);
+    const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === "Bron");
     return (index.h("dso-table", null,
-      index.h("table", { class: "table dso-table-vertical-lines" },
+      index.h("table", Object.assign({ class: "table dso-table-vertical-lines" }, (bron ? { "aria-describedby": this.id } : {})),
         caption && index.h("caption", null, caption),
         colspecs && index.h(Colgroup, { colspecs: colspecs }),
         headRows.length > 0 && (index.h("thead", null,
           index.h(Rows, { rows: headRows, colspecs: colspecs, context: context }))),
         bodyRows.length > 0 && (index.h("tbody", null,
-          index.h(Rows, { rows: bodyRows, colspecs: colspecs, context: context }))))));
+          index.h(Rows, { rows: bodyRows, colspecs: colspecs, context: context })))),
+      bron && index.h("div", { id: this.id }, context.mapNodeToJsx(bron))));
   }
 }
 
@@ -336,40 +386,6 @@ class OzonContentTextNode {
   }
 }
 
-class OzonContentFallbackNode {
-  constructor() {
-    // This name does not match any elements
-    this.name = ["<fallback>"];
-  }
-  render(node, { mapNodeToJsx }) {
-    return index.h("span", { class: `fallback od-${getNodeName(node)}` }, mapNodeToJsx(node.childNodes));
-  }
-}
-
-class OzonContentLijstNode {
-  constructor() {
-    this.name = "Lijst";
-  }
-  render(node, { mapNodeToJsx }) {
-    var _a;
-    const childNodes = Array.from(node.childNodes);
-    const aanhef = childNodes.find((n) => getNodeName(n) === "Lijstaanhef");
-    const sluiting = childNodes.find((n) => getNodeName(n) === "Lijstsluiting");
-    const listItems = childNodes.filter((n) => getNodeName(n) === "Li");
-    return (index.h("div", { class: "dso-ozon-lijst od-Lijst" },
-      aanhef && mapNodeToJsx(aanhef),
-      index.h("ul", { class: (_a = node.getAttribute("type")) !== null && _a !== void 0 ? _a : "" }, listItems.map((item) => {
-        var _a;
-        const itemNodes = Array.from(item.childNodes);
-        const liNummer = (_a = itemNodes.find((n) => getNodeName(n) === "LiNummer")) === null || _a === void 0 ? void 0 : _a.textContent;
-        return (index.h("li", { class: "od-Li" },
-          liNummer && index.h("span", { class: "od-LiNummer" }, liNummer),
-          mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== "LiNummer"))));
-      })),
-      sluiting && mapNodeToJsx(sluiting)));
-  }
-}
-
 class Mapper {
   constructor() {
     this.mappers = [
@@ -387,6 +403,7 @@ class Mapper {
       new OzonContentIntIoRefNode(),
       new OzonContentFiguurNode(),
       new OzonContentLijstNode(),
+      new OzonContentBronNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {
@@ -444,7 +461,7 @@ class Mapper {
   }
 }
 
-const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n  display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n  display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n  text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n  background-color: transparent;\n  color: #39870c;\n  text-decoration: underline;\n  cursor: pointer;\n  color: #275937;\n  font-weight: 600;\n  text-decoration: none;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n  color: #676cb0;\n  text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n  text-decoration: none;\n}\n\n[interactive=sub].sc-dso-ozon-content-h {\n  color: #191919;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n  outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n  outline: 0;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n  color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n  color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content svg.di.di-chevron-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-chevron-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-up.sc-dso-ozon-content {\n  margin-left: 4px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-left].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-right].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-up.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-left].sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-right].sc-dso-ozon-content {\n  margin-left: 0;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n  vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n  display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n  display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n  font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  display: inline;\n}\n\n.od-Al.sc-dso-ozon-content {\n  margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n  border-bottom: 1px dotted;\n}\n\n.dso-ozon-figuur.sc-dso-ozon-content {\n  margin-bottom: 16px;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n}\n.dso-ozon-figuur.bijschrift-boven.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-bottom: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-top: 0.25rem;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-titel.sc-dso-ozon-content {\n  color: #8b4a6a;\n  display: block;\n  font-weight: 500;\n  padding-bottom: 0.5rem;\n}\n\n.dso-ozon-lijst.sc-dso-ozon-content span.od-Lijstaanhef.sc-dso-ozon-content, .dso-ozon-lijst.sc-dso-ozon-content span.od-Lijstsluiting.sc-dso-ozon-content {\n  margin-bottom: 1rem;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content {\n  list-style: none;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content > .od-Li.sc-dso-ozon-content {\n  position: relative;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content > .od-Li.sc-dso-ozon-content > span.od-LiNummer.sc-dso-ozon-content {\n  position: absolute;\n  left: -44px;\n  text-align: right;\n  width: 40px;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n  font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n  border: 1px solid #e5e5e5;\n  margin-bottom: 1rem;\n  padding: 1rem;\n}";
+const ozonContentCss = ".sc-dso-ozon-content-h:not([inline]) {\n  display: block;\n}\n\n[inline].sc-dso-ozon-content-h {\n  display: inline;\n}\n\n[deleted].sc-dso-ozon-content-h *.sc-dso-ozon-content {\n  text-decoration: line-through !important;\n}\n\n[interactive].sc-dso-ozon-content-h {\n  background-color: transparent;\n  color: #39870c;\n  text-decoration: underline;\n  cursor: pointer;\n  color: #275937;\n  font-weight: 600;\n  text-decoration: none;\n}\n[interactive].sc-dso-ozon-content-h:hover, [interactive].sc-dso-ozon-content-h:focus {\n  color: #676cb0;\n  text-decoration: underline;\n}\n[interactive].sc-dso-ozon-content-h:active {\n  text-decoration: none;\n}\n\n[interactive=sub].sc-dso-ozon-content-h {\n  color: #191919;\n}\n\n.deleted-start.sc-dso-ozon-content, .deleted-end.sc-dso-ozon-content {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nbutton.toggle-note.sc-dso-ozon-content {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\nbutton.toggle-note.sc-dso-ozon-content:focus, button.toggle-note.sc-dso-ozon-content:focus-visible {\n  outline-offset: 2px;\n}\nbutton.toggle-note.sc-dso-ozon-content:active {\n  outline: 0;\n}\nbutton.toggle-note[disabled].sc-dso-ozon-content {\n  color: #afcf9d;\n}\nbutton.toggle-note[disabled].dso-spinner-left.sc-dso-ozon-content, button.toggle-note[disabled].dso-spinner-right.sc-dso-ozon-content {\n  color: #39870c;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):hover {\n  color: #676cb0;\n  text-decoration: underline;\n  text-underline-position: under;\n}\nbutton.toggle-note.sc-dso-ozon-content:not([disabled]):active {\n  color: #676cb0;\n}\nbutton.toggle-note.btn-align.sc-dso-ozon-content {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\nbutton.toggle-note.dso-spinner-left.sc-dso-ozon-content::before {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\nbutton.toggle-note.dso-spinner-right.sc-dso-ozon-content::after {\n  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\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.sc-dso-ozon-content {\n  margin-left: 8px;\n}\nbutton.toggle-note.sc-dso-ozon-content svg.di.di-chevron-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-chevron-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-chevron-up.sc-dso-ozon-content {\n  margin-left: 4px;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-left].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content dso-icon[icon=chevron-right].sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-down.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content svg.di.di-angle-up.sc-dso-ozon-content + span.sc-dso-ozon-content:not(.sr-only), button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-down.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + svg.di.di-angle-up.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-left].sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content:not(.sr-only) + dso-icon[icon=chevron-right].sc-dso-ozon-content {\n  margin-left: 0;\n}\nbutton.toggle-note.sc-dso-ozon-content dso-icon.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content svg.di.sc-dso-ozon-content, button.toggle-note.sc-dso-ozon-content span.sc-dso-ozon-content {\n  vertical-align: middle;\n}\n\nspan[role=section].sc-dso-ozon-content, span[role=paragraph].sc-dso-ozon-content {\n  display: block;\n}\n\n.fallback.sc-dso-ozon-content {\n  display: block;\n}\n\n.od-Term.sc-dso-ozon-content {\n  font-weight: 700;\n}\n\n.od-Definitie.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  font-style: italic;\n}\n\n.od-Inhoud.sc-dso-ozon-content, .od-Inhoud.sc-dso-ozon-content > .od-Lijst.sc-dso-ozon-content, .od-IntIoRef.sc-dso-ozon-content, .od-Lidnr.sc-dso-ozon-content, .od-LiNr.sc-dso-ozon-content, .od-Opschrift.sc-dso-ozon-content, .od-Tussenkop.sc-dso-ozon-content {\n  display: inline;\n}\n\n.od-Al.sc-dso-ozon-content {\n  margin-bottom: 0.75em;\n}\n\n.od-IntIoRef.sc-dso-ozon-content {\n  border-bottom: 1px dotted;\n}\n\n.dso-ozon-bron.sc-dso-ozon-content {\n  font-style: italic;\n  font-size: 0.75rem;\n}\n\n.dso-ozon-figuur.sc-dso-ozon-content {\n  margin-bottom: 16px;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  display: block;\n  font-size: 0.75rem;\n  font-style: italic;\n}\n.dso-ozon-figuur.bijschrift-boven.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-bottom: 0.25rem;\n}\n.dso-ozon-figuur.bijschrift-onder.sc-dso-ozon-content .figuur-bijschrift.sc-dso-ozon-content {\n  padding-top: 0.25rem;\n}\n.dso-ozon-figuur.sc-dso-ozon-content .figuur-titel.sc-dso-ozon-content {\n  color: #8b4a6a;\n  display: block;\n  font-weight: 500;\n  padding-bottom: 0.5rem;\n}\n\n.dso-ozon-lijst.sc-dso-ozon-content span.od-Lijstaanhef.sc-dso-ozon-content, .dso-ozon-lijst.sc-dso-ozon-content span.od-Lijstsluiting.sc-dso-ozon-content {\n  margin-bottom: 1rem;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content {\n  list-style: none;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content > .od-Li.sc-dso-ozon-content {\n  position: relative;\n}\n.dso-ozon-lijst.sc-dso-ozon-content ul.expliciet.sc-dso-ozon-content > .od-Li.sc-dso-ozon-content > span.od-LiNummer.sc-dso-ozon-content {\n  position: absolute;\n  left: -44px;\n  text-align: right;\n  width: 40px;\n}\n\n.od-Tabel.sc-dso-ozon-content thead.sc-dso-ozon-content {\n  font-weight: 600;\n}\n\n.od-Kadertekst.sc-dso-ozon-content {\n  border: 1px solid #e5e5e5;\n  margin-bottom: 1rem;\n  padding: 1rem;\n}";
 
 const OzonContent = class {
   constructor(hostRef) {

package/dist/collection/components/badge/badge.css

@@ -56,6 +56,11 @@
   border-color: #ce3f51;
   color: #fff;
 }
+.dso-badge.badge-error {
+  background-color: #ce3f51;
+  border-color: #ce3f51;
+  color: #fff;
+}
 .dso-badge.badge-outline {
   background-color: #fff;
   border-color: #191919;

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

@@ -25,8 +25,8 @@ export class Badge {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"outline\"",
-          "resolved": "\"danger\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\"",
+          "resolved": "\"danger\" | \"error\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
           "references": {}
         },
         "required": false,

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

@@ -25,8 +25,8 @@ export class Banner {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"warning\" | \"danger\"",
-          "resolved": "\"danger\" | \"warning\"",
+          "original": "\"warning\" | \"danger\" | \"error\"",
+          "resolved": "\"danger\" | \"error\" | \"warning\"",
           "references": {}
         },
         "required": true,

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

@@ -78,6 +78,10 @@
   background-color: #ce3f51;
   color: #fff;
 }
+.dso-label.dso-label-error {
+  background-color: #ce3f51;
+  color: #fff;
+}
 .dso-label.dso-label-bright {
   background-color: #fff;
   color: #191919;

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

@@ -144,8 +144,8 @@ export class Label {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"bright\"",
-          "resolved": "\"bright\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\"",
+          "resolved": "\"bright\" | \"danger\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ozon-content/nodes/bron.node.js

@@ -0,0 +1,9 @@
+import { h } from "@stencil/core";
+export class OzonContentBronNode {
+  constructor() {
+    this.name = "Bron";
+  }
+  render(node, { mapNodeToJsx }) {
+    return h("span", { class: "dso-ozon-bron" }, mapNodeToJsx(node.childNodes));
+  }
+}

package/dist/collection/components/ozon-content/nodes/ext-ref.node.js

@@ -5,6 +5,6 @@ export class OzonContentExtRefNode {
   }
   render(node, { mapNodeToJsx }) {
     const href = node.tagName === "ExtIoRef" ? node.getAttribute("href") : node.getAttribute("ref");
-    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined }, h("span", { class: "sr-only" }, "opent in nieuw venster"), mapNodeToJsx(node.childNodes)));
+    return (h("a", { target: "_blank", rel: "noopener noreferrer", href: href !== null && href !== void 0 ? href : undefined }, h("span", { class: "sr-only" }, "opent in nieuw venster "), mapNodeToJsx(node.childNodes)));
   }
 }

package/dist/collection/components/ozon-content/nodes/figuur.node.js

@@ -1,7 +1,7 @@
-import { h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { getNodeName } from "../get-node-name.function";
 const Bijschrift = ({ bijschrift, bron, mapNodeToJsx }) => {
-  return (h("span", { class: "figuur-bijschrift" }, bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud), bron && `${bijschrift ? " " : ""}(bron: ${mapNodeToJsx(bron)})`));
+  return (h("span", { class: "figuur-bijschrift" }, bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud), bron && (h(Fragment, null, `${bijschrift ? " " : ""}(bron: `, mapNodeToJsx(bron), ")"))));
 };
 export class OzonContentFiguurNode {
   constructor() {
@@ -18,10 +18,10 @@ export class OzonContentFiguurNode {
     }
   }
   render(node, { mapNodeToJsx }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f;
     const childNodes = Array.from(node.childNodes);
     const titel = (_a = childNodes.find((n) => getNodeName(n) === "Titel")) === null || _a === void 0 ? void 0 : _a.textContent;
-    const bron = (_b = childNodes.find((n) => getNodeName(n) === "Bron")) === null || _b === void 0 ? void 0 : _b.childNodes;
+    const bron = childNodes.find((n) => getNodeName(n) === "Bron");
     const illustratieNode = childNodes.find((n) => getNodeName(n) === "Illustratie");
     const bijschriftNode = childNodes.find((n) => getNodeName(n) === "Bijschrift");
     if (illustratieNode instanceof Element) {
@@ -36,10 +36,10 @@ export class OzonContentFiguurNode {
       const bijschrift = bijschriftNode instanceof Element
         ? {
           inhoud: bijschriftNode.childNodes,
-          locatie: (_c = bijschriftNode.getAttribute("locatie")) !== null && _c !== void 0 ? _c : "onder",
+          locatie: (_b = bijschriftNode.getAttribute("locatie")) !== null && _b !== void 0 ? _b : "onder",
         }
         : undefined;
-      return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` }, titel && h("span", { class: "figuur-titel" }, titel), (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", null, titel && (h("div", { slot: "titel" }, h("span", null, titel))), h("img", { src: (_d = illustratie.naam) !== null && _d !== void 0 ? _d : undefined, alt: (_g = (_f = (_e = illustratie.alt) !== null && _e !== void 0 ? _e : titel) !== null && _f !== void 0 ? _f : illustratie.naam) !== null && _g !== void 0 ? _g : undefined, onLoad: (event) => this.onImageLoad(event, Number(illustratie.schaal)) }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))), ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
+      return (h("div", { class: `dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : "onder"}` }, titel && h("span", { class: "figuur-titel" }, titel), (bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "boven" && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })), h("dso-image-overlay", null, titel && (h("div", { slot: "titel" }, h("span", null, titel))), h("img", { src: (_c = illustratie.naam) !== null && _c !== void 0 ? _c : undefined, alt: (_f = (_e = (_d = illustratie.alt) !== null && _d !== void 0 ? _d : titel) !== null && _e !== void 0 ? _e : illustratie.naam) !== null && _f !== void 0 ? _f : undefined, onLoad: (event) => this.onImageLoad(event, Number(illustratie.schaal)) }), (bijschrift || bron) && (h("div", { slot: "bijschrift" }, h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx })))), ((bijschrift === null || bijschrift === void 0 ? void 0 : bijschrift.locatie) === "onder" || (!bijschrift && bron)) && (h(Bijschrift, { bijschrift: bijschrift, bron: bron, mapNodeToJsx: mapNodeToJsx }))));
     }
   }
 }

package/dist/collection/components/ozon-content/nodes/table.node/table.node.js

@@ -1,4 +1,6 @@
 import { h } from "@stencil/core";
+import { v4 as uuidv4 } from "uuid";
+import { getNodeName } from "../../get-node-name.function";
 import { mapColspecs } from "./colspec/colspec-mapper";
 import { Colgroup } from "./table-colgroup";
 import { Rows } from "./table-rows";
@@ -18,9 +20,11 @@ export class OzonContentTableNode {
   constructor() {
     this.name = "table";
     this.handles = ["title", "tgroup", "colspec", "thead", "tbody", "row", "cell"];
+    this.id = uuidv4();
   }
   render(node, context) {
     const { caption, colspecs, headRows, bodyRows } = mapData(node);
-    return (h("dso-table", null, h("table", { class: "table dso-table-vertical-lines" }, caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context }))))));
+    const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === "Bron");
+    return (h("dso-table", null, h("table", Object.assign({ class: "table dso-table-vertical-lines" }, (bron ? { "aria-describedby": this.id } : {})), caption && h("caption", null, caption), colspecs && h(Colgroup, { colspecs: colspecs }), headRows.length > 0 && (h("thead", null, h(Rows, { rows: headRows, colspecs: colspecs, context: context }))), bodyRows.length > 0 && (h("tbody", null, h(Rows, { rows: bodyRows, colspecs: colspecs, context: context })))), bron && h("div", { id: this.id }, context.mapNodeToJsx(bron))));
   }
 }

package/dist/collection/components/ozon-content/ozon-content-mapper.js

@@ -1,20 +1,21 @@
 import { Fragment, h } from "@stencil/core";
+import { getNodeName } from "./get-node-name.function";
 import { OzonContentAlNode } from "./nodes/al.node";
+import { OzonContentBronNode } from "./nodes/bron.node";
 import { OzonContentDocumentNode } from "./nodes/document.node";
 import { OzonContentExtRefNode } from "./nodes/ext-ref.node";
+import { OzonContentFallbackNode } from "./nodes/fallback.node";
 import { OzonContentFiguurNode } from "./nodes/figuur.node";
 import { OzonContentInhoudNode } from "./nodes/inhoud.node";
 import { OzonContentInlineTekstAfbeeldingNode } from "./nodes/inline-tekst-afbeelding.node";
-import { OzonContentOpschriftNode } from "./nodes/opschrift.node";
 import { OzonContentInlineNodes } from "./nodes/inline.nodes";
 import { OzonContentIntIoRefNode } from "./nodes/int-io-ref.node";
 import { OzonContentIntRefNode } from "./nodes/int-ref.node";
+import { OzonContentLijstNode } from "./nodes/lijst.node";
 import { OzonContentNootNode } from "./nodes/noot.node";
+import { OzonContentOpschriftNode } from "./nodes/opschrift.node";
 import { OzonContentTableNode } from "./nodes/table.node";
 import { OzonContentTextNode } from "./nodes/text.node";
-import { getNodeName } from "./get-node-name.function";
-import { OzonContentFallbackNode } from "./nodes/fallback.node";
-import { OzonContentLijstNode } from "./nodes/lijst.node";
 export class Mapper {
   constructor() {
     this.mappers = [
@@ -32,6 +33,7 @@ export class Mapper {
       new OzonContentIntIoRefNode(),
       new OzonContentFiguurNode(),
       new OzonContentLijstNode(),
+      new OzonContentBronNode(),
     ];
     this.skip = this.mappers.reduce((t, m) => {
       if (m.handles) {

package/dist/collection/components/ozon-content/ozon-content.css

@@ -168,6 +168,11 @@ span[role=paragraph] {
   border-bottom: 1px dotted;
 }
 
+.dso-ozon-bron {
+  font-style: italic;
+  font-size: 0.75rem;
+}
+
 .dso-ozon-figuur {
   margin-bottom: 16px;
 }

package/dist/components/dso-badge.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
 
-const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";
+const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#191919}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}";
 
 const Badge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/dso-label.js

@@ -3,7 +3,7 @@ import { c as clsx } from './clsx.m.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
+const labelCss = ":host{display:inline-block;max-width:100%}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-label{background-color:#f2f2f2;border-radius:4px;color:#191919;display:inline-block;line-height:1.5;max-width:100%}.dso-label:not(.dso-label-bright){padding:4px 8px}.dso-label:focus-within,.dso-label.dso-hover{text-decoration:line-through}.dso-label button{background:none;border:0;border-radius:0 4px 4px 0;color:inherit;float:right;font-size:1rem;margin-bottom:-4px;margin-left:8px;margin-right:-4px;margin-top:0;padding:0}.dso-label button:hover{cursor:pointer}.dso-label button>dso-icon,.dso-label button>svg.di{display:block}.dso-label.dso-compact{border:0;padding:0 8px}.dso-label.dso-label-info{background-color:#6ca4d9;color:#191919}.dso-label.dso-label-primary{background-color:#275937;color:#fff}.dso-label.dso-label-success{background-color:#39870c;color:#fff}.dso-label.dso-label-warning{background-color:#dcd400;color:#191919}.dso-label.dso-label-danger{background-color:#ce3f51;color:#fff}.dso-label.dso-label-error{background-color:#ce3f51;color:#fff}.dso-label.dso-label-bright{background-color:#fff;color:#191919;border:1px solid #ccc;padding:3px 7px}.dso-label.dso-hover .dso-label-content{text-decoration:line-through}.dso-truncate.dso-label-content{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}:host([removable]) .dso-truncate.dso-label-content{max-width:calc(100% - 28px)}";
 
 function hasEllipses(el) {
   return el.scrollWidth > el.clientWidth;