@duetds/components 9.1.0 → 9.1.1

package/lib/collection/components/duet-scrollable/duet-scrollable.css

@@ -27,39 +27,48 @@
   position: relative !important;
 }
 :host .duet-scrollable-items {
-  display: flex;
-}
-:host .duet-scrollable-items .duet-scrollable-button-container {
   position: relative;
-  flex: 0 0 auto;
-  flex-basis: 40px;
-  transition: all 300ms ease;
+  display: flex;
 }
-:host .duet-scrollable-items .duet-scrollable-button-container.left::after {
-  position: relative;
-  top: -50px;
-  left: 20px;
+:host .duet-scrollable-items .duet-scrollable-fade-overlay {
+  position: absolute;
+  bottom: 0;
   z-index: 250;
   display: block;
-  width: 30px;
+  width: 10px;
   height: 100%;
-  content: "";
+  pointer-events: none;
+  transition: transform 300ms ease;
+}
+:host .duet-scrollable-items .duet-scrollable-fade-overlay--hidden {
+  display: none;
+}
+:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay {
+  /* stylelint-disable */
+  /* stylelint-enable */
+}
+:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay.left {
+  left: calc(0px - 10px);
+  background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+}
+:host .duet-scrollable-items:not(.buttons) .duet-scrollable-fade-overlay.right {
+  right: calc(0px - 10px);
+  background-image: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-fade-overlay.left {
+  left: calc(40px - 10px);
   background-image: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-  transition: all 300ms ease;
 }
-:host .duet-scrollable-items .duet-scrollable-button-container.right::after {
+:host .duet-scrollable-items.buttons .duet-scrollable-fade-overlay.right {
+  right: calc(40px - 10px);
+  background-image: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container {
   position: relative;
-  top: -50px;
-  right: 15px;
-  z-index: 250;
-  display: block;
-  width: 30px;
-  height: 100%;
-  content: "";
-  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
-  transition: all 300ms ease;
+  flex: 0 0 auto;
+  flex-basis: 40px;
 }
-:host .duet-scrollable-items .duet-scrollable-button-container--occluded {
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded {
   flex-basis: 0;
   flex-shrink: 1;
   width: 0;
@@ -67,37 +76,41 @@
   overflow: hidden;
   visibility: hidden;
 }
-:host .duet-scrollable-items .duet-scrollable-button {
-  position: relative;
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button {
+  position: absolute;
+  display: flex;
   flex: 0 0 auto;
   flex-basis: 40px;
+  align-items: center;
   height: 100%;
-  padding: 10px;
   cursor: pointer;
+  transition: transform 300ms ease;
 }
-:host .duet-scrollable-items .duet-scrollable-button:active {
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon {
+  transition: transform 300ms ease;
   transform: scale(0.8);
 }
-:host .duet-scrollable-items .duet-scrollable-button--left {
-  left: -12px;
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left {
+  left: 0;
+  padding: 10px 10px 10px 0;
 }
-:host .duet-scrollable-items .duet-scrollable-button--right {
-  right: -12px;
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--right {
+  right: 0;
+  padding: 10px 0 10px 10px;
 }
-:host .duet-scrollable-items .duet-scrollable-button--top {
-  align-self: flex-start;
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--top {
+  align-items: flex-start;
 }
-:host .duet-scrollable-items .duet-scrollable-button--bottom {
-  align-self: flex-end;
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom {
+  align-items: flex-end;
 }
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;
   gap: 20px;
-  padding-top: 2px;
-  padding-right: 5px;
-  padding-left: 5px;
-  margin: 0 -5px;
+  padding-right: 10px;
+  padding-left: 10px;
+  margin: 0 -10px;
   /* Make this scrollable when needed */
   overflow-x: auto;
   /* We don't want vertical scrolling */
@@ -123,6 +136,22 @@
 :host .duet-scrollable-items .duet-scrollable-list.collapsed {
   flex-wrap: wrap;
 }
+:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--x-small {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--small {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+:host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--medium {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
 :host .duet-scrollable-items.center {
   justify-content: center;
 }

package/lib/collection/components/duet-scrollable/duet-scrollable.js

@@ -15,21 +15,24 @@ export class DuetScrollable {
         this.currentIndex = 0;
         this.scrollPaneElement = undefined;
         this.hasCollapseButtonLabelSlot = false;
+        /**
+         * Observer to check if the scrollable content is wider than the scroll pane,
+         * and thus needs scrolling.
+         */
         this.resizeObserver = new ResizeObserver(entries => {
             var _a, _b, _c, _d;
-            // otherwise, something is wrong, expecting 1 element only
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-                const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
-                // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
-                this.isScrollPaneContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+                const scrollPaneWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+                const totalContentWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
+                const scrollingThreshold = 10;
+                this.needsScrolling = totalContentWidth > scrollPaneWidth + scrollingThreshold;
             }
         });
         this.collapsedOnClick = () => {
             this.collapsed = !this.collapsed;
         };
         this.scrollPaneAtStart = true;
-        this.isScrollPaneContentSmallerThanWrapper = true;
+        this.needsScrolling = true;
         this.scrollPaneAtEnd = false;
         this.childrenData = {};
         this.theme = "";
@@ -38,6 +41,7 @@ export class DuetScrollable {
         this.buttons = true;
         this.buttonAlignment = "center";
         this.center = false;
+        this.padding = "none";
         this.selected = 0;
     }
     watchPropHandler(newValue) {
@@ -52,7 +56,11 @@ export class DuetScrollable {
     }
     componentDidLoad() {
         this.resizeObserver.observe(this.scrollPaneElement);
-        this.updateScrollButtons(this.getScrollPaneElements()[0]);
+        // Use requestAnimationFrame to defer state changes after initial render,
+        // preventing extra re-renders
+        requestAnimationFrame(() => {
+            this.updateScrollButtons(this.getScrollPaneElements()[0]);
+        });
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
@@ -158,43 +166,55 @@ export class DuetScrollable {
         const last = this.getLastVisibleElement();
         this.scrollToElement(last + 1, "center");
     }
+    renderFadeOverlay(direction) {
+        return (h("div", { class: {
+                "duet-scrollable-fade-overlay": true,
+                "duet-scrollable-fade-overlay--hidden": !this.needsScrolling,
+                [`${direction}`]: true,
+            } }));
+    }
+    renderButton(direction) {
+        const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
+        const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
+        const scrollTo = () => {
+            if (direction === "left") {
+                this.scrollLeft();
+            }
+            else {
+                this.scrollRight();
+            }
+        };
+        const scrollPaneLocation = direction === "left" ? this.scrollPaneAtStart : this.scrollPaneAtEnd;
+        return (h("div", { class: {
+                "duet-scrollable-button-container": true,
+                [`${direction}`]: true,
+                "duet-scrollable-button-container--occluded": !this.needsScrolling,
+            } }, h("button", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
+                "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
+                [`duet-scrollable-button--${direction}`]: true,
+            }, onClick: () => scrollTo(), disabled: scrollPaneLocation, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: "small", margin: "none" }))));
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
-        const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
-        return (h(Host, { key: '5e613776bc5519bb5706b51a2c7e0eb430a67886', class: {
+        return (h(Host, { key: '3b54a0e0a539b3669e6b960b63d4db530828a6d3', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '7642df92bec227d43dde6cdad844a50b8a75fd40', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'c99af39d9c1b2c6ddd640a5517c9aba227b374d0', class: {
                 collapse: true,
-                hide: !this.isScrollPaneContentSmallerThanWrapper && !this.collapsed,
-            } }, h("duet-button", { key: '2a2b9c955233ce02fba939b7a8366f0381d1c349', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '403bb72d92de84245e7d17116848faf8d1ca3996', name: "collapse-button-label" })))), h("div", { key: '4e4628fc421a80139fd71d3a0232159b7d31a53b', class: {
+                hide: !this.needsScrolling && !this.collapsed,
+            } }, h("duet-button", { key: '232d85eeb640f814572de158f1a54643a0c4e728', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: 'd1797003948509cbc143a4b0dfea35972007e5ad', name: "collapse-button-label" })))), h("div", { key: '0f5f7e114c90cb2dedeaefc7d14cb2d53f4dab3f', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, h("div", { key: '7391cc68e6fcc4921bc23417a45e9144ba64d406', class: {
-                "duet-scrollable-button-container": true,
-                left: true,
-                "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            } }, h("button", { key: '1764f20c98b87d8755d14f8ff9991ede35f50d83', part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
-                "duet-scrollable-button": true,
-                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
-                "duet-scrollable-button--left": true,
-            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: '16edd1294a131c36f59f67179e8b1447d7eed983', color: this.scrollPaneAtStart ? arrowColorDisabled : arrowColor, name: "action-arrow-left", size: "small", margin: "none" }))), h("div", { key: 'b8c2cbd51498d4f6a2a85a8004396e6b379f8407', class: {
+            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: '1af5b1b3ec4fa3e357540d6660f7f820a8c78a87', class: {
                 "duet-scrollable-list": true,
                 collapsed: this.collapsed,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'f1981b1e9fe15b835253820136cbdcc32c193c93' })), h("div", { key: '8be1066f5def1e2891f3fd49bb5db5c9639f6c77', class: {
-                "duet-scrollable-button-container": true,
-                right: true,
-                "duet-scrollable-button-container--occluded": !this.isScrollPaneContentSmallerThanWrapper,
-            } }, h("button", { key: '7764023d0ef66c068d4731c59d86d44f780b189a', part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
-                "duet-scrollable-button": true,
-                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
-                "duet-scrollable-button--right": true,
-            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { key: '945e693aa629bac7e39d40ab4c6361a92e2cab32', color: this.scrollPaneAtEnd ? arrowColorDisabled : arrowColor, name: "action-arrow-right", size: "small", margin: "none" }))))));
+                [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '1865d32a0479ba27dbd8afcdc7e9397f5d649600' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -324,6 +344,30 @@ export class DuetScrollable {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetOverflowPadding",
+                    "resolved": "\"medium\" | \"none\" | \"small\" | \"x-small\" | \"xx-small\"",
+                    "references": {
+                        "DuetOverflowPadding": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetOverflowPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to add padding to the scrollable list to account for\noverflowing elements, such as shadows or outlines."
+                },
+                "attribute": "padding",
+                "reflect": false,
+                "defaultValue": "\"none\""
+            },
             "selected": {
                 "type": "number",
                 "mutable": true,
@@ -347,7 +391,7 @@ export class DuetScrollable {
     static get states() {
         return {
             "scrollPaneAtStart": {},
-            "isScrollPaneContentSmallerThanWrapper": {},
+            "needsScrolling": {},
             "scrollPaneAtEnd": {},
             "childrenData": {}
         };

package/lib/collection/components/duet-section-layout/duet-section-layout.css

@@ -54,6 +54,7 @@
   position: relative;
   padding: 0 16px;
   margin: 48px auto 36px;
+  overflow-x: clip;
 }
 @media (max-width: 20.5em) {
   .duet-layout.padding-xxx-small {

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -14,14 +14,14 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '3eae73081b51390b86a3a85e507afe1f88da9d3c', class: {
+        return (h(Host, { key: '0513022fd72635b7a29f28bd2d4c499efab5924f', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '2a40eedc09186d064eea410ea5235ba9ae257468', class: {
+            } }, h("div", { key: 'f63b99c09e8b7d188e7dee578d6ed7f6f9b3a274', class: {
                 "duet-layout": true,
                 "duet-m-0": this.margin === "none",
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '1ad05f9fb04d37b682658463384fbb787990a432', class: "duet-main" }, h("slot", { key: '54c91da8da32c38aaae149c9279216d7e4c83820' })))));
+            } }, h("section", { key: 'fc795216eaedfd65b6e2638a2735c8555b20400a', class: "duet-main" }, h("slot", { key: '852e1dc28d14c80a9127b0ca9004a5cba7098c76' })))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-select/duet-select.js

@@ -194,7 +194,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectVariation"
                         }
                     }
@@ -510,7 +510,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectItems": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectItems"
                         }
                     }
@@ -701,7 +701,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }
@@ -722,7 +722,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }
@@ -743,7 +743,7 @@ export class DuetSelect {
                     "references": {
                         "DuetSelectEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-select/duet-select.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-select/duet-select.tsx",
                             "id": "src/components/duet-select/duet-select.tsx::DuetSelectEvent"
                         }
                     }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -25,9 +25,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: 'cb4154853051eec78a10658344407c1653d737b3', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '5cab0035d46b9e020cf7e4a18105a999646ad437', class: {
+        return (h(Host, { key: '9a388c03cd8794d8a5c78322b756eceb14f9f0b7', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: 'd46a7b16b69201e05928ea5515b99c76fccb659e', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '8c2d2bb60ac9042377402dea4453e4ec17885aac', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '765b32769035c6746c0412be9fe3b70bf8c75039', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '500823451da6d3ccb92c830a281871c73a1c1a6a', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'b6a32e8b7ed72ff300b8f6a1b8f0ac9c3fe7507b', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -439,7 +439,7 @@ export class DuetShowMore {
                     "references": {
                         "DuetShowMoreToggleEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-show-more/duet-show-more.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-show-more/duet-show-more.tsx",
                             "id": "src/components/duet-show-more/duet-show-more.tsx::DuetShowMoreToggleEvent"
                         }
                     }

package/lib/collection/components/duet-slideout/duet-slideout.js

@@ -362,7 +362,7 @@ export class DuetSlideout {
                     "references": {
                         "DuetSlideoutEventDetails": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-slideout/duet-slideout.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-slideout/duet-slideout.tsx",
                             "id": "src/components/duet-slideout/duet-slideout.tsx::DuetSlideoutEventDetails"
                         }
                     }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: 'a3f0902bcc3942cfdd9bd39d753bfcfeeebf8bd4' }, h("div", { key: 'e4b2d5245b065602e7b74bab03d2ad9a6390d5ab', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '10f383d1179787ca4dda410b10ac2785bcbbcc36', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '3a3f899dd72eb996f48ac588474810a95fa6fc19' }))));
+        return (h(Host, { key: '1ffa97535d84470e1212e2edd8e7c5b9f67c2116' }, h("div", { key: '10d65fcbf9c3000eb34125021d51af4efbf4eba0', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '737d762ca01b63971b9d61c3e5ca67f8d92cd94c', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '9964f1c2b7baf17d4aad489c6d508fdd24703e80' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.js

@@ -26,12 +26,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '756d30871c5f34ca3520a5bdecf5269c6a0b4afb' }, h("a", { key: '16dfc8d2bcae2379ab25ce353eda255e79d6ad6b', class: {
+        return (h(Host, { key: '267e75e5afb886c43533da89f39a6937447a5bc1' }, h("a", { key: 'ab6062843ce76d39f9408dee693d37834bb8041b', class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: '6551aa92fee9498b1fc2b4ebb18a89ff1c72e607', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'f841f0d234ffca0d1dbaaae18e9de9f1de02de55', class: "label" }, h("span", { key: '452f28fecf67c0da43ea807dd572d1db83e10ae6' }, h("slot", { key: '896258d4f5fbcc5efa21d49cd867e0578302dbef' }), h("slot", { key: '6de4aa964201a5ffe68d7f894a499289db302527', name: "description" })), this.caret && (h("duet-icon", { key: '3b7c9337d8d76eb9bcc71fe7277e84599692bce4', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { key: 'cf170dcab30ff6147ec97cfea8cf80ae91a07e52', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: 'e3bfb77a0f8b3661936ab9578d27229be577b3a1', class: "label" }, h("span", { key: '2dbb1c5eab8c0bd7893987effe7f830a74c11579' }, h("slot", { key: '67daf8ce8bed028f853bf5a8999aa0ffc6ae88fd' }), h("slot", { key: 'c62fd4e6ae9d31b1f2391485d77d9e4a0dc09b7f', name: "description" })), this.caret && (h("duet-icon", { key: '822173dad75ff048010488b1c28494bd89152ec5', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -158,21 +158,21 @@ export class DuetSlideoutPanel {
         };
         const exitTranslation = getLocaleString(this.exitLangObject);
         const backTranslation = getLocaleString(this.backLangObject);
-        return (h(Host, { key: '826b4e03c6bd1a11d837c69c0cfb03e2a02ec806' }, h("div", { key: '236614595991d9fe5a593fafbd854ffd58485acc', class: {
+        return (h(Host, { key: '805cfaa182eb761f1ce6217e1c62ed5dd007a947' }, h("div", { key: '363f2f3eaf901468c5f15ad7dcba4d3b781cc500', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: '99e2effee13c3455735edab40bf5469fede73c1a', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '5ec34b3ecd11c56416277f0f4753d6dc1f8efed6', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && h("duet-icon", { key: '751ac391008a23aecf0d7f84ff7a9609abbc04a9', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'fde8fa06f82408652b3655f4adee5e99cd21cd45', class: "label" }, h("span", { key: 'b7818aab551be863114d6d7ac6529ee3fcd22ef7', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '8b2109422483b57c6a21cb4e263e83d8144f2276', name: "label" })), h("duet-icon", { key: '541ec1d29979a51b1a1d18a9b0453ea3c8f1b00a', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '8a6b84ab619429087424437536caed8d4d05628a', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && h("duet-icon", { key: '5d6a27c57dc78e388b271f0f2d6eb2cd7821c202', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'd64964aca9eea3caa8ae881296e258f08146e487', class: "label" }, h("span", { key: '6b4148f10a5d1b3065758fb5625da769c52f72ec', class: { "label-text": true, [this.labelSize]: true } }, h("slot", { key: '81eb240dd33e6fb12e4a7cca81de48fdcee2af19', name: "label" })), h("duet-icon", { key: '50cc29a5a19817e58bfcf90efa70b59b2fba9fdd', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), h("div", { key: '37829b24562f4b2815f7d4ab2affd231e7850d9e', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, h(FocusGuard, { key: '836ef8caef82089ba3b17d5afaa5bad08f999da4', moveFocusTo: this.closeButton }), h("div", { key: '10f8e89d308df9691eb69ba7b7c4f15bac425fd8', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '39cdbb723d9f39f67e618b8e590692e9a4c1c701', class: "top" }, h("button", { key: '4bc8770ac0597cae623bd0097dbe88d4dc39af55', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '866309235d2682686f46604d200cb8fb7789fd78', moveFocusTo: this.closeButton }), h("div", { key: 'bf2bc641f6c8818f917fb40b13f6b7fe5e6f208f', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '67071ec5db130b7f92587562eec7b5ebac45e1bd', class: "top" }, h("button", { key: '33da125c06f6246cd7b6a388ffa332c32b8fd374', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, h("duet-icon", { key: '6a4d622df1a1c0800ee494ab908b9fe9f8f026a9', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: '7506cec97907a13ba9b0128d77eaea32ee52612e' }, this.label.innerHTML), h("button", { key: '0073a94eb5c3593268212183b8c3d5b1561e5a15', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: '0913d58ffdd39f25b182be1dd3010d6b2c9d1705', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '22df548f77d37d3230ba043f165208f10a83dbdb', class: "sticky-header" }, h("slot", { key: '9d3c0f92ec8f24c7fb768e83adc7f83b8a9e0f75', name: "sticky-header" }))), h("div", { key: '71a5f93e693dde7b87f741695f0eefda26d0f687', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, h("duet-icon", { key: '24b7d7426f408b7aa4043495bbf6647851f7d162', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), h("span", { key: 'cd331fba8d0793d7c2b59d96e9796a50d77b4224' }, this.label.innerHTML), h("button", { key: '62fd9e793ff023422c32a9024a74b9befeb1c056', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, h("duet-icon", { key: 'de1281dc825979a6cb290a8e4faf24e53ed3c49a', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: 'c7e160049359ff2cef0e1713fc416b81461a8e44', class: "sticky-header" }, h("slot", { key: '8d216879c47672cc6479b1aa9ba76c3379d5e0ec', name: "sticky-header" }))), h("div", { key: 'b0bd9025bc1021ff7771105fc79e2c2fe4545ddc', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, h("slot", { key: 'a06f06fd10e0263f926dfc96a849caedb82ae2a9' })), h(FocusGuard, { key: '175d490d2b901e31a1da5e85d223547669ac8dd6', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: 'd48e80a480587c2dd49773b14f31ddd56fe790dc' })), h(FocusGuard, { key: '4dd1a90579416304992efa312c3999f7941d1a65', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout-panel"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-panel-dropdown/duet-slideout-panel-dropdown.js

@@ -40,16 +40,16 @@ export class DuetSlideoutPanelDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ed7c011056f2ffe923585058edffcbe6cafaea99' }, h("div", { key: '11e314367f32e42a3811b8e8e0e997b4db8f5b32', class: {
+        return (h(Host, { key: 'ae396c94bb6581cc91e2757c2c86232728315498' }, h("div", { key: '1fbc63be41621dbe711387dec4c733272b58aae4', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, h("button", { key: 'dc7ebc689b4455261fe552f17989307ea06d05c3', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: 'd3956f08bb9197d68db47cd8ce31b222a825862e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '3f877c7eba448ba92b8772f1ab57434a3f341118', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: 'd3c63a33347512677d92adef06b3b03f208bf929', class: "label" }, h("slot", { key: '94cab14a738b8d9597158aed4909062b22eda32b', name: "label" }), h("duet-icon", { key: '11d3fdc38f5c07e7425662cbaaf99fe417f0a53b', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: 'f9bd0923dbedeebfeb45a41eed9e17e3c94df35f', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && h("duet-icon", { key: '36278cab4355f36e54ff0bc873ebc27e49b146c1', name: this.icon, size: "medium", margin: "none", color: "secondary" }), h("span", { key: '5babf16dbd6ae3686423c4ece8779d69819e79e3', class: "label" }, h("slot", { key: '0d3d0f41eaf979d05c21aba744c26ffd043f9d64', name: "label" }), h("duet-icon", { key: 'd6abff8f46d22a4bbd7f4635f53e82a5a1498db1', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), h("div", { key: '6ee1b74a69107abab5c9af91a9bd9fe824741d55', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'b2a9cf03573b30f80c2e62c41e55edc9f422e7de' })))));
+            } }, h("slot", { key: '8bc5889a6505974a8929651a8abd6b4fd98e5f74' })))));
     }
     static get is() { return "duet-slideout-panel-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-spacer/duet-spacer.js

@@ -49,7 +49,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerSize"
                         }
                     }
@@ -97,7 +97,7 @@ export class DuetSpacer {
                     "references": {
                         "DuetSpacerBreakpoint": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-spacer/duet-spacer.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-spacer/duet-spacer.tsx",
                             "id": "src/components/duet-spacer/duet-spacer.tsx::DuetSpacerBreakpoint"
                         }
                     }

package/lib/collection/components/duet-spinner/duet-spinner.js

@@ -96,7 +96,7 @@ export class DuetSpinner {
                     "references": {
                         "DuetSpinnerSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-spinner/duet-spinner.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-spinner/duet-spinner.tsx",
                             "id": "src/components/duet-spinner/duet-spinner.tsx::DuetSpinnerSize"
                         }
                     }

package/lib/collection/components/duet-step/duet-step.js

@@ -202,7 +202,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepState": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepState"
                         }
                     }
@@ -280,7 +280,7 @@ export class DuetStep {
                     "references": {
                         "DuetStepClickEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-step/duet-step.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-step/duet-step.tsx",
                             "id": "src/components/duet-step/duet-step.tsx::DuetStepClickEvent"
                         }
                     }

package/lib/collection/components/duet-stepper/duet-stepper.js

@@ -225,7 +225,7 @@ export class DuetStepper {
                     "references": {
                         "DuetStepChangeEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-stepper/duet-stepper.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-stepper/duet-stepper.tsx",
                             "id": "src/components/duet-stepper/duet-stepper.tsx::DuetStepChangeEvent"
                         }
                     }