@dso-toolkit/core 64.0.0 → 65.0.0

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

@@ -1,12 +1,13 @@
 ins {
   text-decoration: none;
+}
+ins {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
   background-color: #e4f1d4;
   border-color: #e4f1d4;
   color: #191919;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
 }
 ins a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -20,6 +21,9 @@ ins a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
 ins a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+ins {
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
+}
 
 del {
   --link-color: currentColor;
@@ -28,7 +32,6 @@ del {
   background-color: #f5d8dc;
   border-color: #f5d8dc;
   color: #191919;
-  text-decoration: line-through;
 }
 del a:is(.download, .download:hover, .download:focus-visible) {
   background-image: url("./dso-icons.svg#img-download-zwart");
@@ -42,6 +45,9 @@ del a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
 del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: url("./dso-icons.svg#img-email-zwart");
 }
+del {
+  text-decoration: line-through;
+}
 
 :host {
   display: inline;

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: '4d5e917e2e7a46743621de2c38e124b9ddd6821f', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'ff4856f719b596eeb4caab380f22afd386c63ab7' })));
+        return (h(Host, { key: 'da7d53fadbf366d94af9b81a7fbe82d5b841fae6', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '7f5760e962121bb49d6df0bbec7480f8cdca2e0b' })));
     }
     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: 'd9c73f524fa17860c1cad8a0ca960d7db540dbab', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'b2ce5ba340f7907fcb111c0395d7e22324e58237', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'b786c2765a723299a16956239d0a3f2814bdb365', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '32629e90bd713faf99192825f4d5f6b730949724', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '47cf6e7432017040b5e3c5815427f11d10f1b8e8' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: '3d02e6603fb849f9535529ae5143452e0ee0484e' }))));
     }
     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: '91453618df769cca5d2b8b11d0749d27b53f59b1' }, h("div", { key: '517f33fff46189d305568f6e68168831a94c0c57', class: "dso-selectable-container" }, h("div", { key: 'ef669b7497bd52b108d4c877493dbe772d8700a4', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'c6f2aa35044581a2d5f7f43d870ba0ce22424c92', 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: 'b5482b39b6045fcdffb4cd2284f83bd9f554f267', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'e66998b45aa63933b73d0c54eeb3ccbae8246bee', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: '8b2033a0b23d356be3804632698e687310de6ed7' }, h("slot", { key: '411eafba867420af9d581d7af5f35cec59fff133', name: "info" })))), h("slot", { key: 'e1d3855d686c4bc6119f65a76d889f5c2d44dcb6', name: "options" })));
