@dso-toolkit/core 51.2.1 → 51.3.0

package/dist/components/dso-annotation-output.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoAnnotationOutput extends Components.DsoAnnotationOutput, HTMLElement {}
+export const DsoAnnotationOutput: {
+  prototype: DsoAnnotationOutput;
+  new (): DsoAnnotationOutput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-annotation-output.js

@@ -0,0 +1,69 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { A as AnnotationService } from './annotation.service.js';
+import { d as defineCustomElement$4 } from './expandable.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './responsive-element.js';
+
+const annotationOutputCss = "*,*::after,*::before{box-sizing:border-box}dso-annotation-output{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-annotation-header{align-items:center;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}.dso-annotation-header>*[slot=title]{color:#000;font-size:1.25rem;margin-bottom:0;margin-top:0}.dso-annotation-header>*:nth-child(2){margin-left:auto}dso-responsive-element[small] .dso-annotation-header,dso-responsive-element[medium] .dso-annotation-header{display:grid;row-gap:8px}dso-responsive-element[small] .dso-annotation-header *[slot=title],dso-responsive-element[medium] .dso-annotation-header *[slot=title]{grid-row:1;grid-column:1}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}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;text-align:end}.dso-annotation-content{background-color:#f2f2f2;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-close-button{margin-left:32px}.dso-annotation-prefix{font-style:italic}";
+
+const AnnotationOutput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dsoToggle = createEvent(this, "dsoToggle", 7);
+    this.identifier = undefined;
+    this.annotationPrefix = undefined;
+  }
+  async toggleAnnotation(e, identifier) {
+    AnnotationService.toggle(identifier);
+    this.dsoToggle.emit({
+      originalEvent: e,
+      open: AnnotationService.state[this.identifier],
+    });
+  }
+  toggleHandler(e) {
+    this.toggleAnnotation(e, this.identifier);
+  }
+  render() {
+    const expandableProperties = AnnotationService.state[this.identifier] ? { open: true } : {};
+    return (h("dso-responsive-element", null, h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), this.annotationPrefix && h("span", { class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { class: "dso-annotation-header" }, h("slot", { name: "title" }), h("slot", { name: "addons" }), h("button", { type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: (e) => this.toggleHandler(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Toelichting sluiten"))), h("div", { class: "dso-annotation-content" }, h("slot", null)))));
+  }
+  static get style() { return annotationOutputCss; }
+}, [4, "dso-annotation-output", {
+    "identifier": [1],
+    "annotationPrefix": [1, "annotation-prefix"],
+    "toggleAnnotation": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-annotation-output", "dso-expandable", "dso-icon", "dso-responsive-element"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-annotation-output":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AnnotationOutput);
+      }
+      break;
+    case "dso-expandable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-responsive-element":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoAnnotationOutput = AnnotationOutput;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoAnnotationOutput, defineCustomElement };

package/dist/components/dso-autosuggest.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index2.js';
+import { d as debounce_1 } from './index3.js';
 import { d as defineCustomElement$2 } from './progress-indicator.js';
 import { v as v4 } from './v4.js';
 

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-error{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}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
 
 const Badge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/dso-card.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
 import { i as isModifiedEvent } from './is-modified-event.js';
 
 const isInteractiveElement = (element) => {
@@ -8,7 +9,7 @@ const isInteractiveElement = (element) => {
     element.tagName.startsWith("DSO-TOGGLETIP"));
 };
 
-const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}";
+const cardCss = ":host .dso-card-selectable,:host .dso-card-image{grid-row:span 2}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host .dso-card-heading{align-items:center;display:flex;margin-bottom:8px}@media screen and (max-width: 480px){:host .dso-card-heading{flex-wrap:wrap}}:host .dso-card-image{margin-right:8px}";
 
 const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -18,9 +19,10 @@ const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.dsoCardClicked = createEvent(this, "dsoCardClicked", 7);
     this.isSelectable = false;
     this.hasImage = false;
+    this.clickable = true;
   }
   clickEventHandler(e) {
-    if (!(e.target instanceof HTMLElement)) {
+    if (!(e.target instanceof HTMLElement) || !this.clickable) {
       return;
     }
     let element = e.target;
@@ -42,13 +44,14 @@ const Card = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.hasImage = this.host.querySelector("*[slot = 'image']") !== null;
   }
   render() {
-    return (h(Host, { onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
+    return (h(Host, { class: clsx({ "dso-not-clickable": !this.clickable }), onClick: (e) => this.clickEventHandler(e) }, h("div", { class: "dso-card-selectable", hidden: !this.isSelectable }, h("slot", { name: "selectable" })), h("div", { class: "dso-card-image", hidden: !this.hasImage }, h("slot", { name: "image" })), h("div", { class: "dso-card-heading" }, h("slot", { name: "heading" }), h("slot", { name: "interactions" })), h("div", { class: "dso-card-content" }, h("slot", { name: "content" }))));
   }
   get host() { return this; }
   static get style() { return cardCss; }
 }, [1, "dso-card", {
     "isSelectable": [516, "is-selectable"],
-    "hasImage": [516, "has-image"]
+    "hasImage": [516, "has-image"],
+    "clickable": [4]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/dso-expandable-heading.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoExpandableHeading extends Components.DsoExpandableHeading, HTMLElement {}
+export const DsoExpandableHeading: {
+  prototype: DsoExpandableHeading;
+  new (): DsoExpandableHeading;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-expandable-heading.js

@@ -0,0 +1,77 @@
+import { h, proxyCustomElement, HTMLElement, createEvent, Fragment } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as defineCustomElement$3 } from './expandable.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { v as v4 } from './v4.js';
+
+const Heading = ({ heading, ref, className }, children) => {
+  switch (heading) {
+    default:
+    case "h2":
+      return (h("h2", { ref: ref, class: className }, children));
+    case "h3":
+      return (h("h3", { ref: ref, class: className }, children));
+    case "h4":
+      return (h("h4", { ref: ref, class: className }, children));
+    case "h5":
+      return (h("h5", { ref: ref, class: className }, children));
+    case "h6":
+      return (h("h6", { ref: ref, class: className }, children));
+  }
+};
+
+const expandableHeadingCss = "h1,.h1,h2,.h2,h3,.h3{margin-bottom:16px;margin-top:24px}h1,.h1{line-height:1.25}h1{color:#275937;font-size:2rem;font-weight:700}h2,.h2{line-height:1.33}h2{color:#275937;font-size:1.5rem;font-weight:700}h3,.h3{line-height:1.2}h3{color:#275937;font-size:1.25rem;font-weight:600}h4,.h4,h5,.h5,h6,.h6{margin-bottom:16px;margin-top:12px}h4,.h4{line-height:1.5}h4{color:#275937;font-size:1rem;font-weight:600}h5,.h5{line-height:1.5}h5{color:#191919;font-size:1rem;font-weight:600}h6,.h6{line-height:1.5}:host{display: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}.expandable-heading{align-items:center;display:flex;margin-bottom:8px;margin-top:8px}.expandable-heading h2,.expandable-heading h3,.expandable-heading h4,.expandable-heading h5,.expandable-heading h6{font-size:1rem;margin-bottom:0;margin-right:8px;margin-top:0}.expandable-heading button{align-items:flex-start;cursor:pointer;background-color:transparent;border:0;color:inherit;display:flex;line-height:24px;font-size:inherit;font-weight:inherit;padding:0;text-align:left}.expandable-heading button>dso-icon{flex-shrink:0}.expandable-heading.dso-expandable-heading-black button{color:#000}dso-expandable{padding-left:24px}.addons-end{display:inline-block;margin-left:auto}";
+
+const ExpandableHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoToggle = createEvent(this, "dsoToggle", 7);
+    this.identifier = v4();
+    this.open = undefined;
+    this.heading = "h2";
+    this.color = "default";
+  }
+  toggle(e) {
+    this.open = !this.open;
+    this.dsoToggle.emit({ originalEvent: e, open: this.open });
+  }
+  render() {
+    const expandableProperties = this.open ? { open: true } : {};
+    return (h(Fragment, null, h("div", { class: clsx("expandable-heading", this.color === "black" ? "dso-expandable-heading-black" : "") }, h(Heading, { heading: this.heading }, h("button", { type: "button", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.identifier, onClick: (e) => this.toggle(e) }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), h("slot", { name: "title" }))), h("slot", { name: "addons-start" }), h("div", { class: "addons-end" }, h("slot", { name: "addons-end" }))), h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("slot", null))));
+  }
+  static get style() { return expandableHeadingCss; }
+}, [1, "dso-expandable-heading", {
+    "open": [4],
+    "heading": [1],
+    "color": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-expandable-heading", "dso-expandable", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-expandable-heading":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ExpandableHeading);
+      }
+      break;
+    case "dso-expandable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const DsoExpandableHeading = ExpandableHeading;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoExpandableHeading, defineCustomElement };

package/dist/components/dso-expandable.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoExpandable extends Components.DsoExpandable, HTMLElement {}
+export const DsoExpandable: {
+  prototype: DsoExpandable;
+  new (): DsoExpandable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-expandable.js

@@ -0,0 +1,6 @@
+import { E as Expandable, d as defineCustomElement$1 } from './expandable.js';
+
+const DsoExpandable = Expandable;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoExpandable, defineCustomElement };

package/dist/components/dso-header.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.m.js';
-import { d as debounce_1 } from './index2.js';
+import { d as debounce_1 } from './index3.js';
 import { i as isModifiedEvent } from './is-modified-event.js';
 import { d as defineCustomElement$3 } from './dropdown-menu.js';
 import { d as defineCustomElement$2 } from './icon.js';

package/dist/components/dso-image-overlay.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index2.js';
+import { d as debounce_1 } from './index3.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
@@ -13,7 +13,6 @@ const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.titelSlot = null;
     this.bijschriftSlot = null;
     this.active = false;
-    this.focused = false;
     this.zoomable = false;
   }
   loadListener(event) {
@@ -74,7 +73,7 @@ const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   render() {
     var _a;
     const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
-    return (h(Host, { tabindex: this.focused || !this.zoomable ? -1 : 0, onFocus: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
+    return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
   }
   componentDidRender() {
     var _a, _b;
@@ -101,7 +100,6 @@ const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return imageOverlayCss; }
 }, [1, "dso-image-overlay", {
     "active": [32],
-    "focused": [32],
     "zoomable": [32]
   }, [[2, "load", "loadListener"]]]);
 function defineCustomElement$1() {

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-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)}";
+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%;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-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;outline:1px solid #ccc;outline-offset:-1px}.dso-label.dso-label-attention{background-color:#8b4a6a;color:#fff}.dso-label.dso-compact{padding:0 8px}.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;
@@ -99,7 +99,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         "dso-hover": this.removeHover || this.removeFocus,
       }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
-      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : -1, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   get host() { return this; }
   static get watchers() { return {

package/dist/components/dso-table.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as debounce_1 } from './index2.js';
+import { d as debounce_1 } from './index3.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { v as v4 } from './v4.js';

package/dist/components/expandable.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const expandableCss = ":host{display:none}:host([open]){display: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}";
+
+const Expandable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.open = undefined;
+  }
+  render() {
+    return (h(Host, { "aria-hidden": this.open ? "false" : "true" }, h("slot", null)));
+  }
+  static get style() { return expandableCss; }
+}, [1, "dso-expandable", {
+    "open": [516]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-expandable"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-expandable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Expandable);
+      }
+      break;
+  } });
+}
+
+export { Expandable as E, defineCustomElement as d };

