@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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

@@ -8,6 +8,130 @@ import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLan
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
     constructor() {
+        /**
+         * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        this.accessiblePopup = "false";
+        /**
+         * Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Loading state of the button
+         */
+        this.loading = false;
+        /**
+         * Style variation of the button.
+         * @negative - value is deprecated and should be used in combination with negative prop in the future
+         * @destructive - value is deprecated and should be replace with destructive-secondary
+         */
+        this.variation = "default";
+        /**
+         * Negative variation, can be combined with Variation to produce negative versions
+         */
+        this.negative = false;
+        /**
+         * Theme of the button.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Controls the padding of the plain variation button - has no effect for other variations.
+         */
+        this.padding = "auto";
+        /**
+         * Centers the text of a button
+         */
+        this.centerText = false;
+        /**
+         * Controls the text wrapping.
+         */
+        this.wrapping = "auto";
+        /**
+         * Expands the button to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Keep the button fixed width even on mobile viewports.
+         */
+        this.fixed = false;
+        /**
+         * Makes the button component disabled. This prevents users from being able to
+         * interact with the button, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to submit a form.
+         */
+        this.submit = false;
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+        /**
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
+        this.language = getLanguage();
+        /**
+         * Property to change accessibleLabelExternal defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
+        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Property to change accessibleLabelLoading defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelLoading when needed
+         * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"}
+         */
+        this.accessibleLabelLoadingDefaults = DuetStringsLoadingDefaults;
+        /**
+         * Adds accessible label for button in "loading" state
+         * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"}
+         */
+        this.accessibleLabelLoading = getLocaleString(this.accessibleLabelLoadingDefaults);
+        /**
+         * Icon to display to the left of the button content.
+         * This is ignored/overridden when button is used as an external link.
+         */
+        this.icon = "";
+        /**
+         * Custom color to be used for text, as a design token entered in camelCase or
+         * kebab-case. Example: "color-primary".
+         */
+        this.color = "";
+        /**
+         * Show icon on the right side of the button content.
+         */
+        this.iconRight = false;
+        /**
+         * Icon size.
+         */
+        this.iconSize = "medium";
+        /**
+         * Button’s size.
+         */
+        this.size = "medium";
+        /**
+         * Whether this button should use styles meant for displaying just an icon.
+         */
+        this.iconOnly = false;
         this.proxyButtonSetUp = () => {
             const slottedElement = this.element.querySelector("button[slot=proxybutton]");
             const button = slottedElement || document.createElement("button");
@@ -52,7 +176,8 @@ export class DuetButton {
             // climb up the dom to see if we're in a <form>
             // and if so, then use JS to submit it.
             // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
-            if (!this.url && (this.element.closest("form") || this.form) && ev.target === this.element) {
+            if (this.submit && !this.url && (this.element.closest("form") || this.form)) {
+                ev.stopPropagation();
                 ev.preventDefault();
                 this.proxyButton.click();
             }
@@ -63,46 +188,6 @@ export class DuetButton {
         this.onBlur = () => {
             this.duetBlur.emit();
         };
-        this.accessibleLabel = undefined;
-        this.accessibleControls = undefined;
-        this.accessiblePopup = "false";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessiblePressed = undefined;
-        this.loading = false;
-        this.variation = "default";
-        this.negative = false;
-        this.theme = "";
-        this.margin = "auto";
-        this.form = undefined;
-        this.padding = "auto";
-        this.centerText = false;
-        this.wrapping = "auto";
-        this.expand = false;
-        this.fixed = false;
-        this.disabled = false;
-        this.name = undefined;
-        this.value = undefined;
-        this.identifier = undefined;
-        this.submit = false;
-        this.external = false;
-        this.language = getLanguage();
-        this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
-        this.accessibleLabelLoadingDefaults = DuetStringsLoadingDefaults;
-        this.accessibleLabelLoading = getLocaleString(this.accessibleLabelLoadingDefaults);
-        this.icon = "";
-        this.color = "";
-        this.iconRight = false;
-        this.iconSize = "medium";
-        this.size = "medium";
-        this.iconOnly = false;
-        this.url = undefined;
     }
     /**
      * Component lifecycle events.
@@ -126,16 +211,15 @@ export class DuetButton {
         ]);
     }
     disconnectedCallback() {
-        if (this.proxyButton) {
-            this.proxyButton = null;
-        }
         disconnectLanguageChangeObserver(this);
     }
     componentDidRender() {
         if (this.disabled === false) {
             this.element.removeAttribute("disabled");
         }
-        this.proxyButtonSetUp();
+        if (this.submit) {
+            this.proxyButtonSetUp();
+        }
     }
     getButtonType() {
         return this.submit ? "submit" : "button";
@@ -173,12 +257,12 @@ export class DuetButton {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (h("span", { key: '5a0c6410ac691a86fc5015ab7db83c969dc3bad1', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (h("span", { key: 'e40d495dc3100c27f283c4e35c5e9a27c98464c2', "aria-hidden": "true", class: {
+        const commonChildren = (h("span", { key: '4b6618222c037ec329c118f7ad247b9fd514e878', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color, this.theme) } }, icon && (h("span", { key: '67492c9b50231879ba232f7c6bcdadcb2d219875', "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { key: '96a0389f3704e534f2c4da39243f6f7b87038f6f', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: 'cbc6c347c96296ed4f4afa3963a12495fea09884', class: "duet-button-contents-slot" }, h("slot", { key: '894a6a4e9f03f813a7e8918abf87ef9ceabecbc3' }))));
+            } }, h("duet-icon", { key: 'fce0630d78df187c2a7f3946ff3d262c43e5ce95', size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { key: '34d608211bac6921c4aec51f71a9b33e2ac2b7b0', class: "duet-button-contents-slot" }, h("slot", { key: 'b2478d851993c148be6a83a76f9f725469bc9944' }))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -213,7 +297,7 @@ export class DuetButton {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (h(Host, { key: '24621240c8dcf778398f04e79c780bade455090f', onClick: this.handleClick, class: {
+        return (h(Host, { key: 'c70e2d9cbe884c7b6cc3012721f01ce6d54b4555', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -221,13 +305,13 @@ export class DuetButton {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, h("span", { key: 'ca827a33826b3c42662ccd5a079d8327b9b6175e', class: {
+            } }, h("span", { key: 'c8be7792d2ae572befbfbe921a3ec453c073637d', onClick: this.handleClick, class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "), h("slot", { name: "proxybutton" }))), this.loading && h("duet-spinner", { key: '7e1e99a1cc8724ea6db15316084259e62926b82b', color: "currentColor" }))));
+            } }, this.url ? (h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && h("duet-spinner", { key: 'da956cda627d2afc5084ee69629b54ffabcb672b', color: "currentColor" })), h("slot", { key: '0ead01a475d6242c0049a259f9b9c725830d4b80', name: "proxybutton" })));
     }
     static get is() { return "duet-button"; }
     static get encapsulation() { return "shadow"; }
@@ -245,6 +329,7 @@ export class DuetButton {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -259,11 +344,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -278,11 +363,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -297,12 +382,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": false,
                 "defaultValue": "\"false\""
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -317,11 +402,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -336,11 +421,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -355,11 +440,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -374,12 +459,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -394,12 +479,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -414,12 +499,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -434,11 +519,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": false
             },
             "accessiblePressed": {
                 "type": "boolean",
+                "attribute": "accessible-pressed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -453,11 +538,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-pressed",
                 "reflect": false
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -472,16 +557,16 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonVariation",
-                    "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"input-button-embedded\" | \"input-button-primary\" | \"input-button-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\" | \"square\"",
+                    "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"input-button-embedded\" | \"input-button-left-primary\" | \"input-button-left-secondary\" | \"input-button-primary\" | \"input-button-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\" | \"square\"",
                     "references": {
                         "DuetButtonVariation": {
                             "location": "local",
@@ -504,12 +589,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "negative": {
                 "type": "boolean",
+                "attribute": "negative",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -524,12 +609,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "negative",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -550,12 +635,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -576,12 +661,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "form": {
                 "type": "string",
+                "attribute": "form",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -596,11 +681,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "form",
                 "reflect": false
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -621,12 +706,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "centerText": {
                 "type": "boolean",
+                "attribute": "center-text",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonTextCentering",
@@ -647,12 +732,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center-text",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "wrapping": {
                 "type": "string",
+                "attribute": "wrapping",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonWrapping",
@@ -673,12 +758,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "wrapping",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -693,12 +778,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fixed": {
                 "type": "boolean",
+                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -713,12 +798,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fixed",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -733,12 +818,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -753,11 +838,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -772,11 +857,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -791,11 +876,11 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "submit": {
                 "type": "boolean",
+                "attribute": "submit",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -810,12 +895,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "submit",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -830,12 +915,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -862,12 +947,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -891,12 +976,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -914,12 +999,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "accessibleLabelLoadingDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-loading-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -943,12 +1028,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-loading-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsLoadingDefaults"
             },
             "accessibleLabelLoading": {
                 "type": "string",
+                "attribute": "accessible-label-loading",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -966,12 +1051,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-loading",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelLoadingDefaults)"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -992,12 +1077,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -1018,12 +1103,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1038,12 +1123,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-right",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonIconSize",
@@ -1064,12 +1149,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonSize",
@@ -1090,12 +1175,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "iconOnly": {
                 "type": "boolean",
+                "attribute": "icon-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1110,12 +1195,12 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-only",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1130,7 +1215,6 @@ export class DuetButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": true
             }
         };