@dso-toolkit/core 89.0.0 → 90.1.0

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

@@ -170,8 +170,8 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.label ||
             this.annotated);
-        return (h(Host, { key: '68f4fb252bc7a1657867c8462f02c37acfcfd795', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'dbb571c223fa1ef537e7dea1cdf2e52493fdc5a4', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '461c603eab7110053373f2b5c224dadb9b7a1e11', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '956832b500e8fd2af29a324c6396e87957c08e1a', class: "heading" }, h(Heading, { key: 'd4d1ba7715f0760697ba7b19beedc91a76da1719', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '981740a7b2e5af9a9fbec99c5ac7b8f87b5e98e2', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '71d8c07c0ac6444fb8be558201e0c427259b684f' }, this.notApplicable && h("span", { key: 'e339b003b6603fa435c2ed0fc2cf47d2b67b41e9', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
-            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: '00b0e9074b2d34a39f64b68cb454379345f9e673', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '4c6a480b2c9197c5d8f3479ad747b0533949db18', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'd2dedc1f3fc8e3a05f6a023954876a30f87d4abf' }, h("dso-badge", { key: '3254a799ccfe8325520ee0b34ee1f1e93b27c087', status: this.badgeStatus, "aria-describedby": "badge-description" }, this.badge), this.badgeTooltip && h("dso-tooltip", { key: 'b949264eefb558b54b747083d2540cad06304887', id: "badge-description" }, this.badgeTooltip))), (this.label || this.annotated) && (h("div", { key: '4d3d3681167f76034eb96d30ef3febceb1118567', class: "addons" }, this.label && (h("dso-label", { key: '81d39d5e996b62fd98cc086e2f99ed9e7b5271f8', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '4aaf2a51790cb50355e3bc8eeb08f39c1355f76b', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (h("div", { key: '867c144ed5290d09684622a0f292b69a2d5d99ef', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '40209342743374c35afb80c3627a80bdd9f91f17', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '26a7fedc702cb16941b065a110f05a2eb20e7b63', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '8f7cb218e8cabbc070a6782ca49c215f9802570c', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '0d7ff1c5143320acdccf7b8f4662e661e765acfa', class: "content", part: "_content" }, h(AantekenAlert, { key: '1959a7c591ba1947bc03667450c4e159f5e1ed67', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '702b0bd57cb52ceb8e4e7d34e728d0c41305ed48', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'b4917c7fc168fa02fa7c8d0377c9f351257a36a3', class: "children-container", part: "_children-container" }, h("slot", { key: 'c5ffa83d96e186675aa81fcc14681372e0095e24' }))));
+        return (h(Host, { key: '75dcbca7368045cd53b7e27cdf90d628bcee001f', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'da2ddeab07e97d63e56a162c3e59fa19621ccdc4', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '3446a1aaa160f905fd688c59e592b367c481d22e', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '93824632c4da2f14ed1297d8380ffa09d506a133', class: "heading" }, h(Heading, { key: '561ea113e5e21faefae8e931700fffa7b2e3f9c4', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'ca3c44f6892c33647199a12bfe1723fa96fe94b2', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("div", { key: '5f0dee1f6318250989b6416b528f0ee691b15e96' }, this.notApplicable && h("span", { key: '4f5deb37f489c36debca6f1bd9118311600a0f9b', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "kop")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "kop" }), inline: true, urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })) : (h("span", { class: "alternative-title" }, (!this.mark && this.alternativeTitle) ||
+            (this.mark && this.alternativeTitle && (h(MarkText, { mark: this.mark && ((text) => this.mark?.(text, "alternativeTitle")), text: this.alternativeTitle, emitMarkItemHighlight: (text, elementRef) => this.dsoMarkItemHighlight.emit({ text, elementRef, source: "alternativeTitle" }) }))))), h(AantekenStatus, { key: 'daaf3d399d6a4a44426a8119cccc34ec0059e4d4', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: 'b164005c1fa1c84da064b67ca2e2289b44b09706', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showBadge() && (h(Fragment, { key: 'aa49e8dc800909650e1fe137db3906f76968f089' }, h("dso-badge", { key: 'a5ecffff30ae688e682662dea28c3e6962ad547b', status: this.badgeStatus, label: this.badgeTooltip ? "Toon toelichting" : undefined }, this.badge, this.badgeTooltip && h("div", { key: '97693f3251175f7b477294562c1f7fb6e24e3aea', slot: "toggletip" }, this.badgeTooltip)))), (this.label || this.annotated) && (h("div", { key: '6a61b59fca772c76a020dc95f8076ae7c5258065', class: "addons" }, this.label && (h("dso-label", { key: '725a3f8723f8d0e9167b70ca27a5cca41e9d2526', status: this.labelStatus, compact: true }, this.label)), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: '7233731ed6c706e7bf4e67cc91675b61f0f172d9', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (h("div", { key: '8cd752790ef28f1288ff64cff54faa4071006e24', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: 'ef7a46fceaf809c8e718509e9c1000daadf8c059', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'a6f7888d0cf60e52263c0b34697c8a253af09501', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '0d61835290f970b0f8a6d3afb67904e18319ac10', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: '11e7d016f51027b21b0814897cfefe4407eab65b', class: "content", part: "_content" }, h(AantekenAlert, { key: '39c4d7d9b27768c4525d58c188c0a67e74b8e105', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: 'ffff30b853ebd4575a352f2a33b3c4abed53f18d', content: this._inhoud, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => this.mark?.(text, "inhoud")), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit({ ...e.detail, source: "inhoud" }), urlResolver: this.ozonContentUrlResolver, begripResolver: this.ozonContentBegripResolver, annotated: this.annotated })))), h("div", { key: 'c6ceb32947fe29c1faba90b0b7a5e589d8a14992', class: "children-container", part: "_children-container" }, h("slot", { key: '2c7cf3a68918dfab0bfbd362a1934aca539c2b2f' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }
@@ -203,7 +203,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "heading",
                 "defaultValue": "\"h2\""
             },
@@ -335,7 +335,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "badge"
             },
             "badgeStatus": {
@@ -361,7 +361,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "badge-status"
             },
             "badgeTooltip": {
@@ -380,7 +380,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "badge-tooltip"
             },
             "label": {
@@ -399,7 +399,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label"
             },
             "labelStatus": {
@@ -425,7 +425,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "label-status"
             },
             "annotated": {
@@ -543,12 +543,19 @@ export class DocumentComponent {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "DocumentComponentType | undefined",
+                    "resolved": "\"AANHEF\" | \"AFDELING\" | \"ALGEMENE_TOELICHTING\" | \"ARTIKEL\" | \"ARTIKELGEWIJZE_TOELICHTING\" | \"BEGRIP\" | \"BIJLAGE\" | \"BOEK\" | \"CONDITIE_ARTIKEL\" | \"DEEL\" | \"DIVISIE\" | \"DIVISIETEKST\" | \"HOOFDSTUK\" | \"LICHAAM\" | \"LID\" | \"PARAGRAAF\" | \"SLUITING\" | \"SUBPARAGRAAF\" | \"SUBSUBPARAGRAAF\" | \"TITEL\" | \"TITELDEEL\" | \"TOELICHTING\" | undefined",
+                    "references": {
+                        "DocumentComponentType": {
+                            "location": "import",
+                            "path": "./document-component.interfaces",
+                            "id": "src/components/document-component/document-component.interfaces.ts::DocumentComponentType",
+                            "referenceLocation": "DocumentComponentType"
+                        }
+                    }
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Type of Document Component."

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

@@ -206,7 +206,7 @@ export class DocumentComponentDemo {
     }
     render() {
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '3f41bdd6e8edc176973587904d57b63ed2e76e35', class: "dso-document-components" }, h("div", { key: 'cb4c5ad68081f18ce4216b209fe6e2d4f801a5a6', class: "dso-navbar" }, h("ul", { key: '466d7c0f495bb3c94f239d1a05ecf6dbe3e64fbd', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'e06d0bf9ea919bb770b6273968e98a1dfa78da41', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '8b44ff48fb7765722cb2aed05ef33b01fa894c5e', class: "dso-document-components" }, h("div", { key: '3c21c41664841413f5cdbc4e5d6fecd89f984ded', class: "dso-navbar" }, h("ul", { key: 'd472b6e3fb32b57796520370a6cc5243d7ffe84c', class: "dso-nav dso-nav-sub" }, this.getEmbeddedDocumentComponents(this.response)?.documentComponents?.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'a42283aeb135b57c722e3b7ace64c4029c55369d', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

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

@@ -170,7 +170,7 @@ export class DropdownMenu {
         tabbables[nextIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: '59b1f150f35e5af275cf928d8b776122af646e8b', onFocusout: this.focusOutListener }, h("slot", { key: '5b362762db082f147eefe8db1b53c3e7e8075ee6', name: "toggle" }), h("div", { key: '3fa0dabc6161774c541e69b7784fd1a41273ba14', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '41564bd57e586458088373db77ad8212a1850e44' }))));
+        return (h(Host, { key: '4009f7adfe94fe7e6f5b7394dbe36b6fb87e8c70', onFocusout: this.focusOutListener }, h("slot", { key: '3e1d52f7dbbba3a71d4478df935bf0ff7d59948c', name: "toggle" }), h("div", { key: '19786efe0f950860335807f14ba22037776e965d', popover: "manual", ref: (element) => (this.popoverElement = element) }, h("slot", { key: '63629ebce7b242720ed9b78981137853276ee9b0' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/expandable/expandable.js

@@ -36,10 +36,10 @@ export class Expandable {
         }
     }
     render() {
-        return (h(Host, { key: 'e7bd88066e49adaa9a02370a5765fac3acf48739', "aria-hidden": this.open ? "false" : "true", class: clsx({
+        return (h(Host, { key: '6869b2033d73094b79887006529f5e6f619a0a0b', "aria-hidden": this.open ? "false" : "true", class: clsx({
                 "dso-animate-ready": this.enableAnimation,
                 "dso-hide": this.isClosed,
-            }) }, h("div", { key: '140d1ed105acdf92912c7c2c070ce3f9848324d3', class: "slot-container" }, h("slot", { key: '86f19fa1446977e31fdc897dbe7f8395c05d3073' }))));
+            }) }, h("div", { key: '6fe4be65ca5c8541d3344e4ad7cc79927cf258c0', class: "slot-container" }, h("slot", { key: '345eb3e091414be1afc224eac097f12b9a2562f5' }))));
     }
     static get is() { return "dso-expandable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header.css

@@ -52,7 +52,6 @@
 .dso-header-session .logout .dso-tertiary,
 .dso-header-session .help .dso-tertiary {
   display: flex;
-  gap: 0.5rem;
   cursor: pointer;
   border: 0;
   background-color: transparent;
@@ -235,7 +234,7 @@ dso-dropdown-menu .dso-dropdown-options ul li button {
   text-align: start;
 }
 dso-dropdown-menu .dso-dropdown-options ul li button dso-icon {
-  margin-inline-start: 8px;
+  margin-inline-start: 0;
 }
 dso-dropdown-menu .dso-dropdown-options ul li.dso-active a {
   font-weight: 600;

package/dist/collection/components/header/header.js

@@ -122,14 +122,14 @@ export class Header {
         }
     }
     render() {
-        return (h(Host, { key: '305ef493b091a74d76ed4f4a109c7a2eb025950e', "is-compact": this.isCompact }, h("div", { key: '7b316c39fb646174bcb852cabf823004f47565c7', class: "dso-header" }, h("div", { key: '0939fd1ef3d64f34c44c4177a2d031d1b700a324', class: "logo-container" }, h("slot", { key: '9b417bdb99968e034ea9283cf81206db28a6d4ba', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+        return (h(Host, { key: 'c5dab8e925d9b642a69e0ca2f65d6de1e7012c14', "is-compact": this.isCompact }, h("div", { key: '08c8c495b559546d79ba787bc0408819f8d69ffc', class: "dso-header" }, h("div", { key: 'dd73a4de4f64c7ebefadccb11a9cfc02fbe49e47', class: "logo-container" }, h("slot", { key: '8e65f287778d2e983eaec13a6692f1990506670b', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
     }
     renderCompact() {
-        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))));
+        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })))))))))));
     }
     renderNormal() {
         this.menuItemElementRefs = [];
-        return (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label })))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line", class: "main-menu-item-icon" }), this.text("userHome")))))))));
+        return (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help-outline" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label })))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-outline", class: "main-menu-item-icon" }), this.text("userHome")))))))));
     }
     static get is() { return "dso-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/highlight-box/highlight-box.js

@@ -2,7 +2,7 @@ import { Host, h } from "@stencil/core";
 export class HighlightBox {
     render() {
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '9ed65a845d685ecb62b44ac4df2ee4c57a92d8a4', "has-counter": hasCounter }, hasCounter && h("div", { key: '57392d31cbc22d059e0d037679c06a08ecfff5e8', class: "dso-step-counter" }, this.step ?? h("slot", { key: '044da0d260d9d9257cc4ab0a48622aeba11d2f8d', name: "icon" })), h("slot", { key: '67e1cf3f59845e6451ac20cfbe8003df4089bd8d' })));
+        return (h(Host, { key: '37c8e0a11211e492b1969195f3a4829b756f3191', "has-counter": hasCounter }, hasCounter && h("div", { key: '97dc69885551c40bf8a9578fd062798782c87b37', class: "dso-step-counter" }, this.step ?? h("slot", { key: '8fb89cc0a0a37c0195d0dd1922df73a2978ec086', name: "icon" })), h("slot", { key: '9af4954e7cc681e435b36ac0a8eb524fa4c2031b' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,7 +14,7 @@ export class HistoryItem {
             "in-werking": "document",
             "tijdelijk-regelingdeel": "document",
             "tijdelijk-regelingdeel-besluit": "hammer",
-            waarschuwing: "status-warning-inline",
+            waarschuwing: "status-warning-red-solid",
             besluit: "hammer",
         };
     }
@@ -42,7 +42,7 @@ export class HistoryItem {
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h(Fragment, { key: '8cfda0c27b483a01888f2c81413fc0d90ba2e43b' }, h("div", { key: '456e4002b8f510bf0eea433b75432c2eea2f0544', class: "history-item-date" }, h("slot", { key: '48947f94875b10154f7d039a29fd6b36adfe0bbf', name: "date" })), h("div", { key: '05fa9da1f7908628e1c15fdfa9a7204bea6f4a1f', class: "history-item-content" }, h("div", { key: 'aa31efe35bfcea60d17f0fd5e974c83268eeec40', class: "history-item-status-message" }, h("dso-icon", { key: '513c99028ec6a4f78e3169b8d2b9e5a442de7a1d', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: 'd5fe6da657e7dba4f0209ff7d08ab4934dadb3ba', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '39d8e70b1c49c84c3770a45394653ec43b257211', class: "history-item-title" }, h("a", { key: 'f126b0823432b853e3b921feee1fa7a7bacc0fe3', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6639a69f724c4a6653e723f5ae427ff62b3ba972', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '9f9caab19a09a0de025fca3cc37588c712336f5d', class: "history-item-explanation" }, h("slot", { key: '23179fa7f11c8a5d2b5d8819de2039cae303d7b1', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '321e1f83f4e446689e1cbd93d7e44cd53c6f1b05', class: "history-item-warning" }, h("dso-icon", { key: 'be8d3a9e358e7087f644b56f0045accc2019ce15', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'c65a0e9a11f4954aaa9c5890180a3034d6b9393c', name: "warning" }))))));
+        return (h(Fragment, { key: 'd05fb1b3b74f630c55be5d2206b2de17470f9836' }, h("div", { key: '2220bc35211c7d74074311d4bbe271e2c362cd7d', class: "history-item-date" }, h("slot", { key: '92a7a233908dac9d72ef222a39d702260cc660b1', name: "date" })), h("div", { key: '45909a839a7d2727d8e24b65e28c778f246ec6cc', class: "history-item-content" }, h("div", { key: '3ee1710117fca87d899a5aee3949b4d097df02a0', class: "history-item-status-message" }, h("dso-icon", { key: 'c5895e1c3516cec47dde55c2ec88425a02e2f5a5', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '5b051c37f443ee272a9caf22a1a6a84194220770', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'a15fc4d566a7419b9474cccec5320b44cfbd8be2', class: "history-item-title" }, h("a", { key: '8e2f412d7a43b053b54127a25801230e7e0f9f0b', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: 'f7c0f17a4bb6cdf39023158b5754ccce8c936a62', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: 'edfc85eb17064138c632396dacb827ab78591cd1', class: "history-item-explanation" }, h("slot", { key: 'f89fc4ca79480fc2b8d067cc30aeee0f97a057e7', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: 'ece55196701e4f81b57c33dd105b3b8ffba9d103', class: "history-item-warning" }, h("dso-icon", { key: '6aea77caa1aba4e2e6e6343c09efba8afa857387', icon: "status-warning-red-solid", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'f5300141a66ff1d080576b53604976224cffb636', name: "warning" }))))));
     }
     static get is() { return "dso-history-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/icon/icon.js

@@ -1,32 +1,36 @@
 import { h } from "@stencil/core";
-import air from "dso-toolkit/src/icons/air.svg";
-import angleDown from "dso-toolkit/src/icons/angle-down.svg";
-import angleLeft from "dso-toolkit/src/icons/angle-left.svg";
-import angleRight from "dso-toolkit/src/icons/angle-right.svg";
-import angleUp from "dso-toolkit/src/icons/angle-up.svg";
+// Start: import svg
 import asterisk from "dso-toolkit/src/icons/asterisk.svg";
-import balloon from "dso-toolkit/src/icons/balloon.svg";
+import balloonOutline from "dso-toolkit/src/icons/balloon-outline.svg";
+import balloonSolid from "dso-toolkit/src/icons/balloon-solid.svg";
 import bars from "dso-toolkit/src/icons/bars.svg";
 import bell from "dso-toolkit/src/icons/bell.svg";
 import buildings from "dso-toolkit/src/icons/buildings.svg";
 import calendar from "dso-toolkit/src/icons/calendar.svg";
 import call from "dso-toolkit/src/icons/call.svg";
 import caretDown from "dso-toolkit/src/icons/caret-down.svg";
+import caretUp from "dso-toolkit/src/icons/caret-up.svg";
 import checkCircle from "dso-toolkit/src/icons/check-circle.svg";
 import check from "dso-toolkit/src/icons/check.svg";
+import chevronDownDown from "dso-toolkit/src/icons/chevron-down-down.svg";
+import chevronDownUp from "dso-toolkit/src/icons/chevron-down-up.svg";
 import chevronDown from "dso-toolkit/src/icons/chevron-down.svg";
 import chevronLeft from "dso-toolkit/src/icons/chevron-left.svg";
 import chevronRight from "dso-toolkit/src/icons/chevron-right.svg";
+import chevronUpDown from "dso-toolkit/src/icons/chevron-up-down.svg";
+import chevronUpUp from "dso-toolkit/src/icons/chevron-up-up.svg";
 import chevronUp from "dso-toolkit/src/icons/chevron-up.svg";
 import circleNotch from "dso-toolkit/src/icons/circle-notch.svg";
-import clock from "dso-toolkit/src/icons/clock.svg";
-import copy from "dso-toolkit/src/icons/copy.svg";
+import clockOutline from "dso-toolkit/src/icons/clock-outline.svg";
+import clockSolid from "dso-toolkit/src/icons/clock-solid.svg";
+import copyOutline from "dso-toolkit/src/icons/copy-outline.svg";
+import copySolid from "dso-toolkit/src/icons/copy-solid.svg";
+import cross from "dso-toolkit/src/icons/cross.svg";
 import crown from "dso-toolkit/src/icons/crown.svg";
 import cultural from "dso-toolkit/src/icons/cultural.svg";
 import documentPencil from "dso-toolkit/src/icons/document-pencil.svg";
 import document from "dso-toolkit/src/icons/document.svg";
 import download from "dso-toolkit/src/icons/download.svg";
-import email from "dso-toolkit/src/icons/email.svg";
 import energy from "dso-toolkit/src/icons/energy.svg";
 import environment from "dso-toolkit/src/icons/environment.svg";
 import exclamation from "dso-toolkit/src/icons/exclamation.svg";
@@ -37,49 +41,62 @@ import filter from "dso-toolkit/src/icons/filter.svg";
 import forbidden from "dso-toolkit/src/icons/forbidden.svg";
 import hammer from "dso-toolkit/src/icons/hammer.svg";
 import health from "dso-toolkit/src/icons/health.svg";
-import helpActive from "dso-toolkit/src/icons/help-active.svg";
-import help from "dso-toolkit/src/icons/help.svg";
-import house from "dso-toolkit/src/icons/house.svg";
-import infoActive from "dso-toolkit/src/icons/info-active.svg";
+import helpOutline from "dso-toolkit/src/icons/help-outline.svg";
+import helpSolid from "dso-toolkit/src/icons/help-solid.svg";
+import home from "dso-toolkit/src/icons/home.svg";
 import infoI from "dso-toolkit/src/icons/info-i.svg";
-import info from "dso-toolkit/src/icons/info.svg";
+import infoOutline from "dso-toolkit/src/icons/info-outline.svg";
+import infoSolid from "dso-toolkit/src/icons/info-solid.svg";
 import infrastructure from "dso-toolkit/src/icons/infrastructure.svg";
+import internet from "dso-toolkit/src/icons/internet.svg";
 import label from "dso-toolkit/src/icons/label.svg";
 import land from "dso-toolkit/src/icons/land.svg";
 import landscape from "dso-toolkit/src/icons/landscape.svg";
 import layers from "dso-toolkit/src/icons/layers.svg";
 import lightBulb from "dso-toolkit/src/icons/light-bulb.svg";
-import locationOutline from "dso-toolkit/src/icons/location-outline.svg";
+import locationOrange from "dso-toolkit/src/icons/location-orange.svg";
 import locationSearch from "dso-toolkit/src/icons/location-search.svg";
 import location from "dso-toolkit/src/icons/location.svg";
 import lock from "dso-toolkit/src/icons/lock.svg";
 import magnet from "dso-toolkit/src/icons/magnet.svg";
-import mail from "dso-toolkit/src/icons/mail.svg";
+import mailOutline from "dso-toolkit/src/icons/mail-outline.svg";
+import mailSolid from "dso-toolkit/src/icons/mail-solid.svg";
 import mapLayers from "dso-toolkit/src/icons/map-layers.svg";
 import mapLocation from "dso-toolkit/src/icons/map-location.svg";
+import map from "dso-toolkit/src/icons/map.svg";
 import marker from "dso-toolkit/src/icons/marker.svg";
 import measurement from "dso-toolkit/src/icons/measurement.svg";
-import minusCircle from "dso-toolkit/src/icons/minus-circle.svg";
-import minusSquare from "dso-toolkit/src/icons/minus-square.svg";
+import minusCircleOutline from "dso-toolkit/src/icons/minus-circle-outline.svg";
+import minusCircleSolid from "dso-toolkit/src/icons/minus-circle-solid.svg";
+import minusSquareOutline from "dso-toolkit/src/icons/minus-square-outline.svg";
+import minusSquareSolid from "dso-toolkit/src/icons/minus-square-solid.svg";
 import minus from "dso-toolkit/src/icons/minus.svg";
-import more from "dso-toolkit/src/icons/more.svg";
+import moreHorizontal from "dso-toolkit/src/icons/more-horizontal.svg";
+import moreVertical from "dso-toolkit/src/icons/more-vertical.svg";
 import municipality from "dso-toolkit/src/icons/municipality.svg";
 import nature from "dso-toolkit/src/icons/nature.svg";
 import newWindow from "dso-toolkit/src/icons/new-window.svg";
 import paperclip from "dso-toolkit/src/icons/paperclip.svg";
 import parking from "dso-toolkit/src/icons/parking.svg";
+import pause from "dso-toolkit/src/icons/pause.svg";
 import pencil from "dso-toolkit/src/icons/pencil.svg";
 import pinOutline from "dso-toolkit/src/icons/pin-outline.svg";
 import pin from "dso-toolkit/src/icons/pin.svg";
-import plusCircle from "dso-toolkit/src/icons/plus-circle.svg";
-import plusSquare from "dso-toolkit/src/icons/plus-square.svg";
+import play from "dso-toolkit/src/icons/play.svg";
+import plusCircleOutline from "dso-toolkit/src/icons/plus-circle-outline.svg";
+import plusCircleSolid from "dso-toolkit/src/icons/plus-circle-solid.svg";
+import plusSquareOutline from "dso-toolkit/src/icons/plus-square-outline.svg";
+import plusSquareSolid from "dso-toolkit/src/icons/plus-square-solid.svg";
 import plus from "dso-toolkit/src/icons/plus.svg";
+import postcard from "dso-toolkit/src/icons/postcard.svg";
 import print from "dso-toolkit/src/icons/print.svg";
-import procedures from "dso-toolkit/src/icons/procedures.svg";
+import question from "dso-toolkit/src/icons/question.svg";
 import redo from "dso-toolkit/src/icons/redo.svg";
-import safety from "dso-toolkit/src/icons/safety.svg";
 import scale from "dso-toolkit/src/icons/scale.svg";
 import search from "dso-toolkit/src/icons/search.svg";
+import security from "dso-toolkit/src/icons/security.svg";
+import settings from "dso-toolkit/src/icons/settings.svg";
+import share from "dso-toolkit/src/icons/share.svg";
 import sitemap from "dso-toolkit/src/icons/sitemap.svg";
 import soil from "dso-toolkit/src/icons/soil.svg";
 import sortAscending from "dso-toolkit/src/icons/sort-ascending.svg";
@@ -87,52 +104,59 @@ import sortDescending from "dso-toolkit/src/icons/sort-descending.svg";
 import sort from "dso-toolkit/src/icons/sort.svg";
 import sound from "dso-toolkit/src/icons/sound.svg";
 import spinner from "dso-toolkit/src/icons/spinner.svg";
-import statusDanger from "dso-toolkit/src/icons/status-danger.svg";
 import statusError from "dso-toolkit/src/icons/status-error.svg";
-import statusInfo from "dso-toolkit/src/icons/status-info.svg";
+import statusForbidden from "dso-toolkit/src/icons/status-forbidden.svg";
+import statusInfoOutline from "dso-toolkit/src/icons/status-info-outline.svg";
+import statusInfoSolid from "dso-toolkit/src/icons/status-info-solid.svg";
 import statusSuccess from "dso-toolkit/src/icons/status-success.svg";
-import statusWarningInlineNegative from "dso-toolkit/src/icons/status-warning-inline-negative.svg";
-import statusWarningInline from "dso-toolkit/src/icons/status-warning-inline.svg";
+import statusWarningRedOutline from "dso-toolkit/src/icons/status-warning-red-outline.svg";
+import statusWarningRedSolid from "dso-toolkit/src/icons/status-warning-red-solid.svg";
 import statusWarning from "dso-toolkit/src/icons/status-warning.svg";
-import table from "dso-toolkit/src/icons/table.svg";
-import times from "dso-toolkit/src/icons/times.svg";
+import stop from "dso-toolkit/src/icons/stop.svg";
+import tableOutline from "dso-toolkit/src/icons/table-outline.svg";
+import tableSolid from "dso-toolkit/src/icons/table-solid.svg";
 import toDoList from "dso-toolkit/src/icons/to-do-list.svg";
 import trash from "dso-toolkit/src/icons/trash.svg";
 import undo from "dso-toolkit/src/icons/undo.svg";
-import userLine from "dso-toolkit/src/icons/user-line.svg";
-import user from "dso-toolkit/src/icons/user.svg";
+import userOutline from "dso-toolkit/src/icons/user-outline.svg";
+import userSolid from "dso-toolkit/src/icons/user-solid.svg";
 import users from "dso-toolkit/src/icons/users.svg";
 import water from "dso-toolkit/src/icons/water.svg";
-import wipWip from "dso-toolkit/src/icons/wip-wip.svg";
+import weather from "dso-toolkit/src/icons/weather.svg";
+import wip from "dso-toolkit/src/icons/wip.svg";
 const icons = [
-    { alias: "air", svg: air },
-    { alias: "angle-down", svg: angleDown },
-    { alias: "angle-left", svg: angleLeft },
-    { alias: "angle-right", svg: angleRight },
-    { alias: "angle-up", svg: angleUp },
+    // Start: alias object
     { alias: "asterisk", svg: asterisk },
-    { alias: "balloon", svg: balloon },
+    { alias: "balloon-outline", svg: balloonOutline },
+    { alias: "balloon-solid", svg: balloonSolid },
     { alias: "bars", svg: bars },
     { alias: "bell", svg: bell },
     { alias: "buildings", svg: buildings },
     { alias: "calendar", svg: calendar },
     { alias: "call", svg: call },
     { alias: "caret-down", svg: caretDown },
-    { alias: "check", svg: check },
+    { alias: "caret-up", svg: caretUp },
     { alias: "check-circle", svg: checkCircle },
+    { alias: "check", svg: check },
+    { alias: "chevron-down-down", svg: chevronDownDown },
+    { alias: "chevron-down-up", svg: chevronDownUp },
     { alias: "chevron-down", svg: chevronDown },
     { alias: "chevron-left", svg: chevronLeft },
     { alias: "chevron-right", svg: chevronRight },
+    { alias: "chevron-up-down", svg: chevronUpDown },
+    { alias: "chevron-up-up", svg: chevronUpUp },
     { alias: "chevron-up", svg: chevronUp },
     { alias: "circle-notch", svg: circleNotch },
-    { alias: "clock", svg: clock },
-    { alias: "copy", svg: copy },
+    { alias: "clock-outline", svg: clockOutline },
+    { alias: "clock-solid", svg: clockSolid },
+    { alias: "copy-outline", svg: copyOutline },
+    { alias: "copy-solid", svg: copySolid },
+    { alias: "cross", svg: cross },
     { alias: "crown", svg: crown },
     { alias: "cultural", svg: cultural },
-    { alias: "document", svg: document },
     { alias: "document-pencil", svg: documentPencil },
+    { alias: "document", svg: document },
     { alias: "download", svg: download },
-    { alias: "email", svg: email },
     { alias: "energy", svg: energy },
     { alias: "environment", svg: environment },
     { alias: "exclamation", svg: exclamation },
@@ -143,73 +167,89 @@ const icons = [
     { alias: "forbidden", svg: forbidden },
     { alias: "hammer", svg: hammer },
     { alias: "health", svg: health },
-    { alias: "help-active", svg: helpActive },
-    { alias: "help", svg: help },
-    { alias: "house", svg: house },
-    { alias: "info-active", svg: infoActive },
+    { alias: "help-outline", svg: helpOutline },
+    { alias: "help-solid", svg: helpSolid },
+    { alias: "home", svg: home },
     { alias: "info-i", svg: infoI },
-    { alias: "info", svg: info },
+    { alias: "info-outline", svg: infoOutline },
+    { alias: "info-solid", svg: infoSolid },
     { alias: "infrastructure", svg: infrastructure },
+    { alias: "internet", svg: internet },
     { alias: "label", svg: label },
     { alias: "land", svg: land },
     { alias: "landscape", svg: landscape },
     { alias: "layers", svg: layers },
     { alias: "light-bulb", svg: lightBulb },
-    { alias: "location", svg: location },
-    { alias: "location-outline", svg: locationOutline },
+    { alias: "location-orange", svg: locationOrange },
     { alias: "location-search", svg: locationSearch },
+    { alias: "location", svg: location },
     { alias: "lock", svg: lock },
     { alias: "magnet", svg: magnet },
-    { alias: "mail", svg: mail },
+    { alias: "mail-outline", svg: mailOutline },
+    { alias: "mail-solid", svg: mailSolid },
     { alias: "map-layers", svg: mapLayers },
     { alias: "map-location", svg: mapLocation },
+    { alias: "map", svg: map },
     { alias: "marker", svg: marker },
     { alias: "measurement", svg: measurement },
-    { alias: "minus-circle", svg: minusCircle },
-    { alias: "minus-square", svg: minusSquare },
+    { alias: "minus-circle-outline", svg: minusCircleOutline },
+    { alias: "minus-circle-solid", svg: minusCircleSolid },
+    { alias: "minus-square-outline", svg: minusSquareOutline },
+    { alias: "minus-square-solid", svg: minusSquareSolid },
     { alias: "minus", svg: minus },
-    { alias: "more", svg: more },
+    { alias: "more-horizontal", svg: moreHorizontal },
+    { alias: "more-vertical", svg: moreVertical },
     { alias: "municipality", svg: municipality },
     { alias: "nature", svg: nature },
     { alias: "new-window", svg: newWindow },
     { alias: "paperclip", svg: paperclip },
     { alias: "parking", svg: parking },
+    { alias: "pause", svg: pause },
     { alias: "pencil", svg: pencil },
-    { alias: "pin", svg: pin },
     { alias: "pin-outline", svg: pinOutline },
-    { alias: "plus-circle", svg: plusCircle },
-    { alias: "plus-square", svg: plusSquare },
+    { alias: "pin", svg: pin },
+    { alias: "play", svg: play },
+    { alias: "plus-circle-outline", svg: plusCircleOutline },
+    { alias: "plus-circle-solid", svg: plusCircleSolid },
+    { alias: "plus-square-outline", svg: plusSquareOutline },
+    { alias: "plus-square-solid", svg: plusSquareSolid },
     { alias: "plus", svg: plus },
+    { alias: "postcard", svg: postcard },
     { alias: "print", svg: print },
-    { alias: "procedures", svg: procedures },
-    { alias: "spinner", svg: spinner },
+    { alias: "question", svg: question },
     { alias: "redo", svg: redo },
-    { alias: "safety", svg: safety },
     { alias: "scale", svg: scale },
     { alias: "search", svg: search },
+    { alias: "security", svg: security },
+    { alias: "settings", svg: settings },
+    { alias: "share", svg: share },
     { alias: "sitemap", svg: sitemap },
     { alias: "soil", svg: soil },
     { alias: "sort-ascending", svg: sortAscending },
     { alias: "sort-descending", svg: sortDescending },
     { alias: "sort", svg: sort },
     { alias: "sound", svg: sound },
-    { alias: "status-danger", svg: statusDanger },
+    { alias: "spinner", svg: spinner },
     { alias: "status-error", svg: statusError },
-    { alias: "status-info", svg: statusInfo },
+    { alias: "status-forbidden", svg: statusForbidden },
+    { alias: "status-info-outline", svg: statusInfoOutline },
+    { alias: "status-info-solid", svg: statusInfoSolid },
     { alias: "status-success", svg: statusSuccess },
+    { alias: "status-warning-red-outline", svg: statusWarningRedOutline },
+    { alias: "status-warning-red-solid", svg: statusWarningRedSolid },
     { alias: "status-warning", svg: statusWarning },
-    { alias: "status-warning-inline", svg: statusWarningInline },
-    { alias: "status-warning-inline-negative", svg: statusWarningInlineNegative },
-    { alias: "table", svg: table },
-    { alias: "times", svg: times },
+    { alias: "stop", svg: stop },
+    { alias: "table-outline", svg: tableOutline },
+    { alias: "table-solid", svg: tableSolid },
     { alias: "to-do-list", svg: toDoList },
     { alias: "trash", svg: trash },
     { alias: "undo", svg: undo },
-    { alias: "user-line", svg: userLine },
-    { alias: "user", svg: user },
+    { alias: "user-outline", svg: userOutline },
+    { alias: "user-solid", svg: userSolid },
     { alias: "users", svg: users },
     { alias: "water", svg: water },
-    { alias: "wip-wip", svg: wipWip },
+    { alias: "weather", svg: weather },
+    { alias: "wip", svg: wip },
 ];
 export class Icon {
     render() {
@@ -218,7 +258,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'cfe2b6ff0bb2d810eee4064bf32beebe10d0c118', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '095f4c227b75632d4afd7cabdcf18b8c739c71b9', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }
@@ -239,9 +279,16 @@ export class Icon {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
+                    "original": "IconAlias",
+                    "resolved": "\"asterisk\" | \"balloon-outline\" | \"balloon-solid\" | \"bars\" | \"bell\" | \"buildings\" | \"calendar\" | \"call\" | \"caret-down\" | \"caret-up\" | \"check\" | \"check-circle\" | \"chevron-down\" | \"chevron-down-down\" | \"chevron-down-up\" | \"chevron-left\" | \"chevron-right\" | \"chevron-up\" | \"chevron-up-down\" | \"chevron-up-up\" | \"circle-notch\" | \"clock-outline\" | \"clock-solid\" | \"copy-outline\" | \"copy-solid\" | \"cross\" | \"crown\" | \"cultural\" | \"document\" | \"document-pencil\" | \"download\" | \"energy\" | \"environment\" | \"exclamation\" | \"external-link\" | \"eye\" | \"eye-slash\" | \"filter\" | \"forbidden\" | \"hammer\" | \"health\" | \"help-outline\" | \"help-solid\" | \"home\" | \"info-i\" | \"info-outline\" | \"info-solid\" | \"infrastructure\" | \"internet\" | \"label\" | \"land\" | \"landscape\" | \"layers\" | \"light-bulb\" | \"location\" | \"location-orange\" | \"location-search\" | \"lock\" | \"magnet\" | \"mail-outline\" | \"mail-solid\" | \"map\" | \"map-layers\" | \"map-location\" | \"marker\" | \"measurement\" | \"minus\" | \"minus-circle-outline\" | \"minus-circle-solid\" | \"minus-square-outline\" | \"minus-square-solid\" | \"more-horizontal\" | \"more-vertical\" | \"municipality\" | \"nature\" | \"new-window\" | \"paperclip\" | \"parking\" | \"pause\" | \"pencil\" | \"pin\" | \"pin-outline\" | \"play\" | \"plus\" | \"plus-circle-outline\" | \"plus-circle-solid\" | \"plus-square-outline\" | \"plus-square-solid\" | \"postcard\" | \"print\" | \"question\" | \"redo\" | \"scale\" | \"search\" | \"security\" | \"settings\" | \"share\" | \"sitemap\" | \"soil\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"spinner\" | \"status-error\" | \"status-forbidden\" | \"status-info-outline\" | \"status-info-solid\" | \"status-success\" | \"status-warning\" | \"status-warning-red-outline\" | \"status-warning-red-solid\" | \"stop\" | \"table-outline\" | \"table-solid\" | \"to-do-list\" | \"trash\" | \"undo\" | \"user-outline\" | \"user-solid\" | \"users\" | \"water\" | \"weather\" | \"wip\" | undefined",
+                    "references": {
+                        "IconAlias": {
+                            "location": "import",
+                            "path": "./icon.interfaces",
+                            "id": "src/components/icon/icon.interfaces.ts::IconAlias",
+                            "referenceLocation": "IconAlias"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,