@duetds/components 8.0.6 → 8.1.1

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

@@ -7,1085 +7,1086 @@ import { DuetStringsExternalDefaults, DuetStringsLoadingDefaults } from "../../c
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
-  constructor() {
+    constructor() {
+        /**
+         * Component event handling.
+         */
+        this.handleClick = (ev) => {
+            // If this button wants to specifically submit a form
+            // 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")) {
+                ev.preventDefault();
+                this.proxyButton.click();
+            }
+        };
+        this.onFocus = () => {
+            this.duetFocus.emit();
+        };
+        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.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 event handling.
+     * Component lifecycle events.
      */
-    this.handleClick = (ev) => {
-      // If this button wants to specifically submit a form
-      // 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")) {
-        ev.preventDefault();
-        this.proxyButton.click();
-      }
-    };
-    this.onFocus = () => {
-      this.duetFocus.emit();
-    };
-    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.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.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-    if (this.url && this.external && this.icon) {
-      console.warn("[DUET]: Button used as an external link will override any icon that is set");
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+        if (this.url && this.external && this.icon) {
+            console.warn("[DUET]: Button used as an external link will override any icon that is set");
+        }
+    }
+    connectedCallback() {
+        this.proxyButton = document.createElement("button");
+        this.proxyButton.style.display = "none";
+        this.syncToProxyButton();
+        connectLanguageChangeObserver(this, [
+            {
+                prop: "accessibleLabelExternal",
+                defaults: "accessibleLabelExternalDefaults",
+            },
+            {
+                prop: "accessibleLabelLoading",
+                defaults: "accessibleLabelLoadingDefaults",
+            },
+        ]);
+        if (!this.url && this.element.closest("form")) {
+            this.element.insertAdjacentElement("beforebegin", this.proxyButton);
+        }
+    }
+    disconnectedCallback() {
+        this.proxyButton.remove();
+        this.proxyButton = null;
+        disconnectLanguageChangeObserver(this);
     }
