@dso-toolkit/core 66.1.0 → 66.3.0

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

@@ -1,4 +1,4 @@
-import { h, Host, forceUpdate, } from "@stencil/core";
+import { Fragment, h, Host, forceUpdate, } from "@stencil/core";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 const WrapWijzigactie = ({ wijzigactie }, children) => {
     if (wijzigactie === "voegtoe") {
@@ -14,11 +14,14 @@ const WrapWijzigactie = ({ wijzigactie }, children) => {
  * @slot heading - A slot to place the title of the card in.
  * @slot meta - An optional slot to place a `Label` in.
  * @slot content - An optional slot to place `Rich Content` in.
+ * @slot interaction - A slot for the `SlideToggle`s elments.
+ *
  */
 export class PlekinfoCard {
     constructor() {
         this.wijzigactie = undefined;
         this.href = undefined;
+        this.targetBlank = false;
         this.active = undefined;
     }
     connectedCallback() {
@@ -42,9 +45,12 @@ export class PlekinfoCard {
     get metaSlottedElement() {
         return this.host.querySelector("[slot='meta']");
     }
+    get interaction() {
+        return this.host.querySelector("[slot='interaction']");
+    }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '37cd380e9794177ebec616327eabaedbbe5d7fc5', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '349d9142ce7a49ec456b2d2431fe690b31dff7db', wijzigactie: this.wijzigactie }, h("div", { key: '4f7a68e5fbdcdd1cedad76e15949d1073b79d246', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '3fdc691ed1a17ee8d580a3d70cf343e5c115f3c2', name: "symbol" })), h("div", { key: 'b0d118f634389a8eff0ab0997f98ce9badac3ff3', class: "dso-plekinfo-card-heading" }, h("a", { key: 'c7d18df577714e0afe5c62a33be189f4681343c5', href: this.href, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '3d8318ec4f0bf9e0479067a90a990ffbfcb49d53', name: "heading" }), h("dso-icon", { key: 'a1b5beefcd8ffbfc05f41e15a018a1c6fb41e4dd', icon: "chevron-right" })), this.metaSlottedElement !== null && h("slot", { key: 'dfb3867000025ad5aa55e2bccd7257d1ad27d340', name: "meta" })), h("div", { key: 'c1237a91ede9d02c37036383642635db0d5501c9', class: "dso-plekinfo-card-content" }, h("slot", { key: 'f168d9ce668308ec4afe95b6f893de53cecf49d5', name: "content" })))));
+        return (h(Host, { key: 'efed80f420fd0bc102884c5478a6f305a7e921bb', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: 'c03ee95a473b5e4e400f0747f0df75104f775fa6', wijzigactie: this.wijzigactie }, h("div", { key: '49c8426ce24cb280846b0d55aa60755e9fd4e682', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'f81a3ffe0cb84e8e9bc5811ffbce1c5cb835a401', name: "symbol" })), h("div", { key: '3f97fab34dd4fe5b7120c36c3af056cb1d1f0d58', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { name: "heading" }), this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'ca9a2fa82eac6064534dee0347c6524478813ada', name: "meta" }), this.interaction !== null && h("slot", { key: '854cb4902965b2ca2902e5490c669561e0b7f741', name: "interaction" })), h("div", { key: '3eb14cd26135e37d9de933afe33d6e6f5c6b6a02', class: "dso-plekinfo-card-content" }, h("slot", { key: '2b3e8c7a199a1b8d1927918387bbf6c366f5c1aa', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -100,6 +106,24 @@ export class PlekinfoCard {
                 "attribute": "href",
                 "reflect": true
             },
+            "targetBlank": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opens the urls in a new window or tab"
+                },
+                "attribute": "target-blank",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "active": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/plekinfo-card/plekinfo-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"plekinfo-card.js","sourceRoot":"","sources":["../../../../src/components/plekinfo-card/plekinfo-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            <a href={this.href} class=\"heading-anchor\" onClick={(e) => this.clickEventHandler(e)}>\r\n              <slot name=\"heading\" />\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </a>\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"plekinfo-card.js","sourceRoot":"","sources":["../../../../src/components/plekinfo-card/plekinfo-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  Fragment,\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Host,\r\n  Prop,\r\n  forceUpdate,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { PlekinfoCardClickEvent, PlekinfoWijzigactie } from \"./plekinfo-card.interfaces\";\r\n\r\ninterface WrapWijzigactieProps {\r\n  wijzigactie: PlekinfoWijzigactie | undefined;\r\n}\r\n\r\nconst WrapWijzigactie: FunctionalComponent<WrapWijzigactieProps> = ({ wijzigactie }, children) => {\r\n  if (wijzigactie === \"voegtoe\") {\r\n    return <ins class=\"dso-plekinfo-card-container\">{children}</ins>;\r\n  }\r\n\r\n  if (wijzigactie === \"verwijder\") {\r\n    return <del class=\"dso-plekinfo-card-container\">{children}</del>;\r\n  }\r\n\r\n  return <div class=\"dso-plekinfo-card-container\">{children}</div>;\r\n};\r\n\r\n/**\r\n * @slot symbol - An optional slot to place a symbol, representing the plekinfo item, in.\r\n * @slot heading - A slot to place the title of the card in.\r\n * @slot meta - An optional slot to place a `Label` in.\r\n * @slot content - An optional slot to place `Rich Content` in.\r\n * @slot interaction - A slot for the `SlideToggle`s elments.\r\n *\r\n */\r\n@Component({\r\n  tag: \"dso-plekinfo-card\",\r\n  styleUrl: \"plekinfo-card.scss\",\r\n  shadow: true,\r\n})\r\nexport class PlekinfoCard implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPlekinfoCardElement;\r\n\r\n  /**\r\n   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: PlekinfoWijzigactie;\r\n\r\n  /**\r\n   * The URL to which the PlekinfoCard heading links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  href!: string | undefined;\r\n\r\n  /**\r\n   * Opens the urls in a new window or tab\r\n   */\r\n  @Prop()\r\n  targetBlank: boolean = false;\r\n\r\n  /**\r\n   * Makes the PlekinfoCard active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the PlekinfoCard heading is clicked.\r\n   */\r\n  @Event()\r\n  dsoPlekinfoCardClick!: EventEmitter<PlekinfoCardClickEvent>;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    delete this.mutationObserver;\r\n  }\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.href) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoPlekinfoCardClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  get symbolSlottedElement() {\r\n    return this.host.querySelector(\"[slot='symbol']\");\r\n  }\r\n\r\n  get metaSlottedElement() {\r\n    return this.host.querySelector(\"[slot='meta']\");\r\n  }\r\n\r\n  get interaction() {\r\n    return this.host.querySelector(\"[slot='interaction']\");\r\n  }\r\n\r\n  render() {\r\n    const hasSymbol = this.symbolSlottedElement !== null;\r\n\r\n    return (\r\n      <Host has-symbol={hasSymbol}>\r\n        <WrapWijzigactie wijzigactie={this.wijzigactie}>\r\n          <div class=\"dso-plekinfo-card-symbol\" hidden={!hasSymbol}>\r\n            <slot name=\"symbol\" />\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-heading\">\r\n            {this.href ? (\r\n              <a\r\n                href={this.href}\r\n                target={this.targetBlank ? \"_blank\" : undefined}\r\n                rel={this.targetBlank ? \"noopener noreferrer\" : undefined}\r\n                class=\"heading-anchor\"\r\n                onClick={(e) => this.clickEventHandler(e)}\r\n              >\r\n                <slot name=\"heading\" />\r\n                {this.targetBlank ? (\r\n                  <>\r\n                    <dso-icon icon=\"external-link\" />\r\n                    <span class=\"sr-only\">(Opent andere website in nieuw tabblad)</span>\r\n                  </>\r\n                ) : (\r\n                  <dso-icon icon=\"chevron-right\" />\r\n                )}\r\n              </a>\r\n            ) : (\r\n              <slot name=\"heading\" />\r\n            )}\r\n            {this.metaSlottedElement !== null && <slot name=\"meta\" />}\r\n            {this.interaction !== null && <slot name=\"interaction\" />}\r\n          </div>\r\n          <div class=\"dso-plekinfo-card-content\">\r\n            <slot name=\"content\" />\r\n          </div>\r\n        </WrapWijzigactie>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/progress-bar/progress-bar.js

@@ -8,7 +8,7 @@ export class ProgressBar {
     render() {
         const progressNumber = Math.round(this.progress);
         const progressPercentage = `${progressNumber}%`;
-        return (h("div", { key: '6a49ff9babffe7922e2a3a5b545cd3d132e39787', class: "progress" }, h("span", { key: 'e5a05911d83b5ffcc9c9fe800944b30ba74ca19a', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '425b8690e838da624b0436fe6b50fc0383d05cf4', style: { width: `${progressPercentage}` } })), h("span", { key: 'ad1bbcaed9fc43340b1e6a21a7d82ccef0cf4256', id: "progress-bar-label" }, h("slot", { key: '12c73a2b1de830c868f72d9c40b50808958955eb' }))));
+        return (h("div", { key: '8d1ef26a0057600a7c9b04192c56fbe033ff7964', class: "progress" }, h("span", { key: '3a3040f35495aae0197dcb7603302adf6aa37db0', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: '52807607101891d339fad53d0941aa9e271ffed0', style: { width: `${progressPercentage}` } })), h("span", { key: '886f755e1baddc370fdf5799bd73e9b92787a99c', id: "progress-bar-label" }, h("slot", { key: 'f0461d69044d89438d78186c7db8e3e0ad07ec12' }))));
     }
     static get is() { return "dso-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.i18n.js

@@ -0,0 +1,13 @@
+export const translations = {
+    en: {
+        "dso-progress-indicator": {
+            label: "Loading results. Please wait...",
+        },
+    },
+    nl: {
+        "dso-progress-indicator": {
+            label: "Resultaten laden: een moment geduld alstublieft.",
+        },
+    },
+};
+//# sourceMappingURL=progress-indicator.i18n.js.map

package/dist/collection/components/progress-indicator/progress-indicator.i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.i18n.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.i18n.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,iCAAiC;SACzC;KACF;IACD,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,kDAAkD;SAC1D;KACF;CACF,CAAC","sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Loading results. Please wait...\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n    },\r\n  },\r\n};\r\n"]}

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -1,12 +1,15 @@
 import { h, Host } from "@stencil/core";
