@dso-toolkit/core 88.1.1 → 90.0.0

package/dist/collection/components/panel/panel.js

@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '6b392bfec6de02761378d5bcbc575aec75b8fa65', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '2ac787c40afad1e0a7858fdd2c208988d7a293a3', class: "panel-heading" }, h("slot", { key: 'a2af9ee51d2e9252682afb05c9df27bb041c3865', name: "heading" }), h("dso-icon-button", { key: 'b9abe88085c20c68322d7d9bf0a3bab29493b0c6', icon: "times", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'd8f5ba452135a44e804fa7f59bd842e73ac28004', class: "panel-body" }, h("slot", { key: '9d7ada9f96162690a1cd8b0e12493cad7d2f40dc' }))));
+        return (h("div", { key: '99d102b8bb08fc7f673eea6b7c7cc6c7b0c4d88e', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'b0cfb4b2f60f5af467e2b74b58c59919dced4d46', class: "panel-heading" }, h("slot", { key: 'e5a0b9d077b9c254996d8cf6f289704370b07f6a', name: "heading" }), h("dso-icon-button", { key: '5939e4d1120f30ec2310357f7bbb3af17e108ddc', icon: "cross", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: 'e845349815336c7e84c3445dfe82512c156bbcf6', class: "panel-body" }, h("slot", { key: 'e7575c10f26f6e65fcc0b94b47e3864fcd6e9525' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +90,8 @@ export class Panel {
                         "PanelCloseEvent": {
                             "location": "import",
                             "path": "./panel.interfaces",
-                            "id": "src/components/panel/panel.interfaces.ts::PanelCloseEvent"
+                            "id": "src/components/panel/panel.interfaces.ts::PanelCloseEvent",
+                            "referenceLocation": "PanelCloseEvent"
                         }
                     }
                 }
@@ -98,4 +99,3 @@ export class Panel {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=panel.js.map

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

@@ -18,7 +18,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins {
   --_dso-icon-button-tertiary-color: #191919;
@@ -32,7 +32,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 del {
@@ -54,7 +54,7 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del {
   --_dso-icon-button-tertiary-color: #191919;
@@ -67,7 +67,7 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }

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

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

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

@@ -29,8 +29,7 @@ export class PlekinfoCard {
         this.mutationObserver.observe(this.host, { attributes: true, childList: true });
     }
     disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
         delete this.mutationObserver;
     }
     clickEventHandler(e) {
@@ -50,7 +49,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '2866e252f13a703ee665c6873e9ebce171712f5a', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '9b7928fe32e1b9aee41bac41286c34c86cb740d3', wijzigactie: this.wijzigactie }, h("div", { key: '8f365899b1a72b6788b5f9fe3026cf08dcadf39c', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'a97698e558336efbb014e80c1af88052525f624e', name: "symbol" })), h("div", { key: '7e5171b34525d67b0ae06737e5ebe500c7d84201', 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("span", { class: "icon-container" }, 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" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'e7c0cdc80915e9bc1733bed4d938866c3ee66260', name: "meta" }), this.interaction !== null && h("slot", { key: '18852deb9114ce7152b0844fe284ca91acdb890f', name: "interaction" })), h("div", { key: '104987489255f9de27c518138e85804f6b993158', class: "dso-plekinfo-card-content" }, h("slot", { key: '98b1ba6cabb7df67d7afe088e87fcd092545be8a', name: "content" })))));
+        return (h(Host, { key: 'a2c907d0f2be52a4816c2a0c7d73449a6f1463f2', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '712a59c849527b431093889eb75edbb54a6b6217', wijzigactie: this.wijzigactie }, h("div", { key: 'bf76d9c9dccc1bac5c20c12abc57a1a6f4cc42b2', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'afcdc38b574d5422c2a93819949d1a74c88e5960', name: "symbol" })), h("div", { key: 'b4f0b7014e90ef73531a0beab46e275824e00272', 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("span", { class: "icon-container" }, 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" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'b19d778fedb08afff8850a890afc1c5a6ddc5348', name: "meta" }), this.interaction !== null && h("slot", { key: 'a1b83b992f140324e8635ca873560f6f16198a8c', name: "interaction" })), h("div", { key: '47e066a797fcc2de5964a32efd6159d07df4f642', class: "dso-plekinfo-card-content" }, h("slot", { key: 'd51a70ff7e321488f4f1c52ccebff926de5c5efa', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -76,7 +75,8 @@ export class PlekinfoCard {
                         "PlekinfoWijzigactie": {
                             "location": "import",
                             "path": "./plekinfo-card.interfaces",
-                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoWijzigactie"
+                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoWijzigactie",
+                            "referenceLocation": "PlekinfoWijzigactie"
                         }
                     }
                 },
@@ -169,7 +169,8 @@ export class PlekinfoCard {
                         "PlekinfoCardClickEvent": {
                             "location": "import",
                             "path": "./plekinfo-card.interfaces",
-                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoCardClickEvent"
+                            "id": "src/components/plekinfo-card/plekinfo-card.interfaces.ts::PlekinfoCardClickEvent",
+                            "referenceLocation": "PlekinfoCardClickEvent"
                         }
                     }
                 }
@@ -177,4 +178,3 @@ export class PlekinfoCard {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=plekinfo-card.js.map

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

@@ -10,4 +10,3 @@ export const translations = {
         },
     },
 };
-//# sourceMappingURL=progress-indicator.i18n.js.map

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

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '8ab3db9242f44f583258a9f313a8e3fbb9b72d0d' }, h("span", { key: '193a169135e1617727e86cc1c11cf87250220493', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '1d5e137b36f95fb9600545f58687a401276a27b7', icon: "spinner" })), h("span", { key: 'e5d674bd60e0037ad0e78ed7129ac74002ce38f2', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '5fa9e0caf06bc75410aa225a4e99e50b381bb396' }, h("span", { key: 'b89e86db1ffe6138b2ed33f08ea462e2501cf3c5', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'af7338d1bd50ca89206450c006f60f8b912eb9a7', icon: "spinner" })), h("span", { key: '6deb8a1b9a92d089d7260caee85f72c4ab7d46e8', 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"; }
@@ -83,4 +83,3 @@ export class Progressindicator {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=progress-indicator.js.map

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

@@ -17,7 +17,7 @@
   --_dt-dl-before-display: none;
   --_dt-dl-dt-font-weight: normal;
   --_dt-dl-dd-margin-block-start: 0;
-  --_dt-dl-dd-margin-inline-start: units.$u1;
+  --_dt-dl-dd-margin-inline-start: 8px;
   --_dt-dl-dd-padding-inline-start: 0;
   --_dt-dl-dt-inline-size: auto;
   --_dt-dl-dd-last-margin-block-end: 0;

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

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '12935f64b5c0cac32850e92ec594eac15fda660e' }, h("div", { key: '1125f19e534e74c3b50519b66b0117063e16ea9c', class: "project-item-header" }, h("div", { key: '262432d19146db36ef8dca100191299a1b991af1', class: "project-item-title" }, h("slot", { key: 'e84d0c1bc18e5f7c7a88ee21d522d5dfa8b2558a', name: "title" }), this.label && (h("dso-label", { key: 'cfe1a7b9d673c7e3513607cf86d745441df63ff7', status: "error", compact: true }, this.label))), h("div", { key: '05f7192b693cb027360cd10f081e09c767964f6b', class: "project-item-actions" }, h("slot", { key: '3e6aba40efd02de33a71a6288a9aab9845d124af', name: "actions" }))), h("div", { key: '3dc045a2481645f91906c2452ec7b64a1c009986', class: "project-item-info" }, h("div", { key: '7ab685ce1d25cca777f2239143b390ff630dc27a', class: "project-item-progress" }, h("slot", { key: '830643aa3b99b44dbcd6a8a5eab01a6ef0f8999e', name: "progress" })), h("div", { key: 'd87d23373afa3019b7f18668b13eabdec8a41cf4', class: "project-item-status" }, h("slot", { key: '7a52a02dca7d72cf356884333a3151e4c707c521', name: "status" })))));
+        return (h(Fragment, { key: 'ea5d57178d688d5153728f59d63fb9eca807902e' }, h("div", { key: '1601369295bde880747bca76a2d09e4af5e92df0', class: "project-item-header" }, h("div", { key: '2aea2de883cd682591c1ab8cff3f18589832d0bc', class: "project-item-title" }, h("slot", { key: '988bfa71770b9aa323a08f17d9fd4bd5430e0d11', name: "title" }), this.label && (h("dso-label", { key: 'bebc48107e8fdad8af897de5152e9848ab331bf7', status: "error", compact: true }, this.label))), h("div", { key: 'c8da0e2fb5f477dab60a3da9542c97d577a7c443', class: "project-item-actions" }, h("slot", { key: '7055bb2981bd48c6d46f236538caca79ab77a81b', name: "actions" }))), h("div", { key: 'ba0d34fff5d8f7d9de49faff24ec67471e42678f', class: "project-item-info" }, h("div", { key: '6d8549db9fe68754c112263f844343ba8d738236', class: "project-item-progress" }, h("slot", { key: 'f81d49758887cfc5df2a5a098fa7437a04b98c72', name: "progress" })), h("div", { key: 'f59d5570e3f34f7e307056d5429a0dc2a1194c60', class: "project-item-status" }, h("slot", { key: '14356e969dba3bd3118314a3e1b6cfcd8266fd5c', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }
@@ -39,4 +39,3 @@ export class ProjectItem {
         };
     }
 }
-//# sourceMappingURL=project-item.js.map

package/dist/collection/components/renvooi/renvooi-render-text.js

@@ -14,4 +14,3 @@ export const RenvooiRenderText = ({ text, mark, onMarkItemHighlight }) => {
         return (h("mark", { class: renvooiText.highlight ? "dso-highlight" : undefined, ref: (ref) => renvooiText.highlight && ref && onMarkItemHighlight(renvooiText.text, ref) }, renvooiText.text));
     })));
 };
-//# sourceMappingURL=renvooi-render-text.js.map

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

@@ -13,4 +13,3 @@ export const RenvooiRender = ({ value, mark, onMarkItemHighlight }) => {
     }
     return (h(Fragment, null, h("del", null, h(RenvooiRenderText, { text: value.was, mark: mark, onMarkItemHighlight: onMarkItemHighlight })), h("ins", null, h(RenvooiRenderText, { text: value.wordt, mark: mark, onMarkItemHighlight: onMarkItemHighlight }))));
 };
-//# sourceMappingURL=renvooi-render.js.map

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

@@ -18,7 +18,7 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 ins {
   --_dso-icon-button-tertiary-color: #191919;
@@ -32,7 +32,7 @@ ins {
   background-color: #e4f1d4;
   color: #191919;
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
 }
 
 del {
@@ -54,7 +54,7 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
   background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
 }
 del {
   --_dso-icon-button-tertiary-color: #191919;
@@ -67,7 +67,7 @@ del {
   --_dso-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
   color: #191919;
-  --_dso-ozon-content-toggletip-color: colors.$zwart;
+  --_dso-ozon-content-toggletip-color: #000;
   text-decoration: line-through;
   --_dso-ozon-content-toggletip-text-decoration: underline line-through;
 }

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

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

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

@@ -16,7 +16,7 @@ export class Renvooi {
         return Array.isArray(this.value) ? this.value : [this.value];
     }
     render() {
-        return (h(Fragment, null, this.values.map((v) => (h(RenvooiRender, { value: v, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, v, this.values); }), onMarkItemHighlight: this.handleMarkItemHighlight })))));
+        return (h(Fragment, null, this.values.map((v) => (h(RenvooiRender, { value: v, mark: this.mark && ((text) => this.mark?.(text, v, this.values)), onMarkItemHighlight: this.handleMarkItemHighlight })))));
     }
     static get is() { return "dso-renvooi"; }
     static get encapsulation() { return "shadow"; }
@@ -42,7 +42,8 @@ export class Renvooi {
                         "RenvooiValue": {
                             "location": "import",
                             "path": "./renvooi.interfaces",
-                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiValue"
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiValue",
+                            "referenceLocation": "RenvooiValue"
                         }
                     }
                 },
@@ -67,7 +68,8 @@ export class Renvooi {
                         "RenvooiMarkFunction": {
                             "location": "import",
                             "path": "./renvooi.interfaces",
-                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkFunction"
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkFunction",
+                            "referenceLocation": "RenvooiMarkFunction"
                         }
                     }
                 },
@@ -100,11 +102,11 @@ export class Renvooi {
                         "RenvooiMarkItemHighlightEvent": {
                             "location": "import",
                             "path": "./renvooi.interfaces",
-                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkItemHighlightEvent"
+                            "id": "src/components/renvooi/renvooi.interfaces.ts::RenvooiMarkItemHighlightEvent",
+                            "referenceLocation": "RenvooiMarkItemHighlightEvent"
                         }
                     }
                 }
             }];
     }
 }