-  }
-  connectedCallback() {
-    this.proxyButton = document.createElement("button");
-    this.proxyButton.style.display = "none";
-    this.syncToProxyButton();
-    connectLanguageChangeObserver(this, [
-      {
-        prop: "accessibleLabelExternal",
-        defaults: "accessibleLabelExternalDefaults",
-      },
-      {
-        prop: "accessibleLabelLoading",
-        defaults: "accessibleLabelLoadingDefaults",
-      },
-    ]);
-    if (!this.url && this.element.closest("form")) {
-      this.element.insertAdjacentElement("beforebegin", this.proxyButton);
+    syncToProxyButton() {
+        this.proxyButton.type = this.getButtonType();
+        this.proxyButton.disabled = this.disabled;
+        // attributes should be removed in cases where name/value is not set
+        if (this.name != null) {
+            this.proxyButton.name = this.name;
+        }
+        else {
+            this.proxyButton.removeAttribute("name");
+        }
+        if (this.value != null) {
+            this.proxyButton.value = this.value;
+        }
+        else {
+            this.proxyButton.removeAttribute("value");
+        }
     }
-  }
-  disconnectedCallback() {
-    this.proxyButton.remove();
-    this.proxyButton = null;
-    disconnectLanguageChangeObserver(this);
-  }
-  syncToProxyButton() {
-    this.proxyButton.type = this.getButtonType();
-    this.proxyButton.disabled = this.disabled;
-    // attributes should be removed in cases where name/value is not set
-    if (this.name != null) {
-      this.proxyButton.name = this.name;
+    getButtonType() {
+        return this.submit ? "submit" : "button";
     }
-    else {
-      this.proxyButton.removeAttribute("name");
+    getButtonIconSize() {
+        switch (this.iconSize) {
+            case "small":
+                return "small";
+            case "medium-small":
+                return "medium-small";
+            case "medium":
+                return "medium";
+            case "large":
+                return "large";
+            default:
+                return "medium";
+        }
     }
-    if (this.value != null) {
-      this.proxyButton.value = this.value;
+    /**
+     * Sets focus on the specified `duet-button`. Use this method instead of the global
+     * `button.focus()`.
+     */
+    async setFocus(options) {
+        if (this.nativeButton) {
+            this.nativeButton.focus(options);
+        }
     }
-    else {
-      this.proxyButton.removeAttribute("value");
+    /**
+     * render() function.
+     * Always the last one in the class.
+     */
+    render() {
+        var _a;
+        const isExternalLink = this.external && this.url;
+        // enforce consistency for external links
+        const icon = isExternalLink ? "action-new-window" : this.icon;
+        const iconRight = isExternalLink ? true : this.iconRight;
+        const commonChildren = (h("span", { class: "duet-button-contents", style: { color: getColorByName(this.color) } }, icon && (h("div", { "aria-hidden": "true", class: {
+                "duet-button-icon": true,
+                left: !iconRight,
+                right: iconRight,
+                [this.getButtonIconSize()]: true,
+            } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("slot", null)));
+        const commonProps = {
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            ref: button => (this.nativeButton = button),
+            id: this.identifier,
+            class: {
+                "duet-m-0": this.margin === "none",
+                "duet-p-0": this.padding === "none",
+                "duet-no-wrap": this.wrapping === "none",
+                "duet-button": true,
+                "duet-button-is-small": this.size === "small",
+                "duet-button-icon-only": this.iconOnly,
+                "duet-button-text-center": this.centerText,
+                "duet-button-negative": this.negative || this.variation === "negative",
+                [this.variation]: true,
+                disabled: this.disabled,
+                icon: !!icon,
+                "icon-right": iconRight,
+                [this.getButtonIconSize()]: true,
+            },
+            "aria-controls": this.accessibleControls,
+            "aria-label": this.accessibleLabel,
+            "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined,
+            "aria-activedescendant": this.accessibleActiveDescendant,
+            "aria-owns": this.accessibleOwns,
+            "aria-describedby": this.accessibleDescribedBy,
+            "aria-labelledby": this.accessibleLabelledBy,
+            "aria-details": this.accessibleDetails,
+            "aria-description": this.accessibleDescription,
+        };
+        return (h(Host, { onClick: this.handleClick, class: {
+                "duet-m-0": this.margin === "none",
+                "duet-small": this.size === "small",
+                "duet-fixed": this.fixed,
+                "duet-expand": this.expand,
+                "input-button": (_a = this.variation) === null || _a === void 0 ? void 0 : _a.startsWith("input-button"),
+            } }, h("div", { 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, " "))), this.loading && h("duet-spinner", { color: "currentColor" }))));
     }
-  }
-  getButtonType() {
-    return this.submit ? "submit" : "button";
-  }
-  getButtonIconSize() {
-    switch (this.iconSize) {
-      case "small":
-        return "small";
-      case "medium-small":
-        return "medium-small";
-      case "medium":
-        return "medium";
-      case "large":
-        return "large";
-      default:
-        return "medium";
+    static get is() { return "duet-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-button.scss"]
+        };
     }
-  }
-  /**
-   * Sets focus on the specified `duet-button`. Use this method instead of the global
-   * `button.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeButton) {
-      this.nativeButton.focus(options);
+    static get styleUrls() {
+        return {
+            "$": ["duet-button.css"]
+        };
     }
-  }
-  /**
-   * render() function.
-   * Always the last one in the class.
-   */
-  render() {
-    var _a;
-    const isExternalLink = this.external && this.url;
-    // enforce consistency for external links
-    const icon = isExternalLink ? "action-new-window" : this.icon;
-    const iconRight = isExternalLink ? true : this.iconRight;
-    const commonChildren = (h("span", { class: "duet-button-contents", style: { color: getColorByName(this.color) } }, icon && (h("div", { "aria-hidden": "true", class: {
-        "duet-button-icon": true,
-        left: !iconRight,
-        right: iconRight,
-        [this.getButtonIconSize()]: true,
-      } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("slot", null)));
-    const commonProps = {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      ref: button => (this.nativeButton = button),
-      id: this.identifier,
-      class: {
-        "duet-m-0": this.margin === "none",
-        "duet-p-0": this.padding === "none",
-        "duet-no-wrap": this.wrapping === "none",
-        "duet-button": true,
-        "duet-button-is-small": this.size === "small",
-        "duet-button-icon-only": this.iconOnly,
-        "duet-button-text-center": this.centerText,
-        "duet-button-negative": this.negative || this.variation === "negative",
-        [this.variation]: true,
-        disabled: this.disabled,
-        icon: !!icon,
-        "icon-right": iconRight,
-        [this.getButtonIconSize()]: true,
-      },
-      "aria-controls": this.accessibleControls,
-      "aria-label": this.accessibleLabel,
-      "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined,
-      "aria-activedescendant": this.accessibleActiveDescendant,
-      "aria-owns": this.accessibleOwns,
-      "aria-describedby": this.accessibleDescribedBy,
-      "aria-labelledby": this.accessibleLabelledBy,
-      "aria-details": this.accessibleDetails,
-      "aria-description": this.accessibleDescription,
-    };
-    return (h(Host, { onClick: this.handleClick, class: {
-        "duet-m-0": this.margin === "none",
-        "duet-small": this.size === "small",
-        "duet-fixed": this.fixed,
-        "duet-expand": this.expand,
-        "input-button": (_a = this.variation) === null || _a === void 0 ? void 0 : _a.startsWith("input-button"),
-      } }, h("div", { 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, " "))), this.loading && h("duet-spinner", { color: "currentColor" }))));
-  }
-  static get is() { return "duet-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
-        },
-        "attribute": "accessible-label",
-        "reflect": false
-      },
-      "accessibleControls": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this property to add an aria-controls attribute to the button. Use\nthe attribute to point to the unique id of the content that the button manages."
-        },
-        "attribute": "accessible-controls",
-        "reflect": false
-      },
-      "accessiblePopup": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button."
-        },
-        "attribute": "accessible-popup",
-        "reflect": false,
-        "defaultValue": "\"false\""
-      },
-      "accessibleActiveDescendant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a related component\u2019s visually focused element."
-        },
-        "attribute": "accessible-active-descendant",
-        "reflect": false
-      },
-      "accessibleOwns": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component owned by the button."
-        },
-        "attribute": "accessible-owns",
-        "reflect": false
-      },
-      "accessibleDescribedBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates the id of a component that describes the button."
-        },
-        "attribute": "accessible-described-by",
-        "reflect": false
-      },
-      "accessibleDetails": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Details of the component"
-        },
-        "attribute": "accessible-details",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleLabelledBy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "String of id's that indicate alternative labels elements"
-        },
-        "attribute": "accessible-labelled-by",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleDescription": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria description the button"
-        },
-        "attribute": "accessible-description",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "accessibleExpanded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
-        },
-        "attribute": "accessible-expanded",
-        "reflect": false
-      },
-      "accessiblePressed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Tells screen reader the element is pressed."
-        },
-        "attribute": "accessible-pressed",
-        "reflect": false
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Loading state of the button"
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "variation": {
-        "type": "string",
-        "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\"",
-          "references": {
-            "DuetButtonVariation": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
-              "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
+    static get properties() {
+        return {
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the button that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "accessibleControls": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-controls attribute to the button. Use\nthe attribute to point to the unique id of the content that the button manages."
+                },
+                "attribute": "accessible-controls",
+                "reflect": false
+            },
+            "accessiblePopup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button."
+                },
+                "attribute": "accessible-popup",
+                "reflect": false,
+                "defaultValue": "\"false\""
+            },
+            "accessibleActiveDescendant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a related component\u2019s visually focused element."
+                },
+                "attribute": "accessible-active-descendant",
+                "reflect": false
+            },
+            "accessibleOwns": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component owned by the button."
+                },
+                "attribute": "accessible-owns",
+                "reflect": false
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the button."
+                },
+                "attribute": "accessible-described-by",
+                "reflect": false
+            },
+            "accessibleDetails": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Details of the component"
+                },
+                "attribute": "accessible-details",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String of id's that indicate alternative labels elements"
+                },
+                "attribute": "accessible-labelled-by",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleDescription": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria description the button"
+                },
+                "attribute": "accessible-description",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleExpanded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+                },
+                "attribute": "accessible-expanded",
+                "reflect": false
+            },
+            "accessiblePressed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells screen reader the element is pressed."
+                },
+                "attribute": "accessible-pressed",
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Loading state of the button"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "variation": {
+                "type": "string",
+                "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\"",
+                    "references": {
+                        "DuetButtonVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "id": "src/components/duet-button/duet-button.tsx::DuetButtonVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "negative",
+                            "text": "- value is deprecated and should be used in combination with negative prop in the future"
+                        }, {
+                            "name": "destructive",
+                            "text": "- value is deprecated and should be replace with destructive-secondary"
+                        }],
+                    "text": "Style variation of the button."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "negative": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Negative variation, can be combined with Variation to produce negative versions"
+                },
+                "attribute": "negative",
+                "reflect": false,
+                "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 of the button."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetPadding",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetPadding": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the padding of the component."
+                },
+                "attribute": "padding",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "centerText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetButtonTextCentering",
+                    "resolved": "boolean",
+                    "references": {
+                        "DuetButtonTextCentering": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Centers the text of a button"
+                },
+                "attribute": "center-text",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "wrapping": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetButtonWrapping",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetButtonWrapping": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the text wrapping."
+                },
+                "attribute": "wrapping",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "expand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Expands the button to fill 100% of the container width."
+                },
+                "attribute": "expand",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "fixed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keep the button fixed width even on mobile viewports."
+                },
+                "attribute": "fixed",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the button component disabled. This prevents users from being able to\ninteract with the button, and conveys its inactive state to assistive technologies."
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the button, which gets paired with the button's value when submitted as part of a form.\nCorresponds with the native HTML name attribute."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the button, which gets paired with the button's name when submitted as part of a form.\nCorresponds with the native HTML value attribute."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a unique identifier for the button. Please note that with this particular\ncomponent this id is added inside Shadow DOM. If you need an id on the html\nelement, use regular id attribute instead."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "submit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the button to submit a form."
+                },
+                "attribute": "submit",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "external": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Forces URL to open in a new browser tab. Used together with URL prop."
+                },
+                "attribute": "external",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+                        }, {
+                            "name": "default",
+                            "text": "\"fi\""
+                        }],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": true,
+                "defaultValue": "getLanguage()"
+            },
+            "accessibleLabelExternalDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelExternal when needed"
+                },
+                "attribute": "accessible-label-external-default",
+                "reflect": false,
+                "defaultValue": "DuetStringsExternalDefaults"
+            },
+            "accessibleLabelExternal": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+                },
+                "attribute": "accessible-label-external",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
+            },
+            "accessibleLabelLoadingDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Ladataan\",sv: \"Lastning\",en: \"Loading\u2026\"}"
+                        }],
+                    "text": "Property to change accessibleLabelLoading defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelLoading when needed"
+                },
+                "attribute": "accessible-label-loading-default",
+                "reflect": false,
+                "defaultValue": "DuetStringsLoadingDefaults"
+            },
+            "accessibleLabelLoading": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Ladataan\",sv: \"Lastning\",en: \"Loading\u2026\"}"
+                        }],
+                    "text": "Adds accessible label for button in \"loading\" state"
+                },
+                "attribute": "accessible-label-loading",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelLoadingDefaults)"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display to the left of the button content.\nThis is ignored/overridden when button is used as an external link."
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color to be used for text, as a design token entered in camelCase or\nkebab-case. Example: \"color-primary\"."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "iconRight": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show icon on the right side of the button content."
+                },
+                "attribute": "icon-right",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetButtonIconSize",
+                    "resolved": "\"large\" | \"medium\" | \"medium-small\" | \"small\"",
+                    "references": {
+                        "DuetButtonIconSize": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon size."
+                },
+                "attribute": "icon-size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetButtonSize",
+                    "resolved": "\"medium\" | \"small\"",
+                    "references": {
+                        "DuetButtonSize": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx",
+                            "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button\u2019s size."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this button should use styles meant for displaying just an icon."
+                },
+                "attribute": "icon-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A destination to link to, rendered in the href attribute of a link."
+                },
+                "attribute": "url",
+                "reflect": true
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "negative",
-              "text": "- value is deprecated and should be used in combination with negative prop in the future"
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetFocus",
+                "name": "duetFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button has focus."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }, {
-              "name": "destructive",
-              "text": "- value is deprecated and should be replace with destructive-secondary"
-            }],
-          "text": "Style variation of the button."
-        },
-        "attribute": "variation",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "negative": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Negative variation, can be combined with Variation to produce negative versions"
-        },
-        "attribute": "negative",
-        "reflect": false,
-        "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 of the button."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "padding": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetPadding",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetPadding": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetPadding"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the padding of the component."
-        },
-        "attribute": "padding",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "centerText": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetButtonTextCentering",
-          "resolved": "boolean",
-          "references": {
-            "DuetButtonTextCentering": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
-              "id": "src/components/duet-button/duet-button.tsx::DuetButtonTextCentering"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Centers the text of a button"
-        },
-        "attribute": "center-text",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "wrapping": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetButtonWrapping",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetButtonWrapping": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
-              "id": "src/components/duet-button/duet-button.tsx::DuetButtonWrapping"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the text wrapping."
-        },
-        "attribute": "wrapping",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "expand": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Expands the button to fill 100% of the container width."
-        },
-        "attribute": "expand",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "fixed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Keep the button fixed width even on mobile viewports."
-        },
-        "attribute": "fixed",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Makes the button component disabled. This prevents users from being able to\ninteract with the button, and conveys its inactive state to assistive technologies."
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The name of the button, which gets paired with the button's value when submitted as part of a form.\nCorresponds with the native HTML name attribute."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the button, which gets paired with the button's name when submitted as part of a form.\nCorresponds with the native HTML value attribute."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Adds a unique identifier for the button. Please note that with this particular\ncomponent this id is added inside Shadow DOM. If you need an id on the html\nelement, use regular id attribute instead."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "submit": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Allows the button to submit a form."
-        },
-        "attribute": "submit",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "external": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Forces URL to open in a new browser tab. Used together with URL prop."
-        },
-        "attribute": "external",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "language": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
+                "method": "duetBlur",
+                "name": "duetBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button loses focus."
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the specified `duet-button`. Use this method instead of the global\n`button.focus()`.",
+                    "tags": []
+                }
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+        };
+    }
+    static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "syncToProxyButton"
             }, {
-              "name": "default",
-              "text": "\"fi\""
-            }],
-          "text": ""
-        },
-        "attribute": "language",
-        "reflect": true,
-        "defaultValue": "getLanguage()"
-      },
-      "accessibleLabelExternalDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-            }],
-          "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelExternal when needed"
-        },
-        "attribute": "accessible-label-external-default",
-        "reflect": false,
-        "defaultValue": "DuetStringsExternalDefaults"
-      },
-      "accessibleLabelExternal": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
-            }],
-          "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
-        },
-        "attribute": "accessible-label-external",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
-      },
-      "accessibleLabelLoadingDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Ladataan\",sv: \"Lastning\",en: \"Loading\u2026\"}"
-            }],
-          "text": "Property to change accessibleLabelLoading defaults on the component.\nnormally you would handle these strings on an application level and override accessibleLabelLoading when needed"
-        },
-        "attribute": "accessible-label-loading-default",
-        "reflect": false,
-        "defaultValue": "DuetStringsLoadingDefaults"
-      },
-      "accessibleLabelLoading": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Ladataan\",sv: \"Lastning\",en: \"Loading\u2026\"}"
-            }],
-          "text": "Adds accessible label for button in \"loading\" state"
-        },
-        "attribute": "accessible-label-loading",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.accessibleLabelLoadingDefaults)"
-      },
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetIconName",
-          "resolved": "string",
-          "references": {
-            "DuetIconName": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetIconName"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon to display to the left of the button content.\nThis is ignored/overridden when button is used as an external link."
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetColor",
-          "resolved": "string",
-          "references": {
-            "DuetColor": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetColor"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Custom color to be used for text, as a design token entered in camelCase or\nkebab-case. Example: \"color-primary\"."
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "iconRight": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Show icon on the right side of the button content."
-        },
-        "attribute": "icon-right",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "iconSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetButtonIconSize",
-          "resolved": "\"large\" | \"medium\" | \"medium-small\" | \"small\"",
-          "references": {
-            "DuetButtonIconSize": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
-              "id": "src/components/duet-button/duet-button.tsx::DuetButtonIconSize"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon size."
-        },
-        "attribute": "icon-size",
-        "reflect": false,
-        "defaultValue": "\"medium\""
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetButtonSize",
-          "resolved": "\"medium\" | \"small\"",
-          "references": {
-            "DuetButtonSize": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-button/duet-button.tsx",
-              "id": "src/components/duet-button/duet-button.tsx::DuetButtonSize"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Button\u2019s size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"medium\""
-      },
-      "iconOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether this button should use styles meant for displaying just an icon."
-        },
-        "attribute": "icon-only",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "url": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "A destination to link to, rendered in the href attribute of a link."
-        },
-        "attribute": "url",
-        "reflect": true
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetFocus",
-        "name": "duetFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the button has focus."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "duetBlur",
-        "name": "duetBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the button loses focus."
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "(options?: FocusOptions) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "FocusOptions": {
-              "location": "global",
-              "id": "global::FocusOptions"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the specified `duet-button`. Use this method instead of the global\n`button.focus()`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "disabled",
-        "methodName": "syncToProxyButton"
-      }, {
-        "propName": "submit",
-        "methodName": "syncToProxyButton"
-      }, {
-        "propName": "value",
-        "methodName": "syncToProxyButton"
-      }, {
-        "propName": "name",
-        "methodName": "syncToProxyButton"
-      }];
-  }
+                "propName": "submit",
+                "methodName": "syncToProxyButton"
+            }, {
+                "propName": "value",
+                "methodName": "syncToProxyButton"
+            }, {
+                "propName": "name",
+                "methodName": "syncToProxyButton"
+            }];
+    }
 }