+        return (h(Fragment, { key: '7bc5f9b9e029af047da32ea329ec28ef5a1b9a6e' }, h("div", { key: 'e1d8151cfc4a179c574cdd22f5b8a522433f9896', class: "dso-selectable-container" }, h("div", { key: 'b7089b2e8b02bacaf0485351726d019b2d3faaf3', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: 'bbf2571b7578706abf523f5fc0d66435159b5ab5', 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: 'c03e4642630e5a7dfd902af7389eb8eefedef6f7', active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { key: 'bd49a93be3a86178bb3b3ea6df7744baeb746d3d', id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", { key: 'a34fe7983e523fcb8b07d90bcd3b48a4359abb31' }, h("slot", { key: 'd733610afc9465da63844b0c8430ddde7227fae5', name: "info" })))), h("slot", { key: '7af6229ca414ff808ea348d396f51f6674ba30e1', name: "options" })));
     }
     componentDidRender() {
         if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -19,7 +19,7 @@ export class SlideToggle {
         this.hasVisibleLabel = this.host.querySelector("*") !== null;
     }
     render() {
-        return (h(Fragment, null, h("button", Object.assign({ key: '7ce2d8bf2bb8ba405449eaefc5762cb67a4ac4dc', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: '12e21116b6fc68e0bf49c53496940bd580e6f10b', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: 'aca7818aa5260621fc58279481b312ada6dbddc7', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: 'dfbc32a846cea43c346f10d70076a261db8d5d96', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '9497b94ec12c7629550c95228fc975c9fdd9520c', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: 'b5859b19eb2aaddc36b39bb57874f0ae8bf637fc', htmlFor: this.identifier }, h("slot", { key: 'd98d76eb907c33f5a1bb0427a3fa5d9b2a99b32a' })))));
+        return (h(Fragment, null, h("button", Object.assign({ key: '2a589d57cb3a34fbc7d545ba463eb5dfdc7c8e3b', id: this.identifier, role: "switch", class: "dso-slider", "aria-checked": "" + this.checked, disabled: this.disabled, onClick: (e) => this.handleSwitch(e) }, (this.accessibleLabel ? { "aria-label": this.accessibleLabel } : {}), (this.labelledbyId ? { "aria-labelledby": this.labelledbyId } : {})), h("svg", { key: 'daeae3ad7945cca85dbcfcd0393088c2247d3063', xmlns: "http://www.w3.org/2000/svg", width: "40", height: "20", viewBox: "0 0 40 20" }, h("g", { key: '1dc77f9db7e0c8e8a4118a12dd7e153092fd7c3d', fill: "none", "fill-rule": "evenodd" }, h("rect", { key: '44f1f0491a5e32eea07435b4bb5d2ac5e10e5dc1', width: "40", height: "20", fill: "currentColor", rx: "10" }), h("circle", { key: '4a5c4a0f67804163ae09155e1fa1bad50d7b6202', cy: "10", r: "8", fill: "currentColor" })))), this.hasVisibleLabel && (h("label", { key: '4a68fb9b36dc403cfb3f48614b603a218453454f', htmlFor: this.identifier }, h("slot", { key: 'b41750cfec394016cfd4b9dd75b5ffa8c8dad754' })))));
     }
     static get is() { return "dso-slide-toggle"; }
     static get originalStyleUrls() {

package/dist/collection/components/table/table.css

@@ -30,16 +30,6 @@ label.dso-primary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #39870c;
-  border-color: #39870c;
-  color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
 }
 a.dso-primary:focus, a.dso-primary:focus-visible,
 button.dso-primary:focus,
@@ -62,6 +52,24 @@ label.dso-primary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+a.dso-primary,
+button.dso-primary,
+label.dso-primary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 a.dso-primary:hover,
 button.dso-primary:hover,
 label.dso-primary:hover {
@@ -200,16 +208,6 @@ label.dso-secondary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  background-color: #fff;
-  border-color: #39870c;
-  color: #39870c;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  line-height: 1.5;
-  min-inline-size: 56px;
-  padding-block: 11px;
-  padding-inline: 15px;
 }
 a.dso-secondary:focus, a.dso-secondary:focus-visible,
 button.dso-secondary:focus,
@@ -232,6 +230,24 @@ label.dso-secondary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+a.dso-secondary,
+button.dso-secondary,
+label.dso-secondary {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  line-height: 1.5;
+  min-inline-size: 56px;
+  padding-block: 11px;
+  padding-inline: 15px;
+}
 a.dso-secondary:hover,
 button.dso-secondary:hover,
 label.dso-secondary:hover {
@@ -426,11 +442,6 @@ label.dso-tertiary {
   text-align: start;
   user-select: none;
   vertical-align: middle;
-  border: 0;
-  color: #39870c;
-  line-height: 1;
-  padding: 0;
-  background-color: transparent;
 }
 a.dso-tertiary:focus, a.dso-tertiary:focus-visible,
 button.dso-tertiary:focus,
@@ -453,6 +464,15 @@ label.dso-tertiary.download::after {
   display: inline-block;
   margin-inline-start: 8px;
 }
+a.dso-tertiary,
+button.dso-tertiary,
+label.dso-tertiary {
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+}
 a.dso-tertiary[disabled],
 button.dso-tertiary[disabled],
 label.dso-tertiary[disabled] {
@@ -734,14 +754,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   border: 0;
   text-align: center;
 }
-:host .dso-modal > .dso-dialog > .dso-body {
-  /* stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline */
-  block-size: calc(100% - 96px - 1.5rem);
-  max-block-size: calc(70vh - 144px - 1.5em);
-  min-block-size: 1.5rem;
-  overflow-x: auto;
-  padding: 32px;
-}
 :host .dso-modal > .dso-dialog > .dso-body p {
   margin-block: 0 16px;
   margin-inline: 0;
@@ -776,15 +788,18 @@ a.dso-tertiary, a.dso-tertiary:visited {
   block-size: auto;
   max-inline-size: 100%;
 }
+:host .dso-modal > .dso-dialog > .dso-body {
+  block-size: calc(100% - 96px - 1.5rem);
+  max-block-size: calc(70vh - 144px - 1.5em);
+  min-block-size: 1.5rem;
+  overflow-x: auto;
+  padding: 32px;
+}
 :host .dso-modal > .dso-dialog > dso-scrollable {
-  /* stylelint-disable-next-line scss/operator-no-newline-after -- disabled because of prettier newline */
   block-size: calc(100% - 96px - 1.5rem);
   max-block-size: calc(70vh - 144px - 1.5em);
   min-block-size: 6.5rem;
 }
-:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
-  padding: 32px;
-}
 :host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin-block: 0 16px;
   margin-inline: 0;
@@ -819,15 +834,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
   block-size: auto;
   max-inline-size: 100%;
 }
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
+  padding: 32px;
+}
 :host .dso-modal .dso-body:focus-visible {
   outline: none;
 }
-:host .dso-modal .dso-footer {
-  min-block-size: 80px;
-  padding-block: 16px;
-  padding-inline: 32px;
-  text-align: end;
-}
 @media screen and (max-width: 767px) {
   :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-inline-start: 0;
@@ -844,6 +856,12 @@ a.dso-tertiary, a.dso-tertiary:visited {
     float: none;
   }
 }
+:host .dso-modal .dso-footer {
+  min-block-size: 80px;
+  padding-block: 16px;
+  padding-inline: 32px;
+  text-align: end;
+}
 @media screen and (min-width: 768px) {
   :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
     margin-inline-start: 16px;

package/dist/collection/components/table/table.js

@@ -30,7 +30,7 @@ export class Table {
     render() {
         var _a, _b;
         const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-        return (h(Host, { key: '1c2e38c6f3217711cafe6542bd11c3d248fb48e9' }, this.modalActive && this.placeholderHeight && (h("div", { key: '4c020d2f6c087f4095c24a99767fe04110d8da86', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'b1c0d4c9eddb85ef3f6b63ec50b61f75fdeb67f0', class: "dso-modal-overlay" }), h("div", { key: 'c2a1ad13e86fd67850a1a774821f92fe7425e71c', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '8451d846bbdda8cffe5a45e2608ba57725a7bfec', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '12941802e431b50d0397fc6e5718a93e49f5fdc9', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'e60e7c1c42887eba56ce16fd3e4a177e5ae183a2', class: "dso-responsive-message" }, h("span", { key: 'd4909e420fd1f7016bd774d60b453dd81b9f90c9' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '4fb9f254a724310cea532d8ea7522fde7f025880', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '93f19b8e5c73554247135c3a18b4e05f263d2b86', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: '4dd3fb097d1e09d95e4e25c12e6a57f8bf27012e' }, "vergroten"), h("dso-icon", { key: '41ba653a6f30b4f5aa6fca791d4616688df95507', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'c865dfdc842892326b83ad888921337ee77a5922', class: "dso-header" }, h("h2", { key: '8b1913d8abc5d8618ba9d94b8e0ce334f10087ee', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '05994fa6fd752851b92868f690eb4bb8d8197f9f', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '2ef2e866d58999eac9653d5ded98bd927a36b1fc', icon: "times" }), h("span", { key: '2b715ea3a09ce362b54d7f5ee6490e8b67cec86b', class: "sr-only" }, "Sluiten")))), h("div", { key: '51129e5af78fe0c0a0fa36b9865054f9b60d12f7', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '8cb0bb0a56b801ae50d29eadc180f7729258f627' }))))));
+        return (h(Host, { key: '72635aa7a0e69c5aaba5d8818d4cf62722f4d730' }, this.modalActive && this.placeholderHeight && (h("div", { key: '661735ad5d092ce7abfebca3d9ecab571cbb667c', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: '00fb6d4496cabe0e0614630440d741e6b277b734', class: "dso-modal-overlay" }), h("div", { key: 'efcf1cf01e0d826bfd1ca59ed1b64518b9a3d2cf', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '485a98cdddd01b8975f0967b4efc3b71f7b94979', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '0d0db83cdae29e609aca0047473ba3b209522cf6', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: '5392a5016adf8dffc44b513142d5a1aebc2cb51b', class: "dso-responsive-message" }, h("span", { key: '00d8a2c83a3e75700f454f446bcf1aed3d3f5024' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '6b7eaf6b69966dfd468ca9eaad10c7c3b8a95d1c', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: '5d6bb7e0b1bc9f409529ddd1f2db88e0528a0951', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'f316e9cf2d53ce38daf9c444c876e5c7cf01fdcc' }, "vergroten"), h("dso-icon", { key: '347b3aeb40a7dc074f95c70a90c42e329239f348', icon: "external-link" }))))), this.modalActive && (h("div", { key: 'd26f367ffa7b39e840c1fd071e7262d6dfa606ef', class: "dso-header" }, h("h2", { key: '965cdd0b891b2ae8d5888e920b9e8d3e5da24c7a', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '0952fbb314ec2457d9508f285dad1e323ab15c39', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: 'd8d5ec0de5eedd1f17a2ba6ac7765a59e90f831c', icon: "times" }), h("span", { key: '02d4fd9da8af57960e68a32f82fa30f475d1e87f', class: "sr-only" }, "Sluiten")))), h("div", { key: 'cae5e1e2daa69351b1f4f157382fa2102fa24657', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: '3bb8855a6ea597457abdf28d146c9dc61c8bab6f' }))))));
     }
     openModal() {
         this.placeholderHeight = this.host.clientHeight;

package/dist/collection/components/tabs/components/tab.css

@@ -0,0 +1,105 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  border-color: #39870c;
+  margin-block-end: -1px;
+}
+
+@media screen and (max-width: 767px) {
+  :host {
+    margin-block: 10px;
+  }
+  :host(:first-child) {
+    margin-block-start: 0;
+  }
+}
+:host([active]:not([active=false])) [role=tab], :host([active]:not([active=false])) [role=tab]:active, :host([active]:not([active=false])) [role=tab]:focus, :host([active]:not([active=false])) [role=tab]:hover, :host([active]:not([active=false])) [role=tab]:visited {
+  background-color: #fff;
+  border: 1px solid #39870c;
+  border-block-end-color: #fff;
+  color: #39870c;
+  cursor: default;
+}
+@media screen and (max-width: 767px) {
+  :host([active]:not([active=false])) [role=tab], :host([active]:not([active=false])) [role=tab]:active, :host([active]:not([active=false])) [role=tab]:focus, :host([active]:not([active=false])) [role=tab]:hover, :host([active]:not([active=false])) [role=tab]:visited {
+    border-block-end-color: #39870c;
+  }
+}
+
+:host([disabled]:not([disabled=false])) [role=tab] {
+  color: #999;
+}
+:host([disabled]:not([disabled=false])) [role=tab]:hover, :host([disabled]:not([disabled=false])) [role=tab]:focus {
+  color: #999;
+  text-decoration: none;
+  cursor: default;
+  background-color: transparent;
+}
+@media screen and (max-width: 767px) {
+  :host([disabled]:not([disabled=false])) [role=tab]:hover, :host([disabled]:not([disabled=false])) [role=tab]:focus {
+    border-block-end-color: #fff;
+  }
+}
+
+a {
+  text-decoration: none;
+}
+a:hover, a:focus-visible {
+  text-decoration: none;
+}
+a:active {
+  text-decoration: underline;
+}
+a:visited {
+  color: #666;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  background-color: transparent;
+}
+
+[role=tab] {
+  font-weight: bold;
+  cursor: pointer;
+  display: block;
+  min-block-size: 56px;
+  border: 1px solid transparent;
+  border-radius: 4px 4px 0 0;
+  color: #666;
+  line-height: 1.5;
+  padding-block: 15px;
+  padding-inline: 23px;
+}
+[role=tab]:hover {
+  border-color: #e5e5e5 #e5e5e5 #e5e5e5;
+}
+[role=tab]:hover, [role=tab]:focus {
+  text-decoration: none;
+  background-color: #e5e5e5;
+}
+[role=tab]:active, [role=tab]:focus, [role=tab]:hover {
+  background-color: #f2f2f2;
+  border: 1px solid transparent;
+  border-block-end-color: #39870c;
+  text-decoration: none;
+}
+@media screen and (max-width: 767px) {
+  [role=tab]:active, [role=tab]:focus, [role=tab]:hover {
+    border-block-end-color: #fff;
+  }
+}
+@media screen and (max-width: 767px) {
+  [role=tab] {
+    border-color: #fff;
+    border-radius: 8px;
+    padding-block: 18px;
+    padding-inline: 20px;
+  }
+}