-//# sourceMappingURL=renvooi.js.map

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

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

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

@@ -18,11 +18,10 @@ export class ResponsiveElement {
         this.sizeAlias = elementSizes[0].alias;
         this.sizeWidth = 0;
         this.observer = new ResizeObserver(([entry]) => {
-            var _a, _b;
             if (!entry) {
                 throw new Error("No entry found");
             }
-            const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+            const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;
             this.sizeAlias = size;
             this.dsoSizeChange.emit(size);
         });
@@ -40,7 +39,7 @@ export class ResponsiveElement {
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '8949125bfa2cbeee5544b5ea5fe7d3b5fc95495f', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '2fafcef7f364684ad31c6e1d95ec431ad2f06334' })));
+        return (h(Host, { key: 'ca9c1b61a8604e516e05bdce5117192964831c90', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd8465b9289ba9657d50c36cd0d43926e5ac47d3f' })));
     }
     static get is() { return "dso-responsive-element"; }
     static get encapsulation() { return "shadow"; }
@@ -78,7 +77,8 @@ export class ResponsiveElement {
                         "ResponsiveElementSize": {
                             "location": "import",
                             "path": "./responsive-element.interfaces",
-                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize",
+                            "referenceLocation": "ResponsiveElementSize"
                         }
                     }
                 }
@@ -98,7 +98,8 @@ export class ResponsiveElement {
                         "ResponsiveElementSize": {
                             "location": "import",
                             "path": "./responsive-element.interfaces",
-                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize",
+                            "referenceLocation": "ResponsiveElementSize"
                         }
                     },
                     "return": "Promise<ResponsiveElementSize>"
@@ -112,4 +113,3 @@ export class ResponsiveElement {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=responsive-element.js.map

package/dist/collection/components/scrollable/scrollable.css

@@ -21,7 +21,7 @@
   block-size: 100%;
   max-block-size: inherit;
   min-block-size: inherit;
-  overflow-y: auto;
+  overflow-y: hidden;
   padding-inline: var(--_dt-scrollable-container-padding-inline, 0);
   padding-block: var(--_dt-scrollable-container-padding-block, 0);
   border-end-start-radius: var(--_dt-scrollable-container-border-end-start-radius, 0);
@@ -52,6 +52,9 @@
   background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));
   inset-block-end: 0;
 }
