@duetds/components 8.4.4 → 8.4.6

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

@@ -0,0 +1,204 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+/**
+ * @internal
+ * This component is for internal use.
+ */
+export class DuetOverlay {
+    constructor() {
+        this.getDisplayBreakpoint = () => {
+            if (this.displayDevice.startsWith("not")) {
+                return this.displayDevice.substring(this.displayDevice.indexOf("-") + 1);
+            }
+            return this.displayDevice;
+        };
+        this.visible = true;
+        this.keepStackingContext = false;
+        this.modalOverlay = false;
+        this.theme = "";
+        this.displayDevice = "all";
+        this.transition = "slowly";
+        this.zIndex = "400";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        return (h(Host, null, h("div", { style: { zIndex: this.zIndex }, class: {
+                "duet-overlay": true,
+                "duet-theme-turva": this.theme === "turva",
+                "keep-stacking-context": this.keepStackingContext,
+                [`transition-${this.transition}`]: this.transition !== "immediate",
+                "display-x-small": this.getDisplayBreakpoint() === "x-small",
+                "display-small": this.getDisplayBreakpoint() === "small",
+                "display-medium": this.getDisplayBreakpoint() === "medium",
+                "display-large": this.getDisplayBreakpoint() === "large",
+                not: this.displayDevice.startsWith("not"),
+                hidden: !this.visible,
+            } })));
+    }
+    static get is() { return "duet-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-overlay.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Open"
+                },
+                "attribute": "visible",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "keepStackingContext": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep stacking context"
+                },
+                "attribute": "keep-stacking-context",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "modalOverlay": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Modal overlay"
+                },
+                "attribute": "modal-overlay",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "displayDevice": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "OverlayDisplayDevice",
+                    "resolved": "\"all\" | \"large\" | \"medium\" | \"not-large\" | \"not-medium\" | \"not-small\" | \"not-x-small\" | \"small\" | \"x-small\"",
+                    "references": {
+                        "OverlayDisplayDevice": {
+                            "location": "local",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-overlay/duet-overlay.tsx",
+                            "id": "src/components/duet-overlay/duet-overlay.tsx::OverlayDisplayDevice"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode"
+                },
+                "attribute": "display-device",
+                "reflect": false,
+                "defaultValue": "\"all\""
+            },
+            "transition": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "\"quickly\" | \"slowly\" | \"immediate\"",
+                    "resolved": "\"immediate\" | \"quickly\" | \"slowly\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Transition"
+                },
+                "attribute": "transition",
+                "reflect": false,
+                "defaultValue": "\"slowly\""
+            },
+            "zIndex": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-index"
+                },
+                "attribute": "z-index",
+                "reflect": false,
+                "defaultValue": "\"400\""
+            }
+        };
+    }
+}

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

@@ -409,7 +409,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-pagination/duet-pagination.tsx",
                             "id": "src/components/duet-pagination/duet-pagination.tsx::DuetPaginationVariation"
                         }
                     }
@@ -698,7 +698,7 @@ export class DuetPagination {
                     "references": {
                         "DuetPaginationPageEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-pagination/duet-pagination.tsx",
+                            "path": "/Users/laaksju3/duetds/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

@@ -109,7 +109,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphSize": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphSize"
                         }
                     }
@@ -133,7 +133,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphWeight": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
                             "id": "src/components/duet-paragraph/duet-paragraph.tsx::DuetParagraphWeight"
                         }
                     }
