@duetds/components 9.0.2 → 9.1.1

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -285,7 +285,7 @@ export class DuetNotificationDrawer {
                     "references": {
                         "DuetNotificationDrawerDirection": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-notification-drawer/duet-notification-drawer.tsx",
                             "id": "src/components/duet-notification-drawer/duet-notification-drawer.tsx::DuetNotificationDrawerDirection"
                         }
                     }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -1032,7 +1032,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1053,7 +1053,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1074,7 +1074,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }
@@ -1095,7 +1095,7 @@ export class DuetNumberInput {
                     "references": {
                         "DuetNumberInputEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-number-input/duet-number-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-number-input/duet-number-input.tsx",
                             "id": "src/components/duet-number-input/duet-number-input.tsx::DuetNumberInputEvent"
                         }
                     }

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

@@ -150,7 +150,7 @@ export class DuetOverlay {
                     "references": {
                         "OverlayDisplayDevice": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-overlay/duet-overlay.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-overlay/duet-overlay.tsx",
                             "id": "src/components/duet-overlay/duet-overlay.tsx::OverlayDisplayDevice"
                         }
                     }

package/lib/collection/components/duet-page-heading/duet-page-heading.css

@@ -39,6 +39,13 @@
 .duet-page-heading.duet-m-0 {
   margin: 0 !important;
 }
+.duet-page-heading.auto {
+  overflow: visible;
+}
+.duet-page-heading.auto .heading,
+.duet-page-heading.auto .background {
+  max-width: none;
+}
 .duet-page-heading.fluid, .duet-page-heading.narrow {
   padding: 0 16px;
 }

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -23,12 +23,13 @@ export class DuetPageHeading {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '8f551a035b22986d0be89b63878c40881ab194de', class: {
+        const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
+        return (h("div", { key: '9f8446416ddfb863e8b7675694a941c8a5a08810', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
-                [this.layout]: true,
-            } }, h("div", { key: '3c2da3f7140116830a93f8f5540dd5b86e120069', class: "background" }, this.theme === "turva" && h("div", { key: '3e86bf61e372858174fd9480ffd27e55f8bd7f18', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '71d96c85656113166e6deac2ced606d7708f89fb', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '8a8a0beeaa6519f58cae0fd33e42767f3810d85a', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '156f7d3040ad56612bd65c3f353b4cb07191a3f2', class: "brand-shaped-icon" }, h("duet-icon", { key: 'afd8b09cc616b652655cd4114848bb9f3112bb27', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '0610e27dbc186a87adae00201d5fbfb0576078cf', class: "heading" }, h("slot", { key: '63c9609aad6a4203b8bc6f72d65d17fd86056415', name: "heading" }))));
+                [layout]: true,
+            } }, h("div", { key: 'd2c79bf4b43476d774997990f9ff2eb10bd5c5eb', class: "background" }, this.theme === "turva" && h("div", { key: '5f2cd53a57c83e72eea3cd6c8e05440282de604d', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '5d076b45bd423d3ac5c829fb75e02310fc2de935', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '95f49a37ec75c6aeb261291ab21bcbf78c182d51', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'd7d88d2a72ea954d7b60a657e04df7af66e47f0f', class: "brand-shaped-icon" }, h("duet-icon", { key: '1b7e9dfb264e9d9442b5b4aa76fc86868586290c', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'acca7abdb93a35bea48f112af238f61993dd1b1c', class: "heading" }, h("slot", { key: 'd236024e713e2924eabcd18e18260b348cd4dc53', name: "heading" }))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -96,15 +97,15 @@ export class DuetPageHeading {
                 "type": "string",
                 "mutable": true,
                 "complexType": {
-                    "original": "\"narrow\" | \"fluid\"",
-                    "resolved": "\"fluid\" | \"narrow\"",
+                    "original": "\"narrow\" | \"fluid\" | \"auto\"",
+                    "resolved": "\"auto\" | \"fluid\" | \"narrow\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Layout."
+                    "text": "Layout.\nValues narrow and fluid are deprecated."
                 },
                 "attribute": "layout",
                 "reflect": false,

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

@@ -436,7 +436,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationVariation": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
                         }
                     }
@@ -725,7 +725,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationPageEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationPageEvent"
                         }
                     }

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

@@ -113,7 +113,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphSize": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphSize"
                         }
                     }
@@ -137,7 +137,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphWeight": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphWeight"
                         }
                     }
@@ -161,7 +161,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphVariation": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphVariation"
                         }
                     }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -473,7 +473,7 @@ export class DuetPopupMenu {
                     "references": {
                         "DuetPopupMenuEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
                             "id": "src/components/duet-popup-menu/duet-popup-menu.tsx::DuetPopupMenuEvent"
                         }
                     }

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -341,7 +341,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }
@@ -362,7 +362,7 @@ export class DuetPopupMenuItem {
                     "references": {
                         "DuetPopupMenuItemEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
                             "id": "src/components/duet-popup-menu-item/duet-popup-menu-item.tsx::DuetPopupMenuItemEvent"
                         }
                     }

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

@@ -546,7 +546,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -567,7 +567,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRadio {
                     "references": {
                         "DuetRadioEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-radio/duet-radio.tsx",
                             "id": "src/components/duet-radio/duet-radio.tsx::DuetRadioEvent"
                         }
                     }

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -567,7 +567,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }
@@ -588,7 +588,7 @@ export class DuetRangeSlider {
                     "references": {
                         "DuetRangeChangeEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
                             "id": "src/components/duet-range-slider/duet-range-slider.tsx::DuetRangeChangeEvent"
                         }
                     }

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

@@ -379,7 +379,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/administrator/duetds/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
                             "id": "src/components/duet-range-stepper/duet-range-stepper.tsx::DuetRangeStepperUpdateEvent"
                         }
                     }

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"; }