+.dso-shadow-container .dso-scroll-container.dso-scroll-bottom, .dso-shadow-container .dso-scroll-container.dso-scroll-top, .dso-shadow-container .dso-scroll-container.dso-scroll-middle {
+  overflow-y: auto;
+}
 .dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before {
   opacity: 1;
 }

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

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

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

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { clsx } from "clsx";
 import debounce from "debounce";
-const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
+const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()), 50));
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
     if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
         return target.parentNode.host;
@@ -18,8 +18,7 @@ export class Scrollable {
     constructor() {
         // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
         this.mutationObserver = new MutationObserver((entries) => entries.forEach(({ target }) => {
-            var _a;
-            const element = (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest("dso-scrollable");
+            const element = target.parentElement?.closest("dso-scrollable");
             if (element !== this.host) {
                 return;
             }
@@ -50,7 +49,10 @@ export class Scrollable {
             return "noScroll";
         }
         const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;
-        if (scrollHeight <= clientHeight) {
+        // At certain browser zoom levels (e.g. 25-50%), scrollHeight and clientHeight are
+        // rounded independently, causing a false overflow of up to ~8px. Returning "noScroll"
+        // keeps overflow-y: hidden (via CSS) which prevents the scrollbar from appearing.
+        if (scrollHeight - clientHeight < 8) {
             return "noScroll";
         }
         if (scrollTop === 0) {
@@ -84,9 +86,9 @@ export class Scrollable {
         this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
     render() {
-        return (h("div", { key: 'dee37c2609831086f1b3955405cb3e77fad6e00b', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: 'e2a462c19b66745489b8d6e2105b560aa872528c', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        return (h("div", { key: 'e94af45c3732f7691a092af7bf842391af3c437c', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '154edbc32a0902fb5f006c647bbdeb9c564cf981', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
                 [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-            }), onScroll: () => this._setScrollState() }, h("slot", { key: '8cd3cf93c18bb02a2aef1eaf311381cdcbd632b2' }))));
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'b0a8bd4bb35413614c41ebb077bd7613e303682a' }))));
     }
     static get is() { return "dso-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -123,7 +125,8 @@ export class Scrollable {
                         "DsoScrollEndEvent": {
                             "location": "import",
                             "path": "./scrollable.interfaces",
-                            "id": "src/components/scrollable/scrollable.interfaces.ts::DsoScrollEndEvent"
+                            "id": "src/components/scrollable/scrollable.interfaces.ts::DsoScrollEndEvent",
+                            "referenceLocation": "DsoScrollEndEvent"
                         }
                     }
                 }
@@ -155,4 +158,3 @@ export class Scrollable {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=scrollable.js.map

package/dist/collection/components/segmented-button/segmented-button.css

@@ -0,0 +1,59 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-block;
+}
+
+.segmented-button {
+  display: inline-flex;
+  gap: 4px;
+  border: 1px solid #ccc;
+  border-radius: 12px;
+  flex-wrap: nowrap;
+}
+.segmented-button label {
+  position: relative;
+  user-select: none;
+  flex-shrink: 0;
+}
+.segmented-button label:has(input:not(:disabled)):hover {
+  cursor: pointer;
+}
+.segmented-button label:has(input:not(:disabled)):hover input:not(:checked) + .segment-label {
+  color: #275937;
+}
+.segmented-button label:has(input:disabled) .segment-label {
+  color: #afcf9d;
+}
+.segmented-button input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: 0;
+}
+.segmented-button input[type=radio]:focus-visible + .segment-label {
+  outline: 2px solid #275937;
+  outline-offset: 2px;
+}
+.segmented-button input[type=radio]:checked + .segment-label {
+  background-color: #275937;
+  color: #fff;
+}
+.segmented-button .segment-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 24px;
+  font-size: 16px;
+  font-weight: 500;
+  background: #fff;
+  color: #39870c;
+  border-radius: 12px;
+  padding-inline: 12px;
+}

package/dist/collection/components/segmented-button/segmented-button.interfaces.js

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

package/dist/collection/components/segmented-button/segmented-button.js

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+export class SegmentedButton {
+    /*
+     * Update active option unless it's disabled or already active
+     */
+    handleClick(option, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (option.disabled || this.activeOption === option) {
+            return;
+        }
+        this.dsoChange.emit({
+            option,
+            originalEvent: event,
+        });
+    }
+    render() {
+        return (h("div", { key: 'f653f25376c48c6dbe7c7ff1da117303aa0f9d5b', class: "segmented-button", role: "radiogroup", "aria-label": this.label, "aria-required": this.required?.toString() }, this.options?.map((option) => {
+            return (h("label", null, h("input", { type: "radio", name: this.groupName, value: option.label, checked: this.activeOption === option, disabled: option.disabled, onClick: (event) => this.handleClick(option, event) }), h("span", { class: "segment-label" }, option.label)));
+        })));
+    }
+    static get is() { return "dso-segmented-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["segmented-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["segmented-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "groupName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional custom group name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "group-name"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentedButtonOption[] | undefined",
+                    "resolved": "SegmentedButtonOption[] | undefined",
+                    "references": {
+                        "SegmentedButtonOption": {
+                            "location": "import",
+                            "path": "./segmented-button.interfaces",
+                            "id": "src/components/segmented-button/segmented-button.interfaces.ts::SegmentedButtonOption",
+                            "referenceLocation": "SegmentedButtonOption"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options to render in the segmented button"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the segmented button group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether selection is required"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required"
+            },
+            "activeOption": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentedButtonOption | undefined",
+                    "resolved": "SegmentedButtonOption | undefined",
+                    "references": {
+                        "SegmentedButtonOption": {
+                            "location": "import",
+                            "path": "./segmented-button.interfaces",
+                            "id": "src/components/segmented-button/segmented-button.interfaces.ts::SegmentedButtonOption",
+                            "referenceLocation": "SegmentedButtonOption"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Index of the currently active option"
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoChange",
+                "name": "dsoChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when active option changes"
+                },
+                "complexType": {
+                    "original": "SegmentedButtonChangeEvent",
+                    "resolved": "SegmentedButtonChangeEvent",
+                    "references": {
+                        "SegmentedButtonChangeEvent": {
+                            "location": "import",
+                            "path": "./segmented-button.interfaces",
+                            "id": "src/components/segmented-button/segmented-button.interfaces.ts::SegmentedButtonChangeEvent",
+                            "referenceLocation": "SegmentedButtonChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

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

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