+import { i18n } from "../../utils/i18n";
+import { translations } from "./progress-indicator.i18n";
 export class Progressindicator {
     constructor() {
-        this.label = "Resultaten laden: een moment geduld alstublieft.";
+        this.text = i18n(() => this.host, translations);
+        this.label = undefined;
         this.size = undefined;
         this.block = undefined;
     }
     render() {
-        return (h(Host, { key: '883509272d723b8104ffbcb476d6ba9007104088' }, h("span", { key: '27bc8c852af735c19e928e5bf07ca856f26846ae', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '21d86cd9a6573926b376e4e478945477ea191776', icon: "spinner" })), h("span", { key: '2957362f7e96d955310de9821f7744e88892324c', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+        return (h(Host, { key: '75ddf7c5f5d586c3576016b9c975d54c01d7f9b1' }, h("span", { key: '831ba2d4732b96a49d83e9183f6f55d9f3351d46', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '5161aa447c3e04ece65a209b7182db3171b31e4a', icon: "spinner" })), h("span", { key: '253cd708ad62cdd73aa57e3959f773a557df2c5a', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -27,18 +30,17 @@ export class Progressindicator {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The label of the Progress Indicator."
                 },
                 "attribute": "label",
-                "reflect": false,
-                "defaultValue": "\"Resultaten laden: een moment geduld alstublieft.\""
+                "reflect": false
             },
             "size": {
                 "type": "string",
@@ -76,5 +78,6 @@ export class Progressindicator {
             }
         };
     }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=progress-indicator.js.map

package/dist/collection/components/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;qBAKpB,kDAAkD;;;;IAgB1D,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;gBACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B;YACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          <dso-icon icon=\"spinner\"></dso-icon>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;QAwBpB,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;;;IAEnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;gBACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B;YACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  @Element()\r\n  host!: HTMLDsoProgressIndicatorElement;\r\n\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          <dso-icon icon=\"spinner\"></dso-icon>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label || this.text(\"label\")}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/project-item/project-item.js

@@ -4,7 +4,7 @@ export class ProjectItem {
         this.label = undefined;
     }
     render() {
-        return (h(Fragment, null, h("div", { key: '86884445244ba13707f047d729a8b193ee381635', class: "project-item-header" }, h("div", { key: '326f36e6b4765e903f18781a8c465b4741153a50', class: "project-item-title" }, h("slot", { key: 'd48ca3b2801f525970effc4f6c48caf6f467a12c', name: "title" }), this.label && (h("dso-label", { key: '046b005d9a0dcae01c34c6549878fc4205a1f24d', status: "danger", compact: true }, this.label))), h("div", { key: 'f2e5e03cfa19b75fea2e7da0d20a44fb23e28573', class: "project-item-actions" }, h("slot", { key: '939dcd5c9312905143d429ef25acbcb9b71d68dc', name: "actions" }))), h("div", { key: '116ad5128076f3c07d5a7314a6aae6d35c4003b2', class: "project-item-info" }, h("div", { key: 'e827260fe0ddc522827433e26cf8521400f5ca0b', class: "project-item-progress" }, h("slot", { key: '91113a46e216c0fb1a7b27ed997e77ac3e33cfa1', name: "progress" })), h("div", { key: 'bc23f3f23342c7f1285839406cf1a0108d546fdd', class: "project-item-status" }, h("slot", { key: '865229ea9fcf2243778e4e4d52a67941c9cc6604', name: "status" })))));
+        return (h(Fragment, null, h("div", { key: 'b32c96f3ae0a3b156b1f00fd7af9224017f83162', class: "project-item-header" }, h("div", { key: 'c625657f0b8dbc262db30c84492af07c21cb23a3', class: "project-item-title" }, h("slot", { key: '04850d81b1e373c68993c40e26c0a955f6306c9f', name: "title" }), this.label && (h("dso-label", { key: 'a1936df3ee345f56581217d81312f324e383ace5', status: "danger", compact: true }, this.label))), h("div", { key: 'e6548e70221ad64b2a1ab5bbeed28a848d4d1a1c', class: "project-item-actions" }, h("slot", { key: '72da7430b195e6eec765472c1ff6bb0f8f76635c', name: "actions" }))), h("div", { key: 'd28a9d18ea89e64f7ac4fafdbc6d7ccc313fc0e7', class: "project-item-info" }, h("div", { key: '7298f09e13a9a648e88b31468993bcb1de4892f0', class: "project-item-progress" }, h("slot", { key: 'e6593dd6a34963926733dc77148d17d9a20aa481', name: "progress" })), h("div", { key: 'f12eb4f1f9eeb9cbee07d42097b6d3909472bf42', class: "project-item-status" }, h("slot", { key: 'fc868a7759e22495b59ebea7acadf05f3233d6b4', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/renvooi/renvooi.css

@@ -48,6 +48,11 @@ del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-vis
 del {
   text-decoration: line-through;
 }
+@media screen and (min--moz-device-pixel-ratio: 0) {
+  del {
+    font-family: sans-serif;
+  }
+}
 
 :host {
   display: inline;
@@ -57,4 +62,8 @@ del {
 *::after,
 *::before {
   box-sizing: border-box;
+}
+
+.text {
+  text-decoration: var(--_dso-renvooi-text-decoration);
 }

package/dist/collection/components/renvooi/renvooi.js

@@ -1,4 +1,20 @@
 import { Fragment, h } from "@stencil/core";
+const RenvooiRender = ({ value }) => {
+    if (typeof value === "string" || !value) {
+        // This element is used for --_dso-renvooi-text-decoration
+        return h("span", { class: "text" }, value);
+    }
+    if (Array.isArray(value)) {
+        return (h(Fragment, null, value.map((v, i, { length }) => (h(Fragment, null, h(RenvooiRender, { value: v }), i < length - 1 ? ", " : "")))));
+    }
+    if ("toegevoegd" in value) {
+        return h("ins", null, value.toegevoegd);
+    }
+    if ("verwijderd" in value) {
+        return h("del", null, value.verwijderd);
+    }
+    return (h(Fragment, null, h("del", null, value.was), " ", h("ins", null, value.wordt)));
+};
 /**
  * Met dit component kan een `RenvooiValue` worden gepresenteerd.
  */
@@ -7,20 +23,7 @@ export class Renvooi {
         this.value = undefined;
     }
     render() {
-        const { value } = this;
-        if (typeof value === "string" || !value) {
-            return value;
-        }
-        if (Array.isArray(value)) {
-            return (h(Fragment, null, value.map((v, i, { length }) => (h(Fragment, null, h("dso-renvooi", { value: v }), i < length - 1 ? ", " : "")))));
-        }
-        if ("toegevoegd" in value) {
-            return h("ins", null, value.toegevoegd);
-        }
-        if ("verwijderd" in value) {
-            return h("del", null, value.verwijderd);
-        }
-        return (h(Fragment, null, h("del", null, value.was), " ", h("ins", null, value.wordt)));
+        return h(RenvooiRender, { key: '4836bbc37493b1229cdb048e32705220b5537f6b', value: this.value });
     }
     static get is() { return "dso-renvooi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/renvooi/renvooi.js.map

@@ -1 +1 @@
-{"version":3,"file":"renvooi.js","sourceRoot":"","sources":["../../../../src/components/renvooi/renvooi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,QAAQ,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIjF;;GAEG;AAMH,MAAM,OAAO,OAAO;;;;IAOlB,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAEvB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACxC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CACL,kBACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC/B;gBACE,mBAAa,KAAK,EAAE,CAAC,GAAI;gBACxB,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAC1B,CACJ,CAAC,CACD,CACJ,CAAC;QACJ,CAAC;QAED,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;YAC1B,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;QACvC,CAAC;QAED,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;YAC1B,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;QACvC,CAAC;QAED,OAAO,CACL;YACE,eAAM,KAAK,CAAC,GAAG,CAAO;;YAAC,eAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    const { value } = this;\r\n\r\n    if (typeof value === \"string\" || !value) {\r\n      return value;\r\n    }\r\n\r\n    if (Array.isArray(value)) {\r\n      return (\r\n        <>\r\n          {value.map((v, i, { length }) => (\r\n            <>\r\n              <dso-renvooi value={v} />\r\n              {i < length - 1 ? \", \" : \"\"}\r\n            </>\r\n          ))}\r\n        </>\r\n      );\r\n    }\r\n\r\n    if (\"toegevoegd\" in value) {\r\n      return <ins>{value.toegevoegd}</ins>;\r\n    }\r\n\r\n    if (\"verwijderd\" in value) {\r\n      return <del>{value.verwijderd}</del>;\r\n    }\r\n\r\n    return (\r\n      <>\r\n        <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"renvooi.js","sourceRoot":"","sources":["../../../../src/components/renvooi/renvooi.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,QAAQ,EAAuB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQtG,MAAM,aAAa,GAA4C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3E,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QACxC,0DAA0D;QAC1D,OAAO,YAAM,KAAK,EAAC,MAAM,IAAE,KAAK,CAAQ,CAAC;IAC3C,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,CACL,kBACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC/B;YACE,EAAC,aAAa,IAAC,KAAK,EAAE,CAAC,GAAI;YAC1B,CAAC,GAAG,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAC1B,CACJ,CAAC,CACD,CACJ,CAAC;IACJ,CAAC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;QAC1B,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;IACvC,CAAC;IAED,IAAI,YAAY,IAAI,KAAK,EAAE,CAAC;QAC1B,OAAO,eAAM,KAAK,CAAC,UAAU,CAAO,CAAC;IACvC,CAAC;IAED,OAAO,CACL;QACE,eAAM,KAAK,CAAC,GAAG,CAAO;;QAAC,eAAM,KAAK,CAAC,KAAK,CAAO,CAC9C,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AAMH,MAAM,OAAO,OAAO;;;;IAOlB,MAAM;QACJ,OAAO,EAAC,aAAa,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;IAC9C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Fragment, FunctionalComponent, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"./renvooi.interfaces\";\r\n\r\ninterface RenvooiRenderProps {\r\n  value: RenvooiValue | RenvooiValue[] | undefined;\r\n}\r\n\r\nconst RenvooiRender: FunctionalComponent<RenvooiRenderProps> = ({ value }) => {\r\n  if (typeof value === \"string\" || !value) {\r\n    // This element is used for --_dso-renvooi-text-decoration\r\n    return <span class=\"text\">{value}</span>;\r\n  }\r\n\r\n  if (Array.isArray(value)) {\r\n    return (\r\n      <>\r\n        {value.map((v, i, { length }) => (\r\n          <>\r\n            <RenvooiRender value={v} />\r\n            {i < length - 1 ? \", \" : \"\"}\r\n          </>\r\n        ))}\r\n      </>\r\n    );\r\n  }\r\n\r\n  if (\"toegevoegd\" in value) {\r\n    return <ins>{value.toegevoegd}</ins>;\r\n  }\r\n\r\n  if (\"verwijderd\" in value) {\r\n    return <del>{value.verwijderd}</del>;\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <del>{value.was}</del> <ins>{value.wordt}</ins>\r\n    </>\r\n  );\r\n};\r\n\r\n/**\r\n * Met dit component kan een `RenvooiValue` worden gepresenteerd.\r\n */\r\n@Component({\r\n  tag: \"dso-renvooi\",\r\n  styleUrl: \"renvooi.scss\",\r\n  shadow: true,\r\n})\r\nexport class Renvooi implements ComponentInterface {\r\n  /**\r\n   * The renvooi value to render.\r\n   */\r\n  @Prop()\r\n  value?: RenvooiValue | RenvooiValue[];\r\n\r\n  render() {\r\n    return <RenvooiRender value={this.value} />;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/responsive-element/responsive-element.js

@@ -40,7 +40,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '7df8a0107dec10534a1ee68c12b0718675ca37d0', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '376cdb5c8b4b349877b7289b9bb5b0ae597620b6' })));
+        return (h(Host, { key: '457b1983ff925174c7e41bc11ef3f1b69f98b860', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'f560e834ad9dc5c4391acf73e5f14e0339338a60' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scrollable/scrollable.js

@@ -81,9 +81,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'ff6794620912d49f124f4bac4222fd278dbd6b29', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '532d8178bd3755a10e3d3adbe582c8dfa894347a', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'f22043000a8ff7139ff85d33868f1f022988c137', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '2f747885e20a59f2012ca7abb0d78540ab017c6a', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'ae425415162ffd8d13adae1e42c9e4728106d5d5' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'f55d969307844266f6f8445aa8c3988756d86aa4' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selectable/selectable.js

@@ -63,7 +63,7 @@ export class Selectable {
     render() {
         var _a;
         const hasInfo = !!this.host.querySelector('[slot="info"]');
-        return (h(Fragment, { key: '8eaf459e1b418a9c5eb61c12939aa137b1e9a9b7' }, h("div", { key: 'ecbf02645dd338d6071fb06426662d78649bd8c8', class: "dso-selectable-container" }, h("div", { key: 'c244e0254c468e30c22ec958c6be91e532d77392', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'df920ead7e69f3e136a058cd5ab7953ecad8c707', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'f539a4ea7af6bb4c1412895c2af316b9014d8420', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '69bde115eba8f18261c79886654defb9f0f703f6', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '9d92cccb1adfd77adc579f57281dddc56a2225ba' }, h("slot", { key: '4fee8b038cb69e5321c23502eb6a5dad31c3c9ee', name: "info" })))), h("slot", { key: 'fd69188bb07390259d9ac58f328d3a7c8b42fe12', name: "options" })));
+        return (h(Fragment, { key: 'fa4b6f259cdabb24f0663b252c6a0e759a56ba9d' }, h("div", { key: 'da1e026349a4d3c7a9cf108f46858aaa17a3dd34', class: "dso-selectable-container" }, h("div", { key: '2d17dd9bb4933475c0dd9778de0ccb97a77cbd99', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '4f46deb4c37e9577626af506551cf713214cf2a7', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { key: 'e54d3223fb6a7d07a6b39f14b544bf0dffa5ca86', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: '072933f4b06ef2f3c187b530f4e015f46044bf70', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '2142cbabdf2d970f36144b7d7658587b007d8164' }, h("slot", { key: '0d21b22bb68c34eeba23668633391bd62b7b2c40', name: "info" })))), h("slot", { key: '93ee767f26fb270c7dcc4aaa81ef522c205a386b', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/skiplink/skiplink.css

@@ -0,0 +1,40 @@
+:host {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: 2;
+  display: block;
+  inline-size: 100vw;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+a {
+  position: absolute;
+  inset-inline-start: 50%;
+  inset-block-start: 16px;
+  display: inline-block;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 2px;
+  clip: rect(1px, 1px, 1px, 1px);
+  color: var(--link-color);
+  white-space: nowrap;
+  text-decoration: none;
+  transform: translate(-50%);
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+a:focus-visible {
+  inline-size: auto;
+  block-size: auto;
+  padding: 8px;
+  clip: auto;
+  white-space: normal;
+  outline-offset: 2px;
+}

package/dist/collection/components/skiplink/skiplink.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skiplink.interfaces.js.map

package/dist/collection/components/skiplink/skiplink.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skiplink.interfaces.js","sourceRoot":"","sources":["../../../../src/components/skiplink/skiplink.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface SkiplinkClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the card while holding Ctrl, Alt or other modifiers, or when the card is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}

package/dist/collection/components/skiplink/skiplink.js

@@ -0,0 +1,92 @@
+import { h } from "@stencil/core";
+import { isModifiedEvent } from "../../utils/is-modified-event";
+export class Skiplink {
+    constructor() {
+        this.to = undefined;
+        this.label = undefined;
+    }
+    clickEventHandler(e) {
+        if (!(e.target instanceof HTMLElement) || !this.to) {
+            return;
+        }
+        return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });
+    }
+    render() {
+        return (h("a", { key: 'f2773851b2d0f9838a9323935ab8a108258b8fdb', href: `#${this.to}`, onClick: (e) => this.clickEventHandler(e) }, this.label, h("dso-icon", { key: 'c920fa16fd4c6dac2eee63531c83385a4cee5170', icon: "chevron-right" })));
+    }
+    static get is() { return "dso-skiplink"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["skiplink.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["skiplink.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "to": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The location to which the skiplink links."
+                },
+                "attribute": "to",
+                "reflect": true
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "link text"
+                },
+                "attribute": "label",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoSkiplinkClick",
+                "name": "dsoSkiplinkClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the Skiplink is clicked."
+                },
+                "complexType": {
+                    "original": "SkiplinkClickEvent",
+                    "resolved": "SkiplinkClickEvent",
+                    "references": {
+                        "SkiplinkClickEvent": {
+                            "location": "import",
+                            "path": "./skiplink.interfaces",
+                            "id": "src/components/skiplink/skiplink.interfaces.ts::SkiplinkClickEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=skiplink.js.map

package/dist/collection/components/skiplink/skiplink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skiplink.js","sourceRoot":"","sources":["../../../../src/components/skiplink/skiplink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE5F,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAShE,MAAM,OAAO,QAAQ;;;;;IAmBX,iBAAiB,CAAC,CAAa;QACrC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/F,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0DAAG,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;YAC9D,IAAI,CAAC,KAAK;YACX,iEAAU,IAAI,EAAC,eAAe,GAAY,CACxC,CACL,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { SkiplinkClickEvent } from \"./skiplink.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-skiplink\",\r\n  styleUrl: \"skiplink.scss\",\r\n  shadow: true,\r\n})\r\nexport class Skiplink implements ComponentInterface {\r\n  /**\r\n   * The location to which the skiplink links.\r\n   */\r\n  @Prop({ reflect: true })\r\n  to!: string | undefined;\r\n\r\n  /**\r\n   * link text\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * Emitted when the Skiplink is clicked.\r\n   */\r\n  @Event()\r\n  dsoSkiplinkClick!: EventEmitter<SkiplinkClickEvent>;\r\n\r\n  private clickEventHandler(e: MouseEvent) {\r\n    if (!(e.target instanceof HTMLElement) || !this.to) {\r\n      return;\r\n    }\r\n\r\n    return this.dsoSkiplinkClick.emit({ originalEvent: e, isModifiedEvent: isModifiedEvent(e) });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <a href={`#${this.to}`} onClick={(e) => this.clickEventHandler(e)}>\r\n        {this.label}\r\n        <dso-icon icon=\"chevron-right\"></dso-icon>\r\n      </a>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/utils/i18n.js

@@ -0,0 +1,34 @@
+import i18next from "i18next";
+const DEFAULT_LANG = "nl";
+function getComponentClosestLanguage(element) {
+    const closestLangElement = element.closest("[lang]");
+    if (closestLangElement instanceof HTMLElement) {
+        return closestLangElement.lang || DEFAULT_LANG;
+    }
+    if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {
+        return getComponentClosestLanguage(element.parentNode.host);
+    }
+    if (element.parentElement instanceof HTMLElement) {
+        return getComponentClosestLanguage(element.parentElement);
+    }
+    return DEFAULT_LANG;
+}
+export function i18n(getElement, resources) {
+    const element = getElement();
+    const i18NextInstance = i18next.createInstance();
+    i18NextInstance.init({
+        fallbackLng: DEFAULT_LANG,
+        resources,
+        defaultNS: element.tagName.toLowerCase(),
+    });
+    let detectedLanguage = false;
+    return (key, variables) => {
+        if (!detectedLanguage) {
+            detectedLanguage = true;
+            const language = getComponentClosestLanguage(element);
+            i18NextInstance.changeLanguage(language);
+        }
+        return i18NextInstance.t(key, variables);
+    };
+}
+//# sourceMappingURL=i18n.js.map

package/dist/collection/utils/i18n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.js","sourceRoot":"","sources":["../../../src/utils/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,OAAqB,MAAM,SAAS,CAAC;AAI5C,MAAM,YAAY,GAAG,IAAI,CAAC;AAE1B,SAAS,2BAA2B,CAAC,OAAoB;IACvD,MAAM,kBAAkB,GAAG,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,IAAI,kBAAkB,YAAY,WAAW,EAAE,CAAC;QAC9C,OAAO,kBAAkB,CAAC,IAAI,IAAI,YAAY,CAAC;IACjD,CAAC;IAED,IAAI,OAAO,CAAC,UAAU,YAAY,UAAU,IAAI,OAAO,CAAC,UAAU,CAAC,IAAI,YAAY,WAAW,EAAE,CAAC;QAC/F,OAAO,2BAA2B,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IAC9D,CAAC;IAED,IAAI,OAAO,CAAC,aAAa,YAAY,WAAW,EAAE,CAAC;QACjD,OAAO,2BAA2B,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5D,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC;AAED,MAAM,UAAU,IAAI,CAClB,UAA6B,EAC7B,SAAmB;IAEnB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,eAAe,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IAEjD,eAAe,CAAC,IAAI,CAAC;QACnB,WAAW,EAAE,YAAY;QACzB,SAAS;QACT,SAAS,EAAE,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;KACzC,CAAC,CAAC;IAEH,IAAI,gBAAgB,GAAG,KAAK,CAAC;IAE7B,OAAO,CAAC,GAAW,EAAE,SAAuC,EAAE,EAAE;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACtB,gBAAgB,GAAG,IAAI,CAAC;YAExB,MAAM,QAAQ,GAAG,2BAA2B,CAAC,OAAO,CAAC,CAAC;YACtD,eAAe,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QAC3C,CAAC;QAED,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;IAC3C,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import i18next, { Resource } from \"i18next\";\r\n\r\nexport { Resource };\r\n\r\nconst DEFAULT_LANG = \"nl\";\r\n\r\nfunction getComponentClosestLanguage(element: HTMLElement): string {\r\n  const closestLangElement = element.closest(\"[lang]\");\r\n  if (closestLangElement instanceof HTMLElement) {\r\n    return closestLangElement.lang || DEFAULT_LANG;\r\n  }\r\n\r\n  if (element.parentNode instanceof ShadowRoot && element.parentNode.host instanceof HTMLElement) {\r\n    return getComponentClosestLanguage(element.parentNode.host);\r\n  }\r\n\r\n  if (element.parentElement instanceof HTMLElement) {\r\n    return getComponentClosestLanguage(element.parentElement);\r\n  }\r\n\r\n  return DEFAULT_LANG;\r\n}\r\n\r\nexport function i18n(\r\n  getElement: () => HTMLElement,\r\n  resources: Resource,\r\n): (key: string, variables?: { [key in string]: string }) => string {\r\n  const element = getElement();\r\n  const i18NextInstance = i18next.createInstance();\r\n\r\n  i18NextInstance.init({\r\n    fallbackLng: DEFAULT_LANG,\r\n    resources,\r\n    defaultNS: element.tagName.toLowerCase(),\r\n  });\r\n\r\n  let detectedLanguage = false;\r\n\r\n  return (key: string, variables?: { [key in string]: string }) => {\r\n    if (!detectedLanguage) {\r\n      detectedLanguage = true;\r\n\r\n      const language = getComponentClosestLanguage(element);\r\n      i18NextInstance.changeLanguage(language);\r\n    }\r\n\r\n    return i18NextInstance.t(key, variables);\r\n  };\r\n}\r\n"]}

package/dist/components/alert.js

@@ -1,7 +1,27 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
+import { i as i18n } from './i18n.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
+const translations = {
+    en: {
+        "dso-alert": {
+            success: "Success",
+            info: "Notice",
+            warning: "Warning",
+            error: "Error",
+        },
+    },
+    nl: {
+        "dso-alert": {
+            success: "Gelukt",
+            info: "Opmerking",
+            warning: "Waarschuwing",
+            error: "Fout",
+        },
+    },
+};
+
 const alertCss = ":host{display:block}:host(:not(:first-child)){margin-block-start:24px}:host([compact]:not([compact=false])){position:relative;border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}:host([compact]:not([compact=false]))::before{border-end-start-radius:8px;border-start-start-radius:8px;inset-block-end:0;content:\"\";inset-inline-start:-8px;position:absolute;inset-block-start:0;inline-size:8px}:host([status=success]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([status=success]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([status=success]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([status=success]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([status=success]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([status=success][compact]:not([compact=false]))::before{background-color:#39870c}:host([status=error]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([status=error]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([status=error]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([status=error]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([status=error]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([status=error][compact]:not([compact=false]))::before{background-color:#ce3f51}:host([status=warning]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f8f6cc;border-color:#f8f6cc;color:#191919}:host([status=warning]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([status=warning]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([status=warning]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([status=warning]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([status=warning][compact]:not([compact=false]))::before{background-color:#dcd400}:host([status=info]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e1ecf7;border-color:#e1ecf7;color:#191919}:host([status=info]) a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host([status=info]) a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host([status=info]) a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host([status=info]) a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host([status=info][compact]:not([compact=false]))::before{background-color:#6ca4d9}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.alert{line-height:1.5;margin-block-end:24px;min-block-size:64px;position:relative}@media screen and (min-width: 481px){.alert{padding-block:19px;padding-inline:63px 16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}@media screen and (max-width: 480px){.alert{padding-block:63px 16px;padding-inline:16px}.alert.dso-compact{padding-block:9.5px;padding-inline:16px}}.alert:not(:first-child){margin-block-start:24px}.alert dso-icon{inset-block-start:16px;inset-inline-start:16px;position:absolute;block-size:32px;inline-size:32px}.alert.dso-compact{min-block-size:16px}";
 const DsoAlertStyle0 = alertCss;
 
@@ -10,29 +30,25 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.text = i18n(() => this.host, translations);
         this.status = undefined;
         this.roleAlert = undefined;
         this.compact = undefined;
     }
     render() {
-        const status = Alert.statusMap.get(this.status);
+        const status = this.text(this.status);
         if (!status) {
             throw new Error(`Invalid status ${this.status}`);
         }
-        return (h("div", { key: '9e8d143425ebe44dec1c2eab77bb7b5714af707b', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: 'c7bf738af875c1601343084ea895e4ce17c29f53', icon: "status-" + this.status }), h("span", { key: '244a02419f54832ab7c735b8f011cc37ceb7bcba', class: "sr-only" }, status, ":"), h("slot", { key: '8c99a866fbba23398368da529567f8cf7c737e8a' })));
+        return (h("div", { key: '9844156e479a6ecef5bbddb530ffdfeff06c2ddf', class: clsx("alert", `alert-${this.status}`, { "dso-compact": this.compact }), role: this.roleAlert ? "alert" : undefined }, !this.compact && h("dso-icon", { key: 'fb3d1420f40e5a8c1757c69be1700318465510ce', icon: "status-" + this.status }), h("span", { key: 'd3a8bc0671598269a848bc667ada8325c632c8b8', class: "sr-only" }, status, ":"), h("slot", { key: '40504cb29cdf7dd5af60e570cf9d69a5940dac46' })));
     }
+    get host() { return this; }
     static get style() { return DsoAlertStyle0; }
 }, [1, "dso-alert", {
         "status": [513],
         "roleAlert": [4, "role-alert"],
         "compact": [516]
     }]);
-Alert.statusMap = new Map([
-    ["success", "Gelukt"],
-    ["info", "Opmerking"],
-    ["warning", "Waarschuwing"],
-    ["error", "Fout"],
-]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;