@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/collection/components/six-button/six-button.js

@@ -1,466 +1,466 @@
-import { Component, Element, h, Method, Prop, State, Event } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The button's label.
- * @slot prefix - Used to prepend an icon or similar element to the button.
- * @slot suffix - Used to append an icon or similar element to the button.
- *
- * @part base - The component's base wrapper.
- * @part prefix - The prefix container.
- * @part label - The button's label.
- * @part suffix - The suffix container.
- * @part caret - The button's caret.
- */
-export class SixButton {
-  constructor() {
-    this.hasFocus = false;
-    this.hasLabel = false;
-    this.hasPrefix = false;
-    this.hasSuffix = false;
-    /** The button's type. */
-    this.type = 'primary';
-    /** The button's size. */
-    this.size = 'medium';
-    /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
-    this.caret = false;
-    /** Set to true to disable the button. */
-    this.disabled = false;
-    /** Set to true to draw the button in a loading state. */
-    this.loading = false;
-    /** Set to true to draw a pill-style button with rounded edges. */
-    this.pill = false;
-    /** Set to true to draw a circle button. */
-    this.circle = false;
-    /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
-    this.submit = false;
-    /** Indicates if activating the button should reset the form. */
-    this.reset = false;
-  }
-  connectedCallback() {
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleClick = this.handleClick.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  /** Sets focus on the button. */
-  async setFocus(options) {
-    this.button.focus(options);
-  }
-  /** Removes focus from the button. */
-  async removeFocus() {
-    this.button.blur();
-  }
-  handleSlotChange() {
-    this.hasLabel = hasSlot(this.host);
-    this.hasPrefix = hasSlot(this.host, 'prefix');
-    this.hasSuffix = hasSlot(this.host, 'suffix');
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleClick(event) {
-    if (this.disabled || this.loading) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-  render() {
-    const isLink = !!this.href;
-    const isButton = !isLink;
-    const Button = isLink ? 'a' : 'button';
-    return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } },
-      h(Button, { ref: (el) => (this.button = el), part: "base", class: {
-          button: true,
-          // Types
-          'button--secondary': this.type === 'secondary',
-          'button--primary': this.type === 'primary',
-          'button--link': this.type === 'link',
-          'button--success': this.type === 'success',
-          'button--warning': this.type === 'warning',
-          'button--danger': this.type === 'danger',
-          'button--action': this.type === 'action',
-          // Sizes
-          'button--small': this.size === 'small',
-          'button--medium': this.size === 'medium',
-          'button--large': this.size === 'large',
-          // Modifiers
-          'button--caret': this.caret,
-          'button--circle': this.circle,
-          'button--disabled': this.disabled,
-          'button--focused': this.hasFocus,
-          'button--loading': this.loading,
-          'button--pill': this.pill,
-          'button--has-label': this.hasLabel,
-          'button--has-prefix': this.hasPrefix,
-          'button--has-suffix': this.hasSuffix,
-        }, disabled: isButton ? this.disabled : null, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null, name: isButton ? this.name : null, value: isButton ? this.value : null, href: isLink && this.href, target: isLink && this.target ? this.target : null, download: isLink && this.download ? this.download : null, rel: isLink && this.target ? 'noreferrer noopener' : null, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, "data-testid": "button" },
-        h("span", { part: "prefix", class: "button__prefix" },
-          h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })),
-        h("span", { part: "label", class: "button__label" },
-          h("slot", { onSlotchange: this.handleSlotChange })),
-        h("span", { part: "suffix", class: "button__suffix" },
-          h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })),
-        this.caret && (h("span", { part: "caret", class: "button__caret" },
-          h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
-            h("polyline", { points: "6 9 12 15 18 9" })))),
-        this.loading && h("six-spinner", null))));
-  }
-  static get is() { return "six-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-button.css"]
-  }; }
-  static get properties() { return {
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action'",
-        "resolved": "\"action\" | \"danger\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The button's type."
-      },
-      "attribute": "type",
-      "reflect": true,
-      "defaultValue": "'primary'"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The button's size."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'medium'"
-    },
-    "caret": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the button with a caret for use with dropdowns, popovers, etc."
-      },
-      "attribute": "caret",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the button."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw the button in a loading state."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "pill": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw a pill-style button with rounded edges."
-      },
-      "attribute": "pill",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "circle": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to draw a circle button."
-      },
-      "attribute": "circle",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "submit": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates if activating the button should submit the form. Ignored when `href` is set."
-      },
-      "attribute": "submit",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "reset": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates if activating the button should reset the form."
-      },
-      "attribute": "reset",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An optional name for the button. Ignored when `href` is set."
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "value": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "An optional value for the button. Ignored when `href` is set."
-      },
-      "attribute": "value",
-      "reflect": false
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
-      },
-      "attribute": "href",
-      "reflect": false
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'_blank' | '_parent' | '_self' | '_top'",
-        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tells the browser where to open the link. Only used when `href` is set."
-      },
-      "attribute": "target",
-      "reflect": false
-    },
-    "download": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Tells the browser to download the linked file as this filename. Only used when `href` is set."
-      },
-      "attribute": "download",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "hasFocus": {},
-    "hasLabel": {},
-    "hasPrefix": {},
-    "hasSuffix": {}
-  }; }
-  static get events() { return [{
-      "method": "sixBlur",
-      "name": "six-button-blur",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button loses focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixFocus",
-      "name": "six-button-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button gains focus."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "FocusOptions": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the button.",
-        "tags": []
-      }
-    },
-    "removeFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Removes focus from the button.",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}
+import { Component, Element, h, Method, Prop, State, Event } from '@stencil/core';
+import { hasSlot } from '../../utils/slot';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The button's label.
+ * @slot prefix - Used to prepend an icon or similar element to the button.
+ * @slot suffix - Used to append an icon or similar element to the button.
+ *
+ * @part base - The component's base wrapper.
+ * @part prefix - The prefix container.
+ * @part label - The button's label.
+ * @part suffix - The suffix container.
+ * @part caret - The button's caret.
+ */
+export class SixButton {
+  constructor() {
+    this.hasFocus = false;
+    this.hasLabel = false;
+    this.hasPrefix = false;
+    this.hasSuffix = false;
+    /** The button's type. */
+    this.type = 'primary';
+    /** The button's size. */
+    this.size = 'medium';
+    /** Set to true to draw the button with a caret for use with dropdowns, popovers, etc. */
+    this.caret = false;
+    /** Set to true to disable the button. */
+    this.disabled = false;
+    /** Set to true to draw the button in a loading state. */
+    this.loading = false;
+    /** Set to true to draw a pill-style button with rounded edges. */
+    this.pill = false;
+    /** Set to true to draw a circle button. */
+    this.circle = false;
+    /** Indicates if activating the button should submit the form. Ignored when `href` is set. */
+    this.submit = false;
+    /** Indicates if activating the button should reset the form. */
+    this.reset = false;
+  }
+  connectedCallback() {
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  /** Sets focus on the button. */
+  async setFocus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  async removeFocus() {
+    this.button.blur();
+  }
+  handleSlotChange() {
+    this.hasLabel = hasSlot(this.host);
+    this.hasPrefix = hasSlot(this.host, 'prefix');
+    this.hasSuffix = hasSlot(this.host, 'suffix');
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.sixBlur.emit();
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.sixFocus.emit();
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  render() {
+    const isLink = !!this.href;
+    const isButton = !isLink;
+    const Button = isLink ? 'a' : 'button';
+    return (h("div", { onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } },
+      h(Button, { ref: (el) => (this.button = el), part: "base", class: {
+          button: true,
+          // Types
+          'button--secondary': this.type === 'secondary',
+          'button--primary': this.type === 'primary',
+          'button--link': this.type === 'link',
+          'button--success': this.type === 'success',
+          'button--warning': this.type === 'warning',
+          'button--danger': this.type === 'danger',
+          'button--action': this.type === 'action',
+          // Sizes
+          'button--small': this.size === 'small',
+          'button--medium': this.size === 'medium',
+          'button--large': this.size === 'large',
+          // Modifiers
+          'button--caret': this.caret,
+          'button--circle': this.circle,
+          'button--disabled': this.disabled,
+          'button--focused': this.hasFocus,
+          'button--loading': this.loading,
+          'button--pill': this.pill,
+          'button--has-label': this.hasLabel,
+          'button--has-prefix': this.hasPrefix,
+          'button--has-suffix': this.hasSuffix,
+        }, disabled: isButton ? this.disabled : null, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : null, name: isButton ? this.name : null, value: isButton ? this.value : null, href: isLink && this.href, target: isLink && this.target ? this.target : null, download: isLink && this.download ? this.download : null, rel: isLink && this.target ? 'noreferrer noopener' : null, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, "data-testid": "button" },
+        h("span", { part: "prefix", class: "button__prefix" },
+          h("slot", { onSlotchange: this.handleSlotChange, name: "prefix" })),
+        h("span", { part: "label", class: "button__label" },
+          h("slot", { onSlotchange: this.handleSlotChange })),
+        h("span", { part: "suffix", class: "button__suffix" },
+          h("slot", { onSlotchange: this.handleSlotChange, name: "suffix" })),
+        this.caret && (h("span", { part: "caret", class: "button__caret" },
+          h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" },
+            h("polyline", { points: "6 9 12 15 18 9" })))),
+        this.loading && h("six-spinner", null))));
+  }
+  static get is() { return "six-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-button.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'secondary' | 'primary' | 'link' | 'success' | 'warning' | 'danger' | 'action'",
+        "resolved": "\"action\" | \"danger\" | \"link\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The button's type."
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "'primary'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'small' | 'medium' | 'large'",
+        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The button's size."
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'medium'"
+    },
+    "caret": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the button with a caret for use with dropdowns, popovers, etc."
+      },
+      "attribute": "caret",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to disable the button."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the button in a loading state."
+      },
+      "attribute": "loading",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "pill": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw a pill-style button with rounded edges."
+      },
+      "attribute": "pill",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "circle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw a circle button."
+      },
+      "attribute": "circle",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "submit": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates if activating the button should submit the form. Ignored when `href` is set."
+      },
+      "attribute": "submit",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "reset": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates if activating the button should reset the form."
+      },
+      "attribute": "reset",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An optional name for the button. Ignored when `href` is set."
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An optional value for the button. Ignored when `href` is set."
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`."
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'_blank' | '_parent' | '_self' | '_top'",
+        "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tells the browser where to open the link. Only used when `href` is set."
+      },
+      "attribute": "target",
+      "reflect": false
+    },
+    "download": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tells the browser to download the linked file as this filename. Only used when `href` is set."
+      },
+      "attribute": "download",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "hasFocus": {},
+    "hasLabel": {},
+    "hasPrefix": {},
+    "hasSuffix": {}
+  }; }
+  static get events() { return [{
+      "method": "sixBlur",
+      "name": "six-button-blur",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the button loses focus."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixFocus",
+      "name": "six-button-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the button gains focus."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "(options?: FocusOptions) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "FocusOptions": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the button.",
+        "tags": []
+      }
+    },
+    "removeFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Removes focus from the button.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}