package/dist/collection/components/tabs/components/tab.js

@@ -0,0 +1,158 @@
+import { h } from "@stencil/core";
+import { isModifiedEvent } from "../../../utils/is-modified-event";
+/**
+ * @slot - The label for this tab
+ */
+export class Tab {
+    constructor() {
+        this.emitEvent = (e) => {
+            this.dsoTabSwitch.emit({
+                originalEvent: e,
+                isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,
+            });
+        };
+        this.keyUpHandler = (e) => {
+            if (e.key === " " && !this.disabled && !this.active) {
+                this.emitEvent(e);
+            }
+        };
+        this.clickHandler = (e) => {
+            if ((this.disabled && this.href) || this.active) {
+                e.preventDefault();
+            }
+            else {
+                this.emitEvent(e);
+            }
+        };
+        this.active = undefined;
+        this.disabled = undefined;
+        this.href = undefined;
+    }
+    /**
+     * @internal
+     */
+    async _dsoFocus() {
+        var _a;
+        (_a = this.anchorOrButtonRef) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        return this.href ? (h("a", Object.assign({ role: "tab", href: this.href, onKeyUp: this.keyUpHandler, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), h("slot", null))) : (h("button", Object.assign({ role: "tab", type: "button", disabled: this.disabled, onClick: this.clickHandler, "aria-selected": this.active ? "true" : "false" }, (!this.active ? { tabIndex: -1 } : {}), { ref: (element) => (this.anchorOrButtonRef = element) }), h("slot", null)));
+    }
+    static get is() { return "dso-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab active. The tab for which the tabpanel is visible is the active tab."
+                },
+                "attribute": "active",
+                "reflect": true
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown."
+                },
+                "attribute": "disabled",
+                "reflect": true
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The optional href of the tab. Creates an anchor if present. Creates a button if absent."
+                },
+                "attribute": "href",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoTabSwitch",
+                "name": "dsoTabSwitch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates tab via click or arrow keys followed by space or enter."
+                },
+                "complexType": {
+                    "original": "TabsSwitchEvent",
+                    "resolved": "TabsSwitchEvent",
+                    "references": {
+                        "TabsSwitchEvent": {
+                            "location": "import",
+                            "path": "../tabs.interfaces",
+                            "id": "src/components/tabs/tabs.interfaces.ts::TabsSwitchEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "_dsoFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=tab.js.map

package/dist/collection/components/tabs/components/tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../../../src/components/tabs/components/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE;;GAEG;AAMH,MAAM,OAAO,GAAG;;QAsCN,cAAS,GAAG,CAAC,CAA6B,EAAE,EAAE;YACpD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,aAAa,EAAE,CAAC;gBAChB,eAAe,EAAE,CAAC,YAAY,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;aACtE,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACpD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,CAAa,EAAE,EAAE;YACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChD,CAAC,CAAC,cAAc,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;;;;;IA7BF;;OAEG;IAEH,KAAK,CAAC,SAAS;;QACb,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;IAClC,CAAC;IAyBD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACjB,uBACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACN,CACL,CAAC,CAAC,CAAC,CACF,4BACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,IACzC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,IAC1C,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC;YAEpD,eAAQ,CACD,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h, Method } from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/tabs/tabs.css

@@ -0,0 +1,20 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.tabs {
+  border-block-end: 1px solid #39870c;
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  margin-block-end: 24px;
+  padding-inline-start: 0;
+}
+@media screen and (max-width: 767px) {
+  .tabs {
+    border: 0;
+    display: block;
+  }
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.interfaces.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface TabsSwitchEvent {\r\n  originalEvent: MouseEvent | KeyboardEvent;\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}