@ukic/web-components 2.8.0 → 2.9.0

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

@@ -1,14 +1,14 @@
 var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 import { Host, forceUpdate, h, } from "@stencil/core";
 import { getThemeFromContext, inheritAttributes, isSlotUsed, removeDisabledFalse, } from "../../utils/helpers";
@@ -22,785 +22,810 @@ let buttonIds = 0;
  * @slot badge - Badge component overlaying the top right of the button.
  */
 export class Button {
-  constructor() {
-    this.buttonIdNum = buttonIds++;
-    this.hasTooltip = false;
-    this.inheritedAttributes = {};
-    this.describedByEl = null;
-    this.describedById = null;
-    this.mutationObserver = null;
-    this.hostMutationObserver = null;
-    this.setViewBox = () => {
-      let iconEl;
-      if (this.hasLeftIconSlot()) {
-        iconEl = this.el.querySelector(`[slot="left-icon"]`);
-      }
-      else if (this.hasRightIconSlot()) {
-        iconEl = this.el.querySelector(`[slot="right-icon"]`);
-      }
-      else {
-        iconEl = null;
-      }
-      return iconEl;
-    };
-    this.handleClick = () => {
-      if ((this.el.type === "submit" || this.el.type === "reset") &&
-        !!this.el.closest("FORM")) {
-        this.handleHiddenFormButtonClick(this.el.closest("FORM"));
-      }
-    };
-    this.onFocus = () => {
-      this.icFocus.emit();
-    };
-    this.onBlur = () => {
-      this.icBlur.emit();
-    };
-    this.loadingWidth = () => {
-      if (this.loading) {
-        this.el.style.setProperty("--min-width", `${this.el.getBoundingClientRect().width}px`);
-      }
-    };
-    // triggered when text content of sibling element in light DOM changes
-    this.mutationCallback = () => {
-      this.describedByContent = this.describedByEl.innerText;
-    };
-    // triggered when attributes of host element change
-    this.hostMutationCallback = (mutationList) => {
-      let forceComponentUpdate = false;
-      mutationList.forEach((item) => {
-        if (item.attributeName === "title") {
-          this.title = this.el.getAttribute(item.attributeName);
+    constructor() {
+        this.buttonIdNum = buttonIds++;
+        this.hasTooltip = false;
+        this.inheritedAttributes = {};
+        this.describedByEl = null;
+        this.describedById = null;
+        this.mutationObserver = null;
+        this.hostMutationObserver = null;
+        this.setViewBox = () => {
+            let iconEl;
+            if (this.hasLeftIconSlot()) {
+                iconEl = this.el.querySelector(`[slot="left-icon"]`);
+            }
+            else if (this.hasRightIconSlot()) {
+                iconEl = this.el.querySelector(`[slot="right-icon"]`);
+            }
+            else {
+                iconEl = null;
+            }
+            return iconEl;
+        };
+        this.handleClick = () => {
+            if ((this.el.type === "submit" || this.el.type === "reset") &&
+                !!this.el.closest("FORM")) {
+                this.handleHiddenFormButtonClick(this.el.closest("FORM"));
+            }
+        };
+        this.onFocus = () => {
+            this.icFocus.emit();
+        };
+        this.onBlur = () => {
+            this.icBlur.emit();
+        };
+        this.loadingWidth = () => {
+            if (this.loading) {
+                this.el.style.setProperty("--min-width", `${this.el.getBoundingClientRect().width}px`);
+            }
+        };
+        // triggered when text content of sibling element in light DOM changes
+        this.mutationCallback = () => {
+            this.describedByContent = this.describedByEl.innerText;
+        };
+        // triggered when attributes of host element change
+        this.hostMutationCallback = (mutationList) => {
+            let forceComponentUpdate = false;
+            mutationList.forEach(({ attributeName }) => {
+                const attribute = this.el.getAttribute(attributeName);
+                if (attributeName === "title")
+                    this.title = attribute;
+                else if (attributeName === "aria-label")
+                    this.ariaLabel = attribute;
+                if (IC_INHERITED_ARIA.includes(attributeName)) {
+                    this.inheritedAttributes[attributeName] = attribute;
+                    forceComponentUpdate = true;
+                }
+            });
+            if (forceComponentUpdate) {
+                forceUpdate(this);
+            }
+        };
+        this.setHasTooltip = () => {
+            this.hasTooltip =
+                !this.disableTooltip && (!!this.title || this.variant === "icon");
+        };
+        this.ariaLabel = null;
+        this.describedByContent = null;
+        this.title = null;
+        this.appearance = "default";
+        this.ariaControlsId = undefined;
+        this.ariaOwnsId = undefined;
+        this.disabled = false;
+        this.disableTooltip = false;
+        this.download = false;
+        this.form = undefined;
+        this.formaction = undefined;
+        this.formenctype = undefined;
+        this.formmethod = undefined;
+        this.formnovalidate = undefined;
+        this.formtarget = undefined;
+        this.fullWidth = false;
+        this.href = undefined;
+        this.hreflang = undefined;
+        this.loading = false;
+        this.referrerpolicy = undefined;
+        this.rel = undefined;
+        this.size = "default";
+        this.target = undefined;
+        this.tooltipPlacement = "bottom";
+        this.transparentBackground = true;
+        this.type = "button";
+        this.variant = "primary";
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver !== null && this.mutationObserver !== undefined) {
+            this.mutationObserver.disconnect();
         }
-        if (item.attributeName === "aria-label") {
-          this.ariaLabel = this.el.getAttribute(item.attributeName);
+        if (this.hostMutationObserver !== null &&
+            this.hostMutationObserver !== undefined) {
+            this.hostMutationObserver.disconnect();
         }
-        if (IC_INHERITED_ARIA.includes(item.attributeName)) {
-          this.inheritedAttributes[item.attributeName] = this.el.getAttribute(item.attributeName);
-          forceComponentUpdate = true;
+    }
+    componentWillUpdate() {
+        this.loadingWidth();
+        this.setHasTooltip();
+    }
+    componentWillLoad() {
+        const allInheritedAttributes = inheritAttributes(this.el, [
+            ...IC_INHERITED_ARIA,
+            "title",
+        ]);
+        const { title, "aria-label": ariaLabel } = allInheritedAttributes, restInheritedAttributes = __rest(allInheritedAttributes, ["title", "aria-label"]);
+        this.title = title;
+        this.ariaLabel = ariaLabel;
+        this.inheritedAttributes = restInheritedAttributes;
+        removeDisabledFalse(this.disabled, this.el);
+        this.el.setAttribute("exportparts", "button");
+        const id = this.el.id;
+        this.id = id !== undefined ? id : null;
+        this.setHasTooltip();
+        if (!this.hasTooltip) {
+            const describedById = this.inheritedAttributes["aria-describedby"];
+            if (describedById !== undefined) {
+                this.describedById = describedById;
+                const el = this.el.parentElement.querySelector(`#${describedById}`);
+                if (el !== undefined && el !== null) {
+                    this.describedByContent = el.innerText;
+                    this.describedByEl = el;
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        this.updateTheme();
+        if (typeof MutationObserver !== "undefined") {
+            if (this.describedById) {
+                this.mutationObserver = new MutationObserver(this.mutationCallback);
+                this.mutationObserver.observe(this.describedByEl, {
+                    characterData: true,
+                    childList: true,
+                    subtree: true,
+                });
+            }
+            this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+            this.hostMutationObserver.observe(this.el, {
+                attributes: true,
+            });
         }
-      });
-      if (forceComponentUpdate) {
-        forceUpdate(this);
-      }
-    };
-    this.ariaLabel = null;
-    this.describedByContent = null;
-    this.title = null;
-    this.appearance = "default";
-    this.ariaControlsId = undefined;
-    this.ariaOwnsId = undefined;
-    this.disabled = false;
-    this.disableTooltip = false;
-    this.download = false;
-    this.form = undefined;
-    this.formaction = undefined;
-    this.formenctype = undefined;
-    this.formmethod = undefined;
-    this.formnovalidate = undefined;
-    this.formtarget = undefined;
-    this.fullWidth = false;
-    this.href = undefined;
-    this.hreflang = undefined;
-    this.loading = false;
-    this.referrerpolicy = undefined;
-    this.rel = undefined;
-    this.size = "default";
-    this.target = undefined;
-    this.tooltipPlacement = "bottom";
-    this.type = "button";
-    this.variant = "primary";
-  }
-  disconnectedCallback() {
-    if (this.mutationObserver !== null && this.mutationObserver !== undefined) {
-      this.mutationObserver.disconnect();
     }
-    if (this.hostMutationObserver !== null &&
-      this.hostMutationObserver !== undefined) {
-      this.hostMutationObserver.disconnect();
+    componentWillRender() {
+        var _a;
+        (_a = this.setViewBox()) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
     }
-  }
-  componentWillUpdate() {
-    this.loadingWidth();
-  }
-  componentWillLoad() {
-    const allInheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "title",
-    ]);
-    const { title, "aria-label": ariaLabel } = allInheritedAttributes, restInheritedAttributes = __rest(allInheritedAttributes, ["title", "aria-label"]);
-    this.title = title;
-    this.ariaLabel = ariaLabel;
-    this.inheritedAttributes = restInheritedAttributes;
-    removeDisabledFalse(this.disabled, this.el);
-    this.el.setAttribute("exportparts", "button");
-    const id = this.el.id;
-    this.id = id !== undefined ? id : null;
-    this.hasTooltip =
-      !this.disableTooltip && (!!this.title || this.variant === "icon");
-    if (!this.hasTooltip) {
-      const describedById = this.inheritedAttributes["aria-describedby"];
-      if (describedById !== undefined) {
-        this.describedById = describedById;
-        const el = this.el.parentElement.querySelector(`#${describedById}`);
-        if (el !== undefined && el !== null) {
-          this.describedByContent = el.innerText;
-          this.describedByEl = el;
+    handleHostClick(event) {
+        if (this.disabled || this.loading) {
+            event.stopImmediatePropagation();
         }
-      }
     }
-  }
-  componentDidLoad() {
-    this.updateTheme();
-    if (typeof MutationObserver !== "undefined") {
-      if (this.describedById) {
-        this.mutationObserver = new MutationObserver(this.mutationCallback);
-        this.mutationObserver.observe(this.describedByEl, {
-          characterData: true,
-          childList: true,
-          subtree: true,
-        });
-      }
-      this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
-      this.hostMutationObserver.observe(this.el, {
-        attributes: true,
-      });
+    themeChangeHandler(ev) {
+        const theme = ev.detail;
+        this.updateTheme(theme.mode);
     }
-  }
-  componentWillRender() {
-    var _a;
-    (_a = this.setViewBox()) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
-  }
-  handleHostClick(event) {
-    if (this.disabled || this.loading) {
-      event.stopImmediatePropagation();
+    /**
+     * Sets focus on the native `button`.
+     */
+    async setFocus() {
+        if (this.buttonEl) {
+            this.buttonEl.focus();
+        }
     }
-  }
-  themeChangeHandler(ev) {
-    const theme = ev.detail;
-    this.updateTheme(theme.mode);
-  }
-  /**
-   * Sets focus on the native `button`.
-   */
-  async setFocus() {
-    if (this.buttonEl) {
-      this.buttonEl.focus();
+    hasIconSlot() {
+        const iconEl = this.el.querySelector(`[slot="icon"]`);
+        return iconEl !== null;
     }
-  }
-  hasIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="icon"]`);
-    return iconEl !== null;
-  }
-  hasLeftIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="left-icon"]`);
-    return iconEl !== null;
-  }
-  hasRightIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="right-icon"]`);
-    return iconEl !== null;
-  }
-  handleHiddenFormButtonClick(form) {
-    const hiddenFormButton = document.createElement("button");
-    hiddenFormButton.setAttribute("type", this.el.type);
-    hiddenFormButton.style.display = "none";
-    form.appendChild(hiddenFormButton);
-    hiddenFormButton.click();
-    hiddenFormButton.remove();
-  }
-  updateTheme(newTheme = null) {
-    const foregroundColor = getThemeFromContext(this.el, newTheme || null);
-    if (foregroundColor !== IcThemeForegroundEnum.Default) {
-      this.appearance = foregroundColor;
+    hasLeftIconSlot() {
+        const iconEl = this.el.querySelector(`[slot="left-icon"]`);
+        return iconEl !== null;
     }
-  }
-  render() {
-    const TagType = (this.href && "a") || "button";
-    const { title, ariaLabel, inheritedAttributes } = this;
-    const buttonAttrs = TagType === "button"
-      ? {
-        type: this.type,
-        disabled: this.disabled,
-        form: this.form,
-        formaction: this.formaction,
-        formenctype: this.formenctype,
-        formmethod: this.formmethod,
-        formnovalidate: this.formnovalidate,
-        formtarget: this.formtarget,
-      }
-      : {
-        download: this.download !== false ? this.download : null,
-        href: this.href,
-        rel: this.rel,
-        target: this.target,
-        referrerpolicy: this.referrerpolicy,
-        hreflang: this.hreflang,
-      };
-    let describedBy = null;
-    let buttonId = null;
-    if (this.hasTooltip) {
-      buttonId =
-        this.id !== null
-          ? `ic-button-with-tooltip-${this.id}`
-          : `ic-button-with-tooltip-${this.buttonIdNum}`;
-      describedBy = `ic-tooltip-${buttonId}`;
+    hasRightIconSlot() {
+        const iconEl = this.el.querySelector(`[slot="right-icon"]`);
+        return iconEl !== null;
     }
-    else {
-      describedBy = this.describedById;
+    handleHiddenFormButtonClick(form) {
+        const hiddenFormButton = document.createElement("button");
+        hiddenFormButton.setAttribute("type", this.el.type);
+        hiddenFormButton.style.display = "none";
+        form.appendChild(hiddenFormButton);
+        hiddenFormButton.click();
+        hiddenFormButton.remove();
     }
-    const ButtonContent = () => {
-      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
-          this.variant === "destructive" ||
-          this.appearance === IcThemeForegroundEnum.Dark ||
-          this.appearance === IcThemeForegroundEnum.Light
-          ? "light"
-          : "dark" }))) : (h("slot", null)), this.hasRightIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "right-icon" })))));
-    };
-    return (h(Host, { class: {
-        ["disabled"]: this.disabled && !this.loading,
-        [`button-variant-${this.variant}`]: true,
-        [`button-size-${this.size}`]: true,
-        ["loading"]: this.loading,
-        ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
-        ["light"]: this.appearance === IcThemeForegroundEnum.Light,
-        ["full-width"]: this.fullWidth,
-        ["with-badge"]: isSlotUsed(this.el, "badge"),
-      }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId }, this.hasTooltip && (h("ic-tooltip", { id: describedBy, label: title ? title : ariaLabel, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
-  }
-  static get is() { return "ic-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-button.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "appearance": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "IcThemeForeground",
-          "resolved": "\"dark\" | \"default\" | \"light\"",
-          "references": {
-            "IcThemeForeground": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcThemeForeground"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The appearance of the button, e.g. dark, light, or the default."
-        },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "ariaControlsId": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Used to identify any related child component"
-            }],
-          "text": ""
-        },
-        "attribute": "aria-controls-id",
-        "reflect": false
-      },
-      "ariaOwnsId": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": "Used to identify any related child component"
-            }],
-          "text": ""
-        },
-        "attribute": "aria-owns-id",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the button will be in disabled state."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "disableTooltip": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied."
-        },
-        "attribute": "disable-tooltip",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "download": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "string | boolean",
-          "resolved": "boolean | string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the user can save the linked URL instead of navigating to it."
-        },
-        "attribute": "download",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "form": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The <form> element to associate the button with."
-        },
-        "attribute": "form",
-        "reflect": false
-      },
-      "formaction": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner."
-        },
-        "attribute": "formaction",
-        "reflect": false
-      },
-      "formenctype": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The way the submitted form data is encoded."
-        },
-        "attribute": "formenctype",
-        "reflect": false
-      },
-      "formmethod": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The HTTP method used to submit the form."
-        },
-        "attribute": "formmethod",
-        "reflect": false
-      },
-      "formnovalidate": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the form will not be validated when submitted."
-        },
-        "attribute": "formnovalidate",
-        "reflect": false
-      },
-      "formtarget": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner."
-        },
-        "attribute": "formtarget",
-        "reflect": false
-      },
-      "fullWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the button will fill the width of the container."
-        },
-        "attribute": "full-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The URL that the link points to. This will render the button as an \"a\" tag."
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "hreflang": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The human language of the linked URL."
-        },
-        "attribute": "hreflang",
-        "reflect": false
-      },
-      "loading": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the button will be in loading state."
-        },
-        "attribute": "loading",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "referrerpolicy": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "ReferrerPolicy",
-          "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
-          "references": {
-            "ReferrerPolicy": {
-              "location": "global",
-              "id": "global::ReferrerPolicy"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "How much of the referrer to send when following the link."
-        },
-        "attribute": "referrerpolicy",
-        "reflect": false
-      },
-      "rel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The relationship of the linked URL as space-separated link types."
-        },
-        "attribute": "rel",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcSizes",
-          "resolved": "\"default\" | \"large\" | \"small\"",
-          "references": {
-            "IcSizes": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcSizes"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the button to be displayed."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
-        },
-        "attribute": "target",
-        "reflect": false
-      },
-      "tooltipPlacement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcButtonTooltipPlacement",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {
-            "IcButtonTooltipPlacement": {
-              "location": "import",
-              "path": "./ic-button.types",
-              "id": "src/components/ic-button/ic-button.types.ts::IcButtonTooltipPlacement"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The position of the tooltip in relation to the button."
-        },
-        "attribute": "tooltip-placement",
-        "reflect": false,
-        "defaultValue": "\"bottom\""
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcButtonTypes",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {
-            "IcButtonTypes": {
-              "location": "import",
-              "path": "./ic-button.types",
-              "id": "src/components/ic-button/ic-button.types.ts::IcButtonTypes"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The type of the button."
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"button\""
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcButtonVariants",
-          "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
-          "references": {
-            "IcButtonVariants": {
-              "location": "import",
-              "path": "./ic-button.types",
-              "id": "src/components/ic-button/ic-button.types.ts::IcButtonVariants"
+    updateTheme(newTheme = null) {
+        const foregroundColor = getThemeFromContext(this.el, newTheme || null);
+        if (foregroundColor !== IcThemeForegroundEnum.Default) {
+            this.appearance = foregroundColor;
+        }
+    }
+    render() {
+        const TagType = (this.href && "a") || "button";
+        const { title, ariaLabel, inheritedAttributes } = this;
+        const buttonAttrs = TagType === "button"
+            ? {
+                type: this.type,
+                disabled: this.disabled,
+                form: this.form,
+                formaction: this.formaction,
+                formenctype: this.formenctype,
+                formmethod: this.formmethod,
+                formnovalidate: this.formnovalidate,
+                formtarget: this.formtarget,
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The variant of the button to be displayed."
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "\"primary\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "ariaLabel": {},
-      "describedByContent": {},
-      "title": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "icBlur",
-        "name": "icBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when button has blur"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+            : {
+                download: this.download !== false ? this.download : null,
+                href: this.href,
+                rel: this.rel,
+                target: this.target,
+                referrerpolicy: this.referrerpolicy,
+                hreflang: this.hreflang,
+            };
+        let describedBy = null;
+        let buttonId = null;
+        if (this.hasTooltip) {
+            buttonId =
+                this.id !== null
+                    ? `ic-button-with-tooltip-${this.id}`
+                    : `ic-button-with-tooltip-${this.buttonIdNum}`;
+            describedBy = `ic-tooltip-${buttonId}`;
         }
-      }, {
-        "method": "icFocus",
-        "name": "icFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when button has focus"
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+        else {
+            describedBy = this.describedById;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        const ButtonContent = () => {
+            return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
+                    this.variant === "destructive" ||
+                    this.appearance === IcThemeForegroundEnum.Dark ||
+                    this.appearance === IcThemeForegroundEnum.Light
+                    ? "light"
+                    : "dark" }))) : (h("slot", null)), this.hasRightIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "right-icon" })))));
+        };
+        return (h(Host, { class: {
+                ["disabled"]: this.disabled && !this.loading,
+                [`button-variant-${this.variant}`]: true,
+                [`button-size-${this.size}`]: true,
+                ["loading"]: this.loading,
+                ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
+                ["light"]: this.appearance === IcThemeForegroundEnum.Light,
+                ["full-width"]: this.fullWidth,
+                ["with-badge"]: isSlotUsed(this.el, "badge"),
+                ["white-background"]: this.variant === "secondary" &&
+                    !this.transparentBackground &&
+                    this.appearance !== "light",
+            }, onClick: this.handleClick, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId }, this.hasTooltip && (h("ic-tooltip", { id: describedBy, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.variant === "icon" && !!title }, h(ButtonContent, null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
+    }
+    static get is() { return "ic-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "appearance": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "IcThemeForeground",
+                    "resolved": "\"dark\" | \"default\" | \"light\"",
+                    "references": {
+                        "IcThemeForeground": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeForeground"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The appearance of the button, e.g. dark, light, or the default."
+                },
+                "attribute": "appearance",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "ariaControlsId": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to identify any related child component"
+                        }],
+                    "text": ""
+                },
+                "attribute": "aria-controls-id",
+                "reflect": false
+            },
+            "ariaOwnsId": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used to identify any related child component"
+                        }],
+                    "text": ""
+                },
+                "attribute": "aria-owns-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the button will be in disabled state."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disableTooltip": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the ic-tooltip which is shown for icon variant will be disabled. Title or aria-label must be set if this prop is not applied."
+                },
+                "attribute": "disable-tooltip",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "download": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user can save the linked URL instead of navigating to it."
+                },
+                "attribute": "download",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "form": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The <form> element to associate the button with."
+                },
+                "attribute": "form",
+                "reflect": false
+            },
+            "formaction": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that processes the information submitted by the button. It overrides the action attribute of the button's form owner. Does nothing if there is no form owner."
+                },
+                "attribute": "formaction",
+                "reflect": false
+            },
+            "formenctype": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The way the submitted form data is encoded."
+                },
+                "attribute": "formenctype",
+                "reflect": false
+            },
+            "formmethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTTP method used to submit the form."
+                },
+                "attribute": "formmethod",
+                "reflect": false
+            },
+            "formnovalidate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the form will not be validated when submitted."
+                },
+                "attribute": "formnovalidate",
+                "reflect": false
+            },
+            "formtarget": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The place to display the response from submitting the form. It overrides the target attribute of the button's form owner."
+                },
+                "attribute": "formtarget",
+                "reflect": false
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the button will fill the width of the container."
+                },
+                "attribute": "full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The URL that the link points to. This will render the button as an \"a\" tag."
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "hreflang": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The human language of the linked URL."
+                },
+                "attribute": "hreflang",
+                "reflect": false
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the button will be in loading state."
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "referrerpolicy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ReferrerPolicy",
+                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
+                    "references": {
+                        "ReferrerPolicy": {
+                            "location": "global",
+                            "id": "global::ReferrerPolicy"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "How much of the referrer to send when following the link."
+                },
+                "attribute": "referrerpolicy",
+                "reflect": false
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The relationship of the linked URL as space-separated link types."
+                },
+                "attribute": "rel",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizes",
+                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "references": {
+                        "IcSizes": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the button to be displayed."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+                },
+                "attribute": "target",
+                "reflect": false
+            },
+            "tooltipPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcButtonTooltipPlacement",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "IcButtonTooltipPlacement": {
+                            "location": "import",
+                            "path": "./ic-button.types",
+                            "id": "src/components/ic-button/ic-button.types.ts::IcButtonTooltipPlacement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The position of the tooltip in relation to the button."
+                },
+                "attribute": "tooltip-placement",
+                "reflect": false,
+                "defaultValue": "\"bottom\""
+            },
+            "transparentBackground": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the secondary variant of button will have a transparent background rather than white."
+                },
+                "attribute": "transparent-background",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcButtonTypes",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "IcButtonTypes": {
+                            "location": "import",
+                            "path": "./ic-button.types",
+                            "id": "src/components/ic-button/ic-button.types.ts::IcButtonTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of the button."
+                },
+                "attribute": "type",
+                "reflect": false,
+                "defaultValue": "\"button\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcButtonVariants",
+                    "resolved": "\"destructive\" | \"icon\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "IcButtonVariants": {
+                            "location": "import",
+                            "path": "./ic-button.types",
+                            "id": "src/components/ic-button/ic-button.types.ts::IcButtonVariants"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The variant of the button to be displayed."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "\"primary\""
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Sets focus on the native `button`.",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "handleHostClick",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }, {
-        "name": "themeChange",
-        "method": "themeChangeHandler",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "ariaLabel": {},
+            "describedByContent": {},
+            "title": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "icBlur",
+                "name": "icBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when button has blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "icFocus",
+                "name": "icFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when button has focus"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native `button`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleHostClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "themeChange",
+                "method": "themeChangeHandler",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=ic-button.js.map