package/dist/components/index.d.ts

@@ -2,6 +2,8 @@
 export { Accordion as DsoAccordion } from '../types/components/accordion/accordion';
 export { AccordionSection as DsoAccordionSection } from '../types/components/accordion/components/accordion-section';
 export { Alert as DsoAlert } from '../types/components/alert/alert';
+export { AnnotationButton as DsoAnnotationButton } from '../types/components/annotation-button/annotation-button';
+export { AnnotationOutput as DsoAnnotationOutput } from '../types/components/annotation-output/annotation-output';
 export { AttachmentsCounter as DsoAttachmentsCounter } from '../types/components/attachments-counter/attachments-counter';
 export { Autosuggest as DsoAutosuggest } from '../types/components/autosuggest/autosuggest';
 export { Badge as DsoBadge } from '../types/components/badge/badge';
@@ -10,6 +12,8 @@ export { Card as DsoCard } from '../types/components/card/card';
 export { CardContainer as DsoCardContainer } from '../types/components/card-container/card-container';
 export { DsoDatePicker as DsoDatePicker } from '../types/components/date-picker/date-picker';
 export { DropdownMenu as DsoDropdownMenu } from '../types/components/dropdown-menu/dropdown-menu';
+export { Expandable as DsoExpandable } from '../types/components/expandable/expandable';
+export { ExpandableHeading as DsoExpandableHeading } from '../types/components/expandable-heading/expandable-heading';
 export { Header as DsoHeader } from '../types/components/header/header';
 export { HelpcenterPanel as DsoHelpcenterPanel } from '../types/components/helpcenter-panel/helpcenter-panel';
 export { HighlightBox as DsoHighlightBox } from '../types/components/highlight-box/highlight-box';