@@ -157,7 +157,7 @@ export class DuetParagraph {
                     "references": {
                         "DuetParagraphVariation": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-paragraph/duet-paragraph.tsx",
+                            "path": "/Users/laaksju3/duetds/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

@@ -444,7 +444,7 @@ export class DuetPopupMenu {
                     "references": {
                         "DuetPopupMenuEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu/duet-popup-menu.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-popup-menu-item/duet-popup-menu-item.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-radio/duet-radio.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/laaksju3/duetds/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/mgibas/workspace/duet/packages/components/src/components/duet-range-slider/duet-range-slider.tsx",
+                            "path": "/Users/laaksju3/duetds/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

@@ -349,7 +349,7 @@ export class DuetRangeStepper {
                     "references": {
                         "DuetRangeStepperUpdateEvent": {
                             "location": "local",
-                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-range-stepper/duet-range-stepper.tsx",
+                            "path": "/Users/laaksju3/duetds/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

@@ -35,6 +35,7 @@
   flex-basis: 40px;
   padding: 10px;
   cursor: pointer;
+  transition: all 300ms ease;
 }
 :host .duet-scrollable-items .duet-scrollable-button:active {
   transform: scale(0.8);
@@ -45,7 +46,18 @@
 :host .duet-scrollable-items .duet-scrollable-button--right {
   right: -12px;
 }
+:host .duet-scrollable-items .duet-scrollable-button--top {
+  align-self: flex-start;
+}
+:host .duet-scrollable-items .duet-scrollable-button--bottom {
+  align-self: flex-end;
+}
 :host .duet-scrollable-items .duet-scrollable-button--occluded {
+  flex-basis: 0;
+  flex-shrink: 1;
+  width: 0;
+  padding: 10px 0;
+  overflow: hidden;
   visibility: hidden;
 }
 :host .duet-scrollable-items .duet-scrollable-list {
@@ -53,6 +65,9 @@
   flex-wrap: nowrap;
   gap: 20px;
   padding-top: 2px;
+  padding-right: 5px;
+  padding-left: 5px;
+  margin: 0 -5px;
   /* Make this scrollable when needed */
   overflow-x: auto;
   /* We don't want vertical scrolling */
@@ -94,10 +109,11 @@
 }
 
 ::slotted(*) {
-  scroll-snap-align: center;
+  flex-shrink: 0;
   margin-left: 0;
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
+  scroll-snap-align: center;
 }

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

@@ -12,8 +12,7 @@ export class DuetScrollable {
          * Private variables and constants index
          */
         this.currentIndex = 0;
-        this.tabListElement = undefined;
-        this.tabListClass = "duet-scrollable-list";
+        this.scrollPaneElement = undefined;
         this.hasCollapseButtonLabelSlot = false;
         this.resizeObserver = new ResizeObserver(entries => {
             var _a, _b, _c, _d;
@@ -22,25 +21,26 @@ export class DuetScrollable {
                 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.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+                this.isScrollPaneContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
             }
         });
         this.collapsedOnClick = () => {
             this.collapsed = !this.collapsed;
         };
-        this.tablistAtStart = true;
-        this.isTabContentSmallerThanWrapper = false;
-        this.tablistAtEnd = false;
+        this.scrollPaneAtStart = true;
+        this.isScrollPaneContentSmallerThanWrapper = true;
+        this.scrollPaneAtEnd = false;
         this.childrenData = {};
         this.theme = "";
         this.identifier = "";
         this.collapsed = false;
         this.buttons = true;
+        this.buttonAlignment = "center";
         this.center = false;
         this.selected = 0;
     }
     watchPropHandler(newValue) {
-        this.scrollToTab(newValue, "center");
+        this.scrollToElement(newValue, "center");
     }
     /**
      * Component lifecycle events.
@@ -50,13 +50,9 @@ export class DuetScrollable {
         this.hasCollapseButtonLabelSlot = Build.isServer
             ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']")).length > 0
             : !!this.element.querySelector(":scope > [slot='collapse-button-label']");
-        const slotted = Build.isServer
-            ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']"))
-            : this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])");
-        this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
     }
     componentDidLoad() {
-        this.resizeObserver.observe(this.tabListElement);
+        this.resizeObserver.observe(this.scrollPaneElement);
     }
     disconnectedCallback() {
         this.resizeObserver.disconnect();
@@ -64,55 +60,58 @@ export class DuetScrollable {
     /**
      * Private methods.
      */
+    getScrollPaneElemnets() {
+        return Build.isServer
+            ? Array.from(this.element.children).filter(el => el.matches("[slot='collapse-button-label']"))
+            : Array.from(this.element.querySelectorAll(":scope > :not([slot='collapse-button-label'])"));
+    }
     getLastVisibleElement() {
-        const clientWidth = this.tabListElement.clientWidth;
-        const xValues = Array.from(this.element.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
-        return xValues;
+        const clientWidth = this.scrollPaneElement.clientWidth;
+        const elementIndex = this.getScrollPaneElemnets().findIndex(el => el.getBoundingClientRect().x > clientWidth);
+        return elementIndex;
     }
     getFirstVisibleElement() {
-        const buttonCollection = this.element.querySelectorAll("button");
-        // reverse the array because we want the first invisible element form the middle, not the first in the list
-        const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
-        const xValues = arrayOfXValues.findIndex(element => {
-            return element > 0;
+        const arrayOfXValues = this.getScrollPaneElemnets().map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+        const elementIndex = arrayOfXValues.findIndex(xValue => {
+            return xValue > 0;
         });
-        return xValues;
+        return elementIndex;
     }
-    updateScrollButtons(container = this.tabListElement) {
+    updateScrollButtons(container = this.scrollPaneElement) {
         if (!this.buttons) {
             return;
         }
         if (container.scrollLeft <= 0) {
-            this.tablistAtStart = true;
+            this.scrollPaneAtStart = true;
         }
         else if (container.scrollLeft > 0) {
-            this.tablistAtStart = false;
+            this.scrollPaneAtStart = false;
         }
         if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
-            this.tablistAtEnd = true;
+            this.scrollPaneAtEnd = true;
         }
         else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
-            this.tablistAtEnd = false;
+            this.scrollPaneAtEnd = false;
         }
     }
-    scrollToTab(index = this.currentIndex, inline) {
-        if (!this.childrenData.hasChildren) {
+    scrollToElement(index = this.currentIndex, inline) {
+        const elements = this.getScrollPaneElemnets();
+        if (!elements || elements.length === 0) {
             return;
         }
-        if (index + 1 >= this.childrenData.numberOfChildren) {
-            index = this.childrenData.numberOfChildren - 1;
+        if (index + 1 >= elements.length) {
+            index = elements.length - 1;
         }
         if (index < 0) {
             index = 0;
         }
-        const buttons = this.element.querySelectorAll("button");
         // store previous position
-        let prevPosition = buttons[0].getBoundingClientRect().x;
+        let prevPosition = elements[0].getBoundingClientRect().x;
         // iterations to run
         let ticksWhereScrollDidNotHappen = 5;
         const getAnimationFrame = () => {
             // if we get the same value enter the logic loop
-            if (buttons[0].getBoundingClientRect().x === prevPosition) {
+            if (elements[0].getBoundingClientRect().x === prevPosition) {
                 ticksWhereScrollDidNotHappen--;
                 // When iteration is not complete run the calculation again
                 if (ticksWhereScrollDidNotHappen !== 0) {
@@ -123,21 +122,21 @@ export class DuetScrollable {
             }
             else {
                 window.requestAnimationFrame(getAnimationFrame);
-                prevPosition = buttons[0].getBoundingClientRect().x;
+                prevPosition = elements[0].getBoundingClientRect().x;
             }
         };
-        buttons[index].scrollIntoView({ behavior: "smooth", inline });
+        elements[index].scrollIntoView({ behavior: "smooth", inline });
         window.requestAnimationFrame(getAnimationFrame);
     }
     scrollLeft() {
-        this.tablistAtEnd = false;
+        this.scrollPaneAtEnd = false;
         const first = this.getFirstVisibleElement() - 1;
-        this.scrollToTab(first, "center");
+        this.scrollToElement(first, "center");
     }
     scrollRight() {
-        this.tablistAtStart = false;
+        this.scrollPaneAtStart = false;
         const last = this.getLastVisibleElement() + 1;
-        this.scrollToTab(last, "center");
+        this.scrollToElement(last, "center");
     }
     /**
      * render() function
@@ -149,23 +148,25 @@ export class DuetScrollable {
                 "duet-theme-default": this.theme === "default",
             } }, this.hasCollapseButtonLabelSlot && (h("div", { class: {
                 collapse: true,
-                hide: !this.isTabContentSmallerThanWrapper && !this.collapsed,
+                hide: !this.isScrollPaneContentSmallerThanWrapper && !this.collapsed,
             } }, h("duet-button", { variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { name: "collapse-button-label" })))), h("div", { class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
             } }, h("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--left": true,
-                "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-            }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
-                [this.tabListClass]: true,
+                "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
+            }, onClick: () => this.scrollLeft(), disabled: this.scrollPaneAtStart, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h("div", { class: {
+                "duet-scrollable-list": true,
                 collapsed: this.collapsed,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", null)), h("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 "duet-scrollable-button--right": true,
-                "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
-            }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+                "duet-scrollable-button--occluded": !this.isScrollPaneContentSmallerThanWrapper,
+            }, onClick: () => this.scrollRight(), disabled: this.scrollPaneAtEnd, tabindex: "-1", hidden: !this.buttons }, h("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -259,6 +260,24 @@ export class DuetScrollable {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "buttonAlignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"top\" | \"center\" | \"bottom\"",
+                    "resolved": "\"bottom\" | \"center\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical alignment of the previous and forward buttons. Defaults to center."
+                },
+                "attribute": "button-alignment",
+                "reflect": false,
+                "defaultValue": "\"center\""
+            },
             "center": {
                 "type": "boolean",
                 "mutable": false,
@@ -299,9 +318,9 @@ export class DuetScrollable {
     }
     static get states() {
         return {
-            "tablistAtStart": {},
-            "isTabContentSmallerThanWrapper": {},
-            "tablistAtEnd": {},
+            "scrollPaneAtStart": {},
+            "isScrollPaneContentSmallerThanWrapper": {},
+            "scrollPaneAtEnd": {},
             "childrenData": {}
         };
     }