@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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

@@ -30,39 +30,6 @@
   position: relative;
   display: flex;
 }
-:host .duet-scrollable-items .duet-scrollable-fade-overlay {
-  position: absolute;
-  bottom: 0;
-  z-index: 250;
-  display: block;
-  width: 10px;
-  height: 100%;
-  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));
-}
-: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;
   flex: 0 0 auto;
@@ -76,6 +43,21 @@
   overflow: hidden;
   visibility: hidden;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute {
+  position: absolute;
+  top: 0;
+  z-index: 210;
+  width: auto;
+  height: 100%;
+  padding: 0 16px;
+  background-color: rgb(255, 255, 255);
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left {
+  left: 0;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right {
+  right: 0;
+}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button {
   position: absolute;
   display: flex;
@@ -104,16 +86,37 @@
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--bottom {
   align-items: flex-end;
 }
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute {
+  padding: 0 7px;
+  border: 1px solid rgb(212, 223, 229);
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--left {
+  border-radius: 8px 0 0 8px;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute.duet-scrollable-button--right {
+  border-radius: 0 8px 8px 0;
+}
+:host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(0, 119, 179);
+  border-width: 2px;
+  /* stylelint-disable */
+  /* too deep nesting */
+  /* stylelint-enable */
+}
+.duet-theme-turva :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(113, 118, 132);
+}
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button[hidden] {
   display: none !important;
 }
+:host .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(113, 118, 132);
+}
 :host .duet-scrollable-items .duet-scrollable-list {
   display: flex;
   flex-wrap: nowrap;
-  gap: 20px;
-  padding-right: 10px;
-  padding-left: 10px;
-  margin: 0 -10px;
+  padding-inline: 10px;
+  margin-inline: -10px;
   /* Make this scrollable when needed */
   overflow-x: auto;
   /* We don't want vertical scrolling */
@@ -129,6 +132,24 @@
   /* For WebKit implementations, provide inertia scrolling */
   -webkit-overflow-scrolling: touch;
   /* Remove the default scrollbar for WebKit implementations */
+  -webkit-mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
+  -webkit-mask-size: 50% 100%, 50% 100%;
+  -webkit-mask-position: left, right;
+  -webkit-mask-repeat: no-repeat;
+  mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
+  mask-size: 50% 100%, 50% 100%;
+  mask-position: left, right;
+  mask-repeat: no-repeat;
+  /* For absolutely positioned buttons, we remove the fade overlay
+     and adjust padding/margin to account for tab group's 2px wide border,
+     to prevent overflow. */
+}
+:host .duet-scrollable-items .duet-scrollable-list--absolute {
+  padding-right: 0;
+  padding-left: 2px;
+  margin-inline: 0;
+  -webkit-mask: none !important;
+  mask: none !important;
 }
 :host .duet-scrollable-items .duet-scrollable-list:not(.buttons) {
   white-space: normal;
@@ -139,6 +160,12 @@
 :host .duet-scrollable-items .duet-scrollable-list.collapsed {
   flex-wrap: wrap;
 }
+:host .duet-scrollable-items .duet-scrollable-list.gap-none {
+  gap: 0;
+}
+:host .duet-scrollable-items .duet-scrollable-list.gap-large {
+  gap: 20px;
+}
 :host .duet-scrollable-items .duet-scrollable-list.duet-overflow-padding--xx-small {
   padding-top: 4px;
   padding-bottom: 4px;
@@ -155,6 +182,9 @@
   padding-top: 16px;
   padding-bottom: 16px;
 }
+:host .duet-scrollable-items .duet-scrollable-list.duet-scrollable-stretch {
+  width: 100%;
+}
 :host .duet-scrollable-items.center {
   justify-content: center;
 }

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

@@ -15,30 +15,71 @@ export class DuetScrollable {
         this.currentIndex = 0;
         this.scrollPaneElement = undefined;
         this.hasCollapseButtonLabelSlot = false;
+        this.scrollPaneAtStart = true;
+        this.needsScrolling = true;
+        this.scrollPaneAtEnd = false;
+        this.childrenData = {};
         /**
          * Observer to check if the scrollable content is wider than the scroll pane,
          * and thus needs scrolling.
          */
         this.resizeObserver = new ResizeObserver(entries => {
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                this.checkScrollingNeeded(entries[0].target);
+                const threshold = this.getOverlayWidth();
+                this.checkScrollingNeeded(entries[0].target, threshold);
             }
         });
-        this.collapsedOnClick = () => {
-            this.collapsed = !this.collapsed;
-        };
-        this.scrollPaneAtStart = true;
-        this.needsScrolling = true;
-        this.scrollPaneAtEnd = false;
-        this.childrenData = {};
+        /**
+         * Theme of duet-tab-scrollable. When used this will override the color setting and
+         * use "primary" or "primary-turva" as the color depending on which theme
+         * is chosen.
+         */
         this.theme = "";
+        /**
+         * Optional identifier to add to buttons in the tab group
+         */
         this.identifier = "";
+        /**
+         * Boolean to collapse scrollable items into normal flow.
+         */
         this.collapsed = false;
+        /**
+         * Whether or not include previous and forward buttons. Defaults to true.
+         */
         this.buttons = true;
+        /**
+         * Vertical alignment of the previous and forward buttons. Defaults to center.
+         */
         this.buttonAlignment = "center";
+        /**
+         * @internal
+         */
+        this.buttonPosition = "relative";
+        /**
+         * Center the scrollable list. Defaults to false.
+         */
         this.center = false;
+        /**
+         * Whether to add padding to the scrollable list to account for
+         * overflowing elements, such as shadows or outlines.
+         */
         this.padding = "none";
+        /**
+         * @internal
+         */
+        this.gap = "large";
+        /**
+         * Selected element
+         */
         this.selected = 0;
+        /**
+         * Enables stretch mode for tab groups
+         * @internal
+         */
+        this.stretch = false;
+        this.collapsedOnClick = () => {
+            this.collapsed = !this.collapsed;
+        };
     }
     watchPropHandler(newValue) {
         this.scrollToElement(newValue, "center");
@@ -53,7 +94,8 @@ export class DuetScrollable {
     componentDidLoad() {
         requestAnimationFrame(() => {
             if (this.scrollPaneElement) {
-                this.checkScrollingNeeded();
+                const threshold = this.buttonPosition === "absolute" ? 0 : 5;
+                this.checkScrollingNeeded(this.scrollPaneElement, threshold);
                 this.updateScrollButtons();
                 this.resizeObserver.observe(this.scrollPaneElement);
             }
@@ -70,15 +112,20 @@ export class DuetScrollable {
     }
     /**
      * Check if scrolling is needed.
+     *
+     * @param element - The element to check.
+     * @param threshold - The threshold to allow content to be slightly wider before showing buttons.
+     *                    Defaults to half of the overlay width, since gradient is 10px wide with 50/50 split.
      */
-    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 10) {
+    checkScrollingNeeded(element = this.scrollPaneElement, threshold = 5) {
+        var _a;
         if (!element) {
             return;
         }
-        const scrollPaneWidth = element.getBoundingClientRect().width;
-        const totalContentWidth = element.scrollWidth;
-        this.needsScrolling = totalContentWidth > scrollPaneWidth + threshold;
-        // Update scroll buttons whenever we check if scrolling is needed
+        const parentWidth = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        const contentWidth = element.scrollWidth;
+        const overlayWidth = this.getOverlayWidth() * 2;
+        this.needsScrolling = contentWidth - overlayWidth > parentWidth + threshold;
         if (!this.needsScrolling) {
             this.scrollPaneAtStart = true;
             this.scrollPaneAtEnd = true;
@@ -131,12 +178,10 @@ export class DuetScrollable {
         else if (container.scrollLeft > 0) {
             this.scrollPaneAtStart = false;
         }
-        if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
-            this.scrollPaneAtEnd = true;
-        }
-        else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
-            this.scrollPaneAtEnd = false;
-        }
+        // Round both values to handle sub-pixel precision issues
+        const visibleContentWidth = Math.round(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
+        const totalContentWidth = Math.round(container.scrollWidth);
+        this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
     }
     scrollToElement(index = this.currentIndex, inline) {
         const elements = this.getScrollPaneElements();
@@ -182,12 +227,8 @@ 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,
-            } }));
+    getOverlayWidth() {
+        return this.buttonPosition === "absolute" ? 0 : 10;
     }
     renderButton(direction) {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
@@ -205,8 +246,10 @@ export class DuetScrollable {
                 "duet-scrollable-button-container": true,
                 [`${direction}`]: true,
                 "duet-scrollable-button-container--occluded": !this.needsScrolling,
-            } }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
+                [`duet-scrollable-button-container--${this.buttonPosition}`]: true,
+            }, hidden: !this.buttons || (this.buttonPosition === "absolute" && scrollPaneLocation) }, h("span", { part: `${this.identifier}-button-${direction}`, "aria-hidden": "true", class: {
                 "duet-scrollable-button": true,
+                [`duet-scrollable-button--${this.buttonPosition}`]: true,
                 [`duet-scrollable-button--${this.buttonAlignment}`]: true,
                 [`duet-scrollable-button--${direction}`]: true,
             }, onClick: () => {
@@ -215,28 +258,33 @@ export class DuetScrollable {
                     ;
                     document.activeElement.blur();
                 }
-            }, hidden: !this.buttons || scrollPaneLocation }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: "small", margin: "none" }))));
+            }, hidden: !this.buttons || scrollPaneLocation }, h("duet-icon", { color: scrollPaneLocation ? arrowColorDisabled : arrowColor, name: direction === "left" ? "action-arrow-left" : "action-arrow-right", size: this.buttonPosition === "absolute" ? "x-small" : "small", margin: "none" }))));
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'b4198b556c21a0b793694cfc88c23d2ae01d50bf', class: {
+        return (h(Host, { key: 'dabca4939b3be30f3d3ecd1b9f68e52456269e0a', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'c15a9e37829ff7f41eb5c90156f78086777a44d7', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '2ff182f33a6de936878bb0c8fa90609b298b2e8f', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '69ac59727a4efdf372e05a241e53f3f465278782', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '9ae0e03e390f546425e0c4a36ba4e1b14e9df548', name: "collapse-button-label" })))), h("div", { key: '693aa91ad582ae80b569a3d1c1cdcd6a2fd5b4fc', class: {
+            } }, h("duet-button", { key: '7c7cfad3a7ca7252d6b5353eb8983d31d5fc6532', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '7e7ad479953be49eb8c6868e0afe130ef8f8e719', name: "collapse-button-label" })))), h("div", { key: '437ccb24c0eb10de320c28e54d1fbcaaba37ba43', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
-            } }, this.buttons && this.renderButton("left"), this.renderFadeOverlay("left"), h("div", { key: 'f24739dbd27c222602e2aaf283e1ebdbc9a4af0b', class: {
+                "duet-theme-turva": this.theme === "turva",
+            } }, this.buttons && this.renderButton("left"), h("div", { key: '9f6b170c54152d4778e09e581199897ea6da96ad', class: {
                 "duet-scrollable-list": true,
+                [`duet-scrollable-list--${this.buttonPosition}`]: true,
+                [`gap-${this.gap}`]: true,
                 collapsed: this.collapsed,
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'a27f4a34f1c196b441eebf291c9cfd9e2a632299' })), this.renderFadeOverlay("right"), this.buttons && this.renderButton("right"))));
+                [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
+                "duet-scrollable-stretch": this.stretch,
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'cb3852e8f2c7c5a3114a9c373f10d0ec878707e7' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -254,6 +302,7 @@ export class DuetScrollable {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -274,12 +323,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -294,12 +343,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "collapsed": {
                 "type": "boolean",
+                "attribute": "collapsed",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -314,12 +363,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsed",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "buttons": {
                 "type": "boolean",
+                "attribute": "buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -334,12 +383,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "buttons",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "buttonAlignment": {
                 "type": "string",
+                "attribute": "button-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"center\" | \"bottom\"",
@@ -354,12 +403,35 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-alignment",
                 "reflect": false,
                 "defaultValue": "\"center\""
             },
+            "buttonPosition": {
+                "type": "string",
+                "attribute": "button-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"absolute\" | \"relative\"",
+                    "resolved": "\"absolute\" | \"relative\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"relative\""
+            },
             "center": {
                 "type": "boolean",
+                "attribute": "center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -374,12 +446,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetOverflowPadding",
@@ -400,12 +472,35 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"none\""
             },
+            "gap": {
+                "type": "string",
+                "attribute": "gap",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"none\" | \"large\"",
+                    "resolved": "\"large\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"large\""
+            },
             "selected": {
                 "type": "number",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -420,9 +515,31 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "0"
+            },
+            "stretch": {
+                "type": "boolean",
+                "attribute": "stretch",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Enables stretch mode for tab groups"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -25,9 +25,6 @@
   width: 100%;
 }
 
-:host(.duet-middle) {
-  display: flex;
-}
 :host(.duet-middle) .duet-layout {
   padding: 36px 28px !important;
 }

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

@@ -5,8 +5,18 @@ import { h, Host } from "@stencil/core";
 import isInternetExplorer from "../../utils/is-internet-explorer";
 export class DuetSectionLayout {
     constructor() {
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Align container vertically in the middle when the space allows it.
+         */
         this.middle = false;
+        /**
+         * Breakpoint used to remove padding. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
         this.paddingBreakpoint = undefined;
     }
     /**
@@ -14,13 +24,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '7f434babace607653e64faabeddb9c27bb616862', class: {
+        return (h(Host, { key: '6e87a8404b55791ef09fbe67defcf0b1926f28f1', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '9fbdea587d94910e97eb9ecbea464c1778fc1ff8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'f4c957ebabd014d3ebf626d7539f3542314ce0a1', class: {
+            } }, h("div", { key: '7dbb8ba1ffa4a6c80fdef3d109aa5acd1e801bfb', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'b98ee3ba1f0de7404f3b94073e0d430c3433d209', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'd803f587fb3f7f481d22d2a3e3566bcd85c7f98b', class: "duet-main" }, h("slot", { key: 'fb1c82948b2d25d0437c41743abf0f9ed666b4d5' }))))));
+            } }, h("section", { key: '82ab08ebb3a64ecefa53ff85fe51907347eb81e2', class: "duet-main" }, h("slot", { key: 'f4117e551edc8c13d703686fd4679cb37bb44244' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -38,6 +48,7 @@ export class DuetSectionLayout {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -58,12 +69,12 @@ export class DuetSectionLayout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "middle": {
                 "type": "boolean",
+                "attribute": "middle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -78,12 +89,12 @@ export class DuetSectionLayout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "middle",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "paddingBreakpoint": {
                 "type": "string",
+                "attribute": "padding-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetBreakpoints",
@@ -104,7 +115,6 @@ export class DuetSectionLayout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding-breakpoint",
                 "reflect": false,
                 "defaultValue": "undefined"
             }