package/dist/components/index.js

@@ -2,6 +2,8 @@ export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client'
 export { DsoAccordion, defineCustomElement as defineCustomElementDsoAccordion } from './dso-accordion.js';
 export { DsoAccordionSection, defineCustomElement as defineCustomElementDsoAccordionSection } from './dso-accordion-section.js';
 export { DsoAlert, defineCustomElement as defineCustomElementDsoAlert } from './dso-alert.js';
+export { DsoAnnotationButton, defineCustomElement as defineCustomElementDsoAnnotationButton } from './dso-annotation-button.js';
+export { DsoAnnotationOutput, defineCustomElement as defineCustomElementDsoAnnotationOutput } from './dso-annotation-output.js';
 export { DsoAttachmentsCounter, defineCustomElement as defineCustomElementDsoAttachmentsCounter } from './dso-attachments-counter.js';
 export { DsoAutosuggest, defineCustomElement as defineCustomElementDsoAutosuggest } from './dso-autosuggest.js';
 export { DsoBadge, defineCustomElement as defineCustomElementDsoBadge } from './dso-badge.js';
@@ -10,6 +12,8 @@ export { DsoCard, defineCustomElement as defineCustomElementDsoCard } from './ds
 export { DsoCardContainer, defineCustomElement as defineCustomElementDsoCardContainer } from './dso-card-container.js';
 export { DsoDatePicker, defineCustomElement as defineCustomElementDsoDatePicker } from './dso-date-picker.js';
 export { DsoDropdownMenu, defineCustomElement as defineCustomElementDsoDropdownMenu } from './dso-dropdown-menu.js';
+export { DsoExpandable, defineCustomElement as defineCustomElementDsoExpandable } from './dso-expandable.js';
+export { DsoExpandableHeading, defineCustomElement as defineCustomElementDsoExpandableHeading } from './dso-expandable-heading.js';
 export { DsoHeader, defineCustomElement as defineCustomElementDsoHeader } from './dso-header.js';
 export { DsoHelpcenterPanel, defineCustomElement as defineCustomElementDsoHelpcenterPanel } from './dso-helpcenter-panel.js';
 export { DsoHighlightBox, defineCustomElement as defineCustomElementDsoHighlightBox } from './dso-highlight-box.js';