@umbraco-ui/uui 2.0.0 → 2.0.1

package/dist/components/button/button.element.js

@@ -1,158 +1,123 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var _resetStateTimeout;
-import "../icon-registry-essential/svgs/iconAdd.js";
-import "../icon-registry-essential/svgs/iconAlert.js";
-import "../icon-registry-essential/svgs/iconAttachment.js";
-import "../icon-registry-essential/svgs/iconCalendar.js";
+import { UUIHorizontalShakeAnimationValue, UUIHorizontalShakeKeyframes } from "../../internal/animations/uui-shake.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import { PopoverTargetMixin } from "../../internal/mixins/PopoverTargetMixin.js";
 import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
-import "../icon-registry-essential/svgs/iconClipboard.js";
-import "../icon-registry-essential/svgs/iconCode.js";
-import "../icon-registry-essential/svgs/iconColorPicker.js";
-import "../icon-registry-essential/svgs/iconCopy.js";
-import "../icon-registry-essential/svgs/iconDelete.js";
-import "../icon-registry-essential/svgs/iconDocument.js";
-import "../icon-registry-essential/svgs/iconDownload.js";
-import "../icon-registry-essential/svgs/iconDrag.js";
-import "../icon-registry-essential/svgs/iconEdit.js";
-import "../icon-registry-essential/svgs/iconFavorite.js";
-import "../icon-registry-essential/svgs/iconFolder.js";
-import "../icon-registry-essential/svgs/iconForbidden.js";
-import "../icon-registry-essential/svgs/iconInfo.js";
-import "../icon-registry-essential/svgs/iconLink.js";
-import "../icon-registry-essential/svgs/iconLock.js";
-import "../icon-registry-essential/svgs/iconPause.js";
-import "../icon-registry-essential/svgs/iconPicture.js";
-import "../icon-registry-essential/svgs/iconPlay.js";
-import "../icon-registry-essential/svgs/iconRemove.js";
-import "../icon-registry-essential/svgs/iconSearch.js";
-import "../icon-registry-essential/svgs/iconSee.js";
-import "../icon-registry-essential/svgs/iconSettings.js";
-import "../icon-registry-essential/svgs/iconSubtract.js";
-import "../icon-registry-essential/svgs/iconSync.js";
-import "../icon-registry-essential/svgs/iconUnlock.js";
-import "../icon-registry-essential/svgs/iconUnsee.js";
-import "../icon-registry-essential/svgs/iconWand.js";
 import { iconWrong } from "../icon-registry-essential/svgs/iconWrong.js";
-import { nothing, html, css, LitElement } from "lit";
-import { property, query } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import "../icon-registry-essential/svgs/index.js";
 import "../icon/icon.js";
 import "../loader-circle/loader-circle.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
-import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
-import { PopoverTargetMixin } from "../../internal/mixins/PopoverTargetMixin.js";
-import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const _UUIButtonElement = class _UUIButtonElement extends UUIFormControlWithBasicsMixin(
-  LabelMixin("", PopoverTargetMixin(LitElement))
-) {
-  constructor() {
-    super();
-    __privateAdd(this, _resetStateTimeout);
-    this.type = "button";
-    this.disabled = false;
-    this.look = "default";
-    this.color = "default";
-    this.compact = false;
-    this.state = void 0;
-    this.title = "";
-    this.addEventListener("click", this._onHostClick);
-  }
-  getFormElement() {
-    return this._button;
-  }
-  async focus() {
-    await this.updateComplete;
-    this._button.focus();
-  }
-  async blur() {
-    await this.updateComplete;
-    this._button.blur();
-  }
-  async click() {
-    await this.updateComplete;
-    this._button.click();
-  }
-  _onHostClick(e) {
-    if (this.disabled) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
-      return;
-    }
-    if (this._internals?.form) {
-      switch (this.type) {
-        case "reset":
-          this._internals.form.reset();
-          break;
-        case "button":
-          break;
-        default:
-          this.submit();
-          break;
-      }
-    }
-    this._togglePopover();
-  }
-  // Reset the state after 2sec if it is 'success' or 'failed'.
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("state")) {
-      clearTimeout(__privateGet(this, _resetStateTimeout));
-      if (this.state === "success" || this.state === "failed") {
-        __privateSet(this, _resetStateTimeout, setTimeout(
-          () => this.state = void 0,
-          2e3
-        ));
-      }
-    }
-  }
-  renderState() {
-    let element;
-    switch (this.state) {
-      case "waiting":
-        element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
-        break;
-      case "success":
-        element = html`<uui-icon
+import { LitElement, css, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/button/button.element.ts
+/**
+*  @element uui-button
+*  @fires {UUIButtonEvent} click - fires when the element is clicked
+*  @slot - for default content
+*  @slot label - for label content
+*  @slot extra - for extra
+*  @property {string} label - label to be used for aria-label and potentially as visual label for some components
+*  @attribute label - label to be used for aria-label and potentially as visual label for some components
+*  @description - All-around button
+*  @cssprop --uui-button-height - overwrite the button height
+*  @cssprop --uui-button-border-width - overwrite the border width
+*  @cssprop --uui-button-border-radius - overwrite the border radius
+*  @cssprop --uui-button-font-weight - overwrite the font weight
+*  @cssprop --uui-button-font-size - overwrite the font size
+*  @cssprop --uui-button-background-color - overwrite the background color
+*  @cssprop --uui-button-background-color-hover - overwrite the background color for hover state
+*  @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state
+*  @cssprop --uui-button-border-color - overwrite the border color
+*  @cssprop --uui-button-border-color-hover - overwrite the border color for hover state
+*  @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state
+*  @cssprop --uui-button-contrast - overwrite the text color
+*  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
+*  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
+*  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
+*  @cssprop --uui-focus-outline-color - overwrite the focus outline color
+*/
+var UUIButtonElement = class extends UUIFormControlWithBasicsMixin(LabelMixin("", PopoverTargetMixin(LitElement))) {
+	constructor() {
+		super();
+		this.type = "button";
+		this.disabled = false;
+		this.look = "default";
+		this.color = "default";
+		this.compact = false;
+		this.state = void 0;
+		this.title = "";
+		this.addEventListener("click", this._onHostClick, { capture: true });
+	}
+	getFormElement() {
+		return this._button;
+	}
+	async focus() {
+		await this.updateComplete;
+		this._button.focus();
+	}
+	async blur() {
+		await this.updateComplete;
+		this._button.blur();
+	}
+	async click() {
+		await this.updateComplete;
+		this._button.click();
+	}
+	_onHostClick(e) {
+		if (this.disabled) {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			return;
+		}
+		if (this._internals?.form) switch (this.type) {
+			case "reset":
+				this._internals.form.reset();
+				break;
+			case "button": break;
+			default:
+				this.submit();
+				break;
+		}
+		this._togglePopover();
+	}
+	#resetStateTimeout;
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("state")) {
+			clearTimeout(this.#resetStateTimeout);
+			if (this.state === "success" || this.state === "failed") this.#resetStateTimeout = setTimeout(() => this.state = void 0, 2e3);
+		}
+	}
+	renderState() {
+		let element;
+		switch (this.state) {
+			case "waiting":
+				element = html`<uui-loader-circle id="loader"></uui-loader-circle>`;
+				break;
+			case "success":
+				element = html`<uui-icon
           name="check"
           .fallback=${iconCheck.strings[0]}></uui-icon>`;
-        break;
-      case "failed":
-        element = html`<uui-icon
+				break;
+			case "failed":
+				element = html`<uui-icon
           name="wrong"
           .fallback=${iconWrong.strings[0]}></uui-icon>`;
-        break;
-      default:
-        return nothing;
-    }
-    return html`<div id="state">${element}</div>`;
-  }
-  render() {
-    if (this.href) {
-      const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
-      return html`
+				break;
+			default: return nothing;
+		}
+		return html`<div id="state">${element}</div>`;
+	}
+	render() {
+		if (this.href) {
+			const rel = this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0);
+			return html`
         <a
           id="button"
-          aria-label=${ifDefined(
-        this.getAttribute("aria-label") || this.label || void 0
-      )}
-          aria-labelledby=${ifDefined(
-        this.getAttribute("aria-labelledby") || void 0
-      )}
+          aria-label=${ifDefined(this.getAttribute("aria-label") || this.label || void 0)}
+          aria-labelledby=${ifDefined(this.getAttribute("aria-labelledby") || void 0)}
           title=${ifDefined(this.title === "" ? void 0 : this.title)}
           href=${ifDefined(this.disabled ? void 0 : this.href)}
           target=${ifDefined(this.target || void 0)}
@@ -161,29 +126,22 @@ const _UUIButtonElement = class _UUIButtonElement extends UUIFormControlWithBasi
           <slot name="extra"></slot>
         </a>
       `;
-    }
-    return html`
+		}
+		return html`
       <button
         id="button"
         type=${this.type}
         ?disabled=${this.disabled}
-        aria-label=${ifDefined(
-      this.getAttribute("aria-label") || this.label || void 0
-    )}
-        aria-labelledby=${ifDefined(
-      this.getAttribute("aria-labelledby") || void 0
-    )}
+        aria-label=${ifDefined(this.getAttribute("aria-label") || this.label || void 0)}
+        aria-labelledby=${ifDefined(this.getAttribute("aria-labelledby") || void 0)}
         title=${ifDefined(this.title === "" ? void 0 : this.title)}>
         ${this.renderState()} ${this.renderLabel()}
         <slot name="extra"></slot>
       </button>
     `;
-  }
-};
-_resetStateTimeout = new WeakMap();
-_UUIButtonElement.styles = [
-  UUIHorizontalShakeKeyframes,
-  css`
+	}
+	static {
+		this.styles = [UUIHorizontalShakeKeyframes, css`
       :host {
         position: relative;
         display: inline-flex;
@@ -282,7 +240,7 @@ _UUIButtonElement.styles = [
       }
 
       #button:focus-visible {
-        outline: 2px solid
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
           var(
             --uui-focus-outline-color,
             var(--color-emphasis, var(--uui-color-focus))
@@ -521,43 +479,33 @@ _UUIButtonElement.styles = [
           var(--color-standalone)
         );
       }
-    `
-];
-let UUIButtonElement = _UUIButtonElement;
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUIButtonElement.prototype, "type");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIButtonElement.prototype, "disabled");
-__decorateClass([
-  property({ reflect: true })
-], UUIButtonElement.prototype, "look");
-__decorateClass([
-  property({ reflect: true })
-], UUIButtonElement.prototype, "color");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIButtonElement.prototype, "compact");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUIButtonElement.prototype, "state");
-__decorateClass([
-  property({ type: String })
-], UUIButtonElement.prototype, "href");
-__decorateClass([
-  property({ type: String })
-], UUIButtonElement.prototype, "target");
-__decorateClass([
-  property({ type: String })
-], UUIButtonElement.prototype, "rel");
-__decorateClass([
-  property({ type: String })
-], UUIButtonElement.prototype, "title");
-__decorateClass([
-  query("#button")
-], UUIButtonElement.prototype, "_button");
-export {
-  UUIButtonElement
+    `];
+	}
 };
-//# sourceMappingURL=button.element.js.map
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUIButtonElement.prototype, "type", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIButtonElement.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], UUIButtonElement.prototype, "look", void 0);
+__decorate([property({ reflect: true })], UUIButtonElement.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIButtonElement.prototype, "compact", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUIButtonElement.prototype, "state", void 0);
+__decorate([property({ type: String })], UUIButtonElement.prototype, "href", void 0);
+__decorate([property({ type: String })], UUIButtonElement.prototype, "target", void 0);
+__decorate([property({ type: String })], UUIButtonElement.prototype, "rel", void 0);
+__decorate([property({ type: String })], UUIButtonElement.prototype, "title", void 0);
+__decorate([query("#button")], UUIButtonElement.prototype, "_button", void 0);
+//#endregion
+export { UUIButtonElement };
+
+//# sourceMappingURL=button.element.js.map

package/dist/components/button/button.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.element.js","sources":["../../../src/components/button/button.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport {\n  LabelMixin,\n  PopoverTargetMixin,\n  UUIFormControlWithBasicsMixin,\n} from '../../internal/mixins/index.js';\nimport { iconCheck, iconWrong } from '../icon-registry-essential/svgs/index.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\nimport '../loader-circle/loader-circle.js';\n\nexport type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';\n\nexport type UUIButtonType = 'submit' | 'button' | 'reset';\n\n/**\n *  @element uui-button\n *  @fires {UUIButtonEvent} click - fires when the element is clicked\n *  @slot - for default content\n *  @slot label - for label content\n *  @slot extra - for extra\n *  @property {string} label - label to be used for aria-label and potentially as visual label for some components\n *  @attribute label - label to be used for aria-label and potentially as visual label for some components\n *  @description - All-around button\n *  @cssprop --uui-button-height - overwrite the button height\n *  @cssprop --uui-button-border-width - overwrite the border width\n *  @cssprop --uui-button-border-radius - overwrite the border radius\n *  @cssprop --uui-button-font-weight - overwrite the font weight\n *  @cssprop --uui-button-font-size - overwrite the font size\n *  @cssprop --uui-button-background-color - overwrite the background color\n *  @cssprop --uui-button-background-color-hover - overwrite the background color for hover state\n *  @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state\n *  @cssprop --uui-button-border-color - overwrite the border color\n *  @cssprop --uui-button-border-color-hover - overwrite the border color for hover state\n *  @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state\n *  @cssprop --uui-button-contrast - overwrite the text color\n *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state\n *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state\n *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.\n *  @cssprop --uui-focus-outline-color - overwrite the focus outline color\n */\nexport class UUIButtonElement extends UUIFormControlWithBasicsMixin(\n  LabelMixin('', PopoverTargetMixin(LitElement)),\n) {\n  /**\n   * Specifies the type of button\n   * @type {\"submit\" | \"button\" | \"reset\"}\n   * @attr\n   * @default \"button\"\n   */\n  @property({ type: String, reflect: true })\n  type: UUIButtonType = 'button';\n\n  /**\n   * Disables the button, changes the looks of it and prevents if from emitting the click event\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Makes the left and right padding of the button narrower.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /**\n   * Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.\n   * @type {undefined |'waiting' | 'success' | 'failed'}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String, reflect: true })\n  state: UUIButtonState = undefined;\n\n  /**\n   * Set an href, this will turns the button into a anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Sets the title attribute, which provides a tooltip for both button and anchor elements.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public title: string = '';\n\n  @query('#button')\n  protected readonly _button!: HTMLInputElement;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._onHostClick);\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._button;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this._button.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._button.blur();\n  }\n  async click() {\n    await this.updateComplete;\n    this._button.click();\n  }\n\n  private _onHostClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      return;\n    }\n\n    if (this._internals?.form) {\n      switch (this.type) {\n        case 'reset':\n          this._internals.form.reset();\n          break;\n        case 'button':\n          break;\n        default:\n          this.submit();\n          break;\n      }\n    }\n\n    this._togglePopover();\n  }\n\n  #resetStateTimeout?: number;\n\n  // Reset the state after 2sec if it is 'success' or 'failed'.\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('state')) {\n      clearTimeout(this.#resetStateTimeout);\n      if (this.state === 'success' || this.state === 'failed') {\n        this.#resetStateTimeout = setTimeout(\n          () => (this.state = undefined),\n          2000,\n        ) as any;\n      }\n    }\n  }\n\n  protected renderState(): TemplateResult | typeof nothing {\n    let element: TemplateResult;\n    switch (this.state) {\n      case 'waiting':\n        element = html`<uui-loader-circle id=\"loader\"></uui-loader-circle>`;\n        break;\n      case 'success':\n        element = html`<uui-icon\n          name=\"check\"\n          .fallback=${iconCheck.strings[0]}></uui-icon>`;\n        break;\n      case 'failed':\n        element = html`<uui-icon\n          name=\"wrong\"\n          .fallback=${iconWrong.strings[0]}></uui-icon>`;\n        break;\n      default:\n        return nothing;\n    }\n\n    return html`<div id=\"state\">${element}</div>`;\n  }\n\n  render() {\n    if (this.href) {\n      const rel =\n        this.rel ||\n        (this.target === '_blank' ? 'noopener noreferrer' : undefined);\n      return html`\n        <a\n          id=\"button\"\n          aria-label=${ifDefined(\n            this.getAttribute('aria-label') || this.label || undefined,\n          )}\n          aria-labelledby=${ifDefined(\n            this.getAttribute('aria-labelledby') || undefined,\n          )}\n          title=${ifDefined(this.title === '' ? undefined : this.title)}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          target=${ifDefined(this.target || undefined)}\n          rel=${ifDefined(rel)}>\n          ${this.renderState()} ${this.renderLabel()}\n          <slot name=\"extra\"></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button\n        id=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(\n          this.getAttribute('aria-label') || this.label || undefined,\n        )}\n        aria-labelledby=${ifDefined(\n          this.getAttribute('aria-labelledby') || undefined,\n        )}\n        title=${ifDefined(this.title === '' ? undefined : this.title)}>\n        ${this.renderState()} ${this.renderLabel()}\n        <slot name=\"extra\"></slot>\n      </button>\n    `;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);\n        --uui-button-padding-left-factor: 3;\n        --uui-button-padding-right-factor: 3;\n        --uui-button-padding-top-factor: 1;\n        --uui-button-padding-bottom-factor: 1;\n\n        min-height: var(--uui-button-height, var(--uui-size-11));\n        max-height: 100%;\n        cursor: pointer;\n\n        text-align: center;\n        font-size: var(--uui-button-font-size, inherit);\n        font-weight: var(--uui-button-font-weight, 400);\n        transition:\n          background-color 80ms,\n          border-color 80ms,\n          color 80ms;\n      }\n\n      :host([compact]) {\n        --uui-button-padding-left-factor: 1;\n        --uui-button-padding-right-factor: 1;\n        --uui-button-padding-top-factor: 0;\n        --uui-button-padding-bottom-factor: 0;\n      }\n\n      .label {\n        line-height: 1; /** needed to reset 'a > span' */\n        transition: opacity 120ms;\n        display: flex;\n        gap: var(--uui-size-1);\n        align-items: center;\n      }\n\n      :host([state]:not([state=''])) .label {\n        opacity: 0;\n      }\n\n      #state {\n        position: absolute;\n        opacity: 0;\n        animation-name: fadeIn;\n        animation-delay: 40ms;\n        animation-duration: 360ms;\n        animation-fill-mode: forwards;\n        display: flex;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n      }\n\n      #button {\n        width: 100%;\n        background-color: transparent;\n        color: inherit;\n        font-size: inherit;\n        border-radius: inherit;\n        font-family: inherit;\n        font-weight: inherit;\n        text-align: inherit;\n        border: none;\n        cursor: inherit;\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: var(--uui-button-content-align, center);\n\n        /* for anchor tag: */\n        text-decoration: none;\n        color: currentColor;\n        line-height: inherit;\n\n        border-width: var(--uui-button-border-width, 1px);\n        border-style: solid;\n        border-radius: var(\n          --uui-button-border-radius,\n          var(--uui-border-radius-3)\n        );\n        cursor: pointer;\n\n        padding: calc(var(--uui-size-2) * var(--uui-button-padding-top-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));\n\n        box-shadow: none;\n\n        transition:\n          background-color 60ms,\n          color 60ms,\n          border-color 60ms;\n      }\n\n      #button:focus-visible {\n        outline: 2px solid\n          var(\n            --uui-focus-outline-color,\n            var(--color-emphasis, var(--uui-color-focus))\n          );\n      }\n\n      button[disabled]:active,\n      a:not([href]):active {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n\n      /* ANIMATIONS */\n      @keyframes fadeIn {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes fadeOut {\n        0% {\n          opacity: 1;\n        }\n        100% {\n          opacity: 0;\n        }\n      }\n\n      #icon-check,\n      #icon-wrong {\n        display: grid;\n        place-items: center;\n        width: 1.5em;\n      }\n\n      #loader {\n        font-size: 1.5em;\n      }\n      :host([look]:not([look=''])) #loader {\n        color: inherit;\n      }\n\n      /* edge case for default color */\n      :host(:not([color]):not([look='primary'])),\n      :host([color='']:not([look='primary'])),\n      :host([color='default']:not([look='primary'])) {\n        --uui-button-contrast-hover: var(--uui-color-default-emphasis);\n      }\n\n      :host([color='warning'][look='outline']) #button,\n      :host([color='warning'][look='placeholder']) #button {\n        --uui-button-contrast-hover: var(--color-standalone);\n      }\n\n      /** Button color attribute: */\n      #button {\n        --color: var(--uui-color-interactive);\n        --color-standalone: var(--uui-color-interactive);\n        --color-emphasis: var(--uui-color-interactive-emphasis);\n        --color-contrast: var(--uui-color-interactive-contrast);\n      }\n      /* PRIMARY — DEFAULT */\n      :host([look='primary']:not([color])) #button,\n      :host([look='primary'][color='']) #button,\n      :host([look='primary'][color='default']) #button {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-emphasis: var(--uui-color-default-emphasis);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) #button {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-emphasis: var(--uui-color-positive-emphasis);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) #button {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-emphasis: var(--uui-color-warning-emphasis);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) #button {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-emphasis: var(--uui-color-danger-emphasis);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) #button {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-emphasis: var(--uui-color-invalid-emphasis);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n      :host([disabled]) #button {\n        --color: var(--uui-color-disabled);\n        --color-standalone: var(--uui-color-disabled-contrast);\n        --color-emphasis: var(--uui-color-disabled);\n        --color-contrast: var(--uui-color-disabled-contrast);\n\n        cursor: default;\n      }\n\n      /** Button look attribute: */\n      /* DEFAULT */\n      #button {\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(--uui-button-border-color, transparent);\n      }\n      :host(:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n      :host([disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          transparent\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, transparent);\n      }\n\n      /* PRIMARY */\n      :host([look='primary']) #button {\n        background-color: var(--uui-button-background-color, var(--color));\n        color: var(--uui-button-contrast, var(--color-contrast));\n        border-color: var(--uui-button-border-color, transparent);\n        /** makes font slightly bolder */\n        text-shadow: 0 0 currentColor;\n      }\n\n      :host([look='primary']:hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--color-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-contrast));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n\n      /* special outline offset tof primary style so you can see the outline */\n      :host([look='primary']) #button:focus-visible {\n        outline-offset: 2px;\n      }\n\n      :host([look='primary'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, var(--color));\n      }\n\n      /* SECONDARY */\n      :host([look='secondary']) #button {\n        background-color: var(\n          --uui-button-background-color,\n          var(--uui-color-surface-alt)\n        );\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(--uui-button-border-color, transparent);\n        /** makes font slightly bolder */\n        text-shadow: 0 0 currentColor;\n      }\n      :host([look='secondary']:hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n      :host([look='secondary'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, var(--color));\n      }\n\n      /* OUTLINE */\n      :host([look='outline']) #button {\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color,\n          var(--uui-color-border-standalone)\n        );\n      }\n      :host([look='outline']:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover);\n      }\n      :host([look='outline'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          transparent\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color-disabled,\n          var(--color-standalone)\n        );\n      }\n\n      /* PLACEHOLDER */\n      :host([look='placeholder']) #button {\n        border-style: dashed;\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color,\n          var(--uui-color-border-standalone)\n        );\n      }\n      :host([look='placeholder']:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover);\n      }\n      :host([look='placeholder'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color-disabled,\n          var(--color-standalone)\n        );\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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A;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA4GiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3U9C,IAAM,mBAAN;AAUL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAT9B,iBAUX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAlB/B,iBAmBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GA3BhB,iBA4BX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GApChB,iBAqCX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GA7C/B,iBA8CX,WAAA,SAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAtD9B,iBAuDX,WAAA,OAAA;AASO,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA/Df,iBAgEJ,WAAA,MAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxEf,iBAyEJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFf,iBAkFJ,WAAA,KAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Ff,iBA2FJ,WAAA,OAAA;AAGY,gBAAA;AAAA,EADlB,MAAM,SAAS;AAAA,GA7FL,iBA8FQ,WAAA,SAAA;"}
+{"version":3,"file":"button.element.js","names":["#resetStateTimeout"],"sources":["../../../src/components/button/button.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport {\n  LabelMixin,\n  PopoverTargetMixin,\n  UUIFormControlWithBasicsMixin,\n} from '../../internal/mixins/index.js';\nimport { iconCheck, iconWrong } from '../icon-registry-essential/svgs/index.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\nimport type { TemplateResult } from 'lit';\nimport { css, html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '../icon/icon.js';\nimport '../loader-circle/loader-circle.js';\n\nexport type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';\n\nexport type UUIButtonType = 'submit' | 'button' | 'reset';\n\n/**\n *  @element uui-button\n *  @fires {UUIButtonEvent} click - fires when the element is clicked\n *  @slot - for default content\n *  @slot label - for label content\n *  @slot extra - for extra\n *  @property {string} label - label to be used for aria-label and potentially as visual label for some components\n *  @attribute label - label to be used for aria-label and potentially as visual label for some components\n *  @description - All-around button\n *  @cssprop --uui-button-height - overwrite the button height\n *  @cssprop --uui-button-border-width - overwrite the border width\n *  @cssprop --uui-button-border-radius - overwrite the border radius\n *  @cssprop --uui-button-font-weight - overwrite the font weight\n *  @cssprop --uui-button-font-size - overwrite the font size\n *  @cssprop --uui-button-background-color - overwrite the background color\n *  @cssprop --uui-button-background-color-hover - overwrite the background color for hover state\n *  @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state\n *  @cssprop --uui-button-border-color - overwrite the border color\n *  @cssprop --uui-button-border-color-hover - overwrite the border color for hover state\n *  @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state\n *  @cssprop --uui-button-contrast - overwrite the text color\n *  @cssprop --uui-button-contrast-hover - overwrite the text color for hover state\n *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state\n *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.\n *  @cssprop --uui-focus-outline-color - overwrite the focus outline color\n */\nexport class UUIButtonElement extends UUIFormControlWithBasicsMixin(\n  LabelMixin('', PopoverTargetMixin(LitElement)),\n) {\n  /**\n   * Specifies the type of button\n   * @type {\"submit\" | \"button\" | \"reset\"}\n   * @attr\n   * @default \"button\"\n   */\n  @property({ type: String, reflect: true })\n  type: UUIButtonType = 'button';\n\n  /**\n   * Disables the button, changes the looks of it and prevents if from emitting the click event\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Makes the left and right padding of the button narrower.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /**\n   * Sets the state of the button. With waiting state a loader will show, the success and fail states display icons. State is automatically reset to the default after 3 seconds.\n   * @type {undefined |'waiting' | 'success' | 'failed'}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String, reflect: true })\n  state: UUIButtonState = undefined;\n\n  /**\n   * Set an href, this will turns the button into a anchor tag.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public href?: string;\n\n  /**\n   * Set an anchor tag target, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /**\n   * Set the rel attribute for an anchor tag, only used when using href.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  public rel?: string;\n\n  /**\n   * Sets the title attribute, which provides a tooltip for both button and anchor elements.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String })\n  public title: string = '';\n\n  @query('#button')\n  protected readonly _button!: HTMLInputElement;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._onHostClick, { capture: true });\n  }\n\n  protected getFormElement(): HTMLElement {\n    return this._button;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this._button.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._button.blur();\n  }\n  async click() {\n    await this.updateComplete;\n    this._button.click();\n  }\n\n  private _onHostClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopImmediatePropagation();\n      return;\n    }\n\n    if (this._internals?.form) {\n      switch (this.type) {\n        case 'reset':\n          this._internals.form.reset();\n          break;\n        case 'button':\n          break;\n        default:\n          this.submit();\n          break;\n      }\n    }\n\n    this._togglePopover();\n  }\n\n  #resetStateTimeout?: number;\n\n  // Reset the state after 2sec if it is 'success' or 'failed'.\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('state')) {\n      clearTimeout(this.#resetStateTimeout);\n      if (this.state === 'success' || this.state === 'failed') {\n        this.#resetStateTimeout = setTimeout(\n          () => (this.state = undefined),\n          2000,\n        ) as any;\n      }\n    }\n  }\n\n  protected renderState(): TemplateResult | typeof nothing {\n    let element: TemplateResult;\n    switch (this.state) {\n      case 'waiting':\n        element = html`<uui-loader-circle id=\"loader\"></uui-loader-circle>`;\n        break;\n      case 'success':\n        element = html`<uui-icon\n          name=\"check\"\n          .fallback=${iconCheck.strings[0]}></uui-icon>`;\n        break;\n      case 'failed':\n        element = html`<uui-icon\n          name=\"wrong\"\n          .fallback=${iconWrong.strings[0]}></uui-icon>`;\n        break;\n      default:\n        return nothing;\n    }\n\n    return html`<div id=\"state\">${element}</div>`;\n  }\n\n  render() {\n    if (this.href) {\n      const rel =\n        this.rel ||\n        (this.target === '_blank' ? 'noopener noreferrer' : undefined);\n      return html`\n        <a\n          id=\"button\"\n          aria-label=${ifDefined(\n            this.getAttribute('aria-label') || this.label || undefined,\n          )}\n          aria-labelledby=${ifDefined(\n            this.getAttribute('aria-labelledby') || undefined,\n          )}\n          title=${ifDefined(this.title === '' ? undefined : this.title)}\n          href=${ifDefined(this.disabled ? undefined : this.href)}\n          target=${ifDefined(this.target || undefined)}\n          rel=${ifDefined(rel)}>\n          ${this.renderState()} ${this.renderLabel()}\n          <slot name=\"extra\"></slot>\n        </a>\n      `;\n    }\n    return html`\n      <button\n        id=\"button\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-label=${ifDefined(\n          this.getAttribute('aria-label') || this.label || undefined,\n        )}\n        aria-labelledby=${ifDefined(\n          this.getAttribute('aria-labelledby') || undefined,\n        )}\n        title=${ifDefined(this.title === '' ? undefined : this.title)}>\n        ${this.renderState()} ${this.renderLabel()}\n        <slot name=\"extra\"></slot>\n      </button>\n    `;\n  }\n\n  static override readonly styles = [\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);\n        --uui-button-padding-left-factor: 3;\n        --uui-button-padding-right-factor: 3;\n        --uui-button-padding-top-factor: 1;\n        --uui-button-padding-bottom-factor: 1;\n\n        min-height: var(--uui-button-height, var(--uui-size-11));\n        max-height: 100%;\n        cursor: pointer;\n\n        text-align: center;\n        font-size: var(--uui-button-font-size, inherit);\n        font-weight: var(--uui-button-font-weight, 400);\n        transition:\n          background-color 80ms,\n          border-color 80ms,\n          color 80ms;\n      }\n\n      :host([compact]) {\n        --uui-button-padding-left-factor: 1;\n        --uui-button-padding-right-factor: 1;\n        --uui-button-padding-top-factor: 0;\n        --uui-button-padding-bottom-factor: 0;\n      }\n\n      .label {\n        line-height: 1; /** needed to reset 'a > span' */\n        transition: opacity 120ms;\n        display: flex;\n        gap: var(--uui-size-1);\n        align-items: center;\n      }\n\n      :host([state]:not([state=''])) .label {\n        opacity: 0;\n      }\n\n      #state {\n        position: absolute;\n        opacity: 0;\n        animation-name: fadeIn;\n        animation-delay: 40ms;\n        animation-duration: 360ms;\n        animation-fill-mode: forwards;\n        display: flex;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n      }\n\n      #button {\n        width: 100%;\n        background-color: transparent;\n        color: inherit;\n        font-size: inherit;\n        border-radius: inherit;\n        font-family: inherit;\n        font-weight: inherit;\n        text-align: inherit;\n        border: none;\n        cursor: inherit;\n\n        display: inline-flex;\n        align-items: center;\n        justify-content: var(--uui-button-content-align, center);\n\n        /* for anchor tag: */\n        text-decoration: none;\n        color: currentColor;\n        line-height: inherit;\n\n        border-width: var(--uui-button-border-width, 1px);\n        border-style: solid;\n        border-radius: var(\n          --uui-button-border-radius,\n          var(--uui-border-radius-3)\n        );\n        cursor: pointer;\n\n        padding: calc(var(--uui-size-2) * var(--uui-button-padding-top-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))\n          calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));\n\n        box-shadow: none;\n\n        transition:\n          background-color 60ms,\n          color 60ms,\n          border-color 60ms;\n      }\n\n      #button:focus-visible {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(\n            --uui-focus-outline-color,\n            var(--color-emphasis, var(--uui-color-focus))\n          );\n      }\n\n      button[disabled]:active,\n      a:not([href]):active {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n\n      /* ANIMATIONS */\n      @keyframes fadeIn {\n        0% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      @keyframes fadeOut {\n        0% {\n          opacity: 1;\n        }\n        100% {\n          opacity: 0;\n        }\n      }\n\n      #icon-check,\n      #icon-wrong {\n        display: grid;\n        place-items: center;\n        width: 1.5em;\n      }\n\n      #loader {\n        font-size: 1.5em;\n      }\n      :host([look]:not([look=''])) #loader {\n        color: inherit;\n      }\n\n      /* edge case for default color */\n      :host(:not([color]):not([look='primary'])),\n      :host([color='']:not([look='primary'])),\n      :host([color='default']:not([look='primary'])) {\n        --uui-button-contrast-hover: var(--uui-color-default-emphasis);\n      }\n\n      :host([color='warning'][look='outline']) #button,\n      :host([color='warning'][look='placeholder']) #button {\n        --uui-button-contrast-hover: var(--color-standalone);\n      }\n\n      /** Button color attribute: */\n      #button {\n        --color: var(--uui-color-interactive);\n        --color-standalone: var(--uui-color-interactive);\n        --color-emphasis: var(--uui-color-interactive-emphasis);\n        --color-contrast: var(--uui-color-interactive-contrast);\n      }\n      /* PRIMARY — DEFAULT */\n      :host([look='primary']:not([color])) #button,\n      :host([look='primary'][color='']) #button,\n      :host([look='primary'][color='default']) #button {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-emphasis: var(--uui-color-default-emphasis);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) #button {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-emphasis: var(--uui-color-positive-emphasis);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) #button {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-emphasis: var(--uui-color-warning-emphasis);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) #button {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-emphasis: var(--uui-color-danger-emphasis);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) #button {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-emphasis: var(--uui-color-invalid-emphasis);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n      :host([disabled]) #button {\n        --color: var(--uui-color-disabled);\n        --color-standalone: var(--uui-color-disabled-contrast);\n        --color-emphasis: var(--uui-color-disabled);\n        --color-contrast: var(--uui-color-disabled-contrast);\n\n        cursor: default;\n      }\n\n      /** Button look attribute: */\n      /* DEFAULT */\n      #button {\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(--uui-button-border-color, transparent);\n      }\n      :host(:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n      :host([disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          transparent\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, transparent);\n      }\n\n      /* PRIMARY */\n      :host([look='primary']) #button {\n        background-color: var(--uui-button-background-color, var(--color));\n        color: var(--uui-button-contrast, var(--color-contrast));\n        border-color: var(--uui-button-border-color, transparent);\n        /** makes font slightly bolder */\n        text-shadow: 0 0 currentColor;\n      }\n\n      :host([look='primary']:hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--color-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-contrast));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n\n      /* special outline offset tof primary style so you can see the outline */\n      :host([look='primary']) #button:focus-visible {\n        outline-offset: 2px;\n      }\n\n      :host([look='primary'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, var(--color));\n      }\n\n      /* SECONDARY */\n      :host([look='secondary']) #button {\n        background-color: var(\n          --uui-button-background-color,\n          var(--uui-color-surface-alt)\n        );\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(--uui-button-border-color, transparent);\n        /** makes font slightly bolder */\n        text-shadow: 0 0 currentColor;\n      }\n      :host([look='secondary']:hover) #button {\n        background-color: var(\n          --uui-button-background-color-hover,\n          var(--uui-color-surface-emphasis)\n        );\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover, transparent);\n      }\n      :host([look='secondary'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-contrast));\n        border-color: var(--uui-button-border-color-disabled, var(--color));\n      }\n\n      /* OUTLINE */\n      :host([look='outline']) #button {\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color,\n          var(--uui-color-border-standalone)\n        );\n      }\n      :host([look='outline']:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover);\n      }\n      :host([look='outline'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          transparent\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color-disabled,\n          var(--color-standalone)\n        );\n      }\n\n      /* PLACEHOLDER */\n      :host([look='placeholder']) #button {\n        border-style: dashed;\n        background-color: var(--uui-button-background-color, transparent);\n        color: var(--uui-button-contrast, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color,\n          var(--uui-color-border-standalone)\n        );\n      }\n      :host([look='placeholder']:not([disabled]):hover) #button {\n        background-color: var(--uui-button-background-color-hover, transparent);\n        color: var(--uui-button-contrast-hover, var(--color-standalone));\n        border-color: var(--uui-button-border-color-hover);\n      }\n      :host([look='placeholder'][disabled]) #button {\n        background-color: var(\n          --uui-button-background-color-disabled,\n          var(--color)\n        );\n        color: var(--uui-button-contrast-disabled, var(--color-standalone));\n        border-color: var(\n          --uui-button-border-color-disabled,\n          var(--color-standalone)\n        );\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/button/button.js

@@ -1,8 +1,8 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUIButtonElement } from "./button.element.js";
+//#region src/components/button/button.ts
 defineElement("uui-button", UUIButtonElement);
-export {
-  UUIButtonElement,
-  UUIButtonElement as default
-};
-//# sourceMappingURL=button.js.map
+//#endregion
+export { UUIButtonElement };
+
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIButtonElement } from './button.element.js';\n\ndefineElement('uui-button', UUIButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-button': UUIButtonElement;\n  }\n}\n\nexport * from './button.element.js';\nexport { UUIButtonElement as default } from './button.element.js';\n"],"names":[],"mappings":";;AAGA,cAAc,cAAc,gBAAgB;"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIButtonElement } from './button.element.js';\n\ndefineElement('uui-button', UUIButtonElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-button': UUIButtonElement;\n  }\n}\n\nexport * from './button.element.js';\n"],"mappings":";;;AAGA,cAAc,cAAc,gBAAgB"}

package/dist/components/button-copy-text/UUICopyTextEvent.js

@@ -1,14 +1,18 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUICopyTextEvent = class _UUICopyTextEvent extends UUIEvent {
-  constructor() {
-    super(...arguments);
-    this.text = null;
-  }
+//#region src/components/button-copy-text/UUICopyTextEvent.ts
+var UUICopyTextEvent = class extends UUIEvent {
+	constructor(..._args) {
+		super(..._args);
+		this.text = null;
+	}
+	static {
+		this.COPIED = "copied";
+	}
+	static {
+		this.COPYING = "copying";
+	}
 };
-_UUICopyTextEvent.COPIED = "copied";
-_UUICopyTextEvent.COPYING = "copying";
-let UUICopyTextEvent = _UUICopyTextEvent;
-export {
-  UUICopyTextEvent
-};
-//# sourceMappingURL=UUICopyTextEvent.js.map
+//#endregion
+export { UUICopyTextEvent };
+
+//# sourceMappingURL=UUICopyTextEvent.js.map

package/dist/components/button-copy-text/UUICopyTextEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUICopyTextEvent.js","sources":["../../../src/components/button-copy-text/UUICopyTextEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIButtonCopyTextElement } from './button-copy-text.element.js';\n\nexport class UUICopyTextEvent extends UUIEvent<\n  { text: string },\n  UUIButtonCopyTextElement\n> {\n  public static readonly COPIED: string = 'copied';\n  public static readonly COPYING: string = 'copying';\n\n  /**\n   * The text content that is about to be copied to the clipboard\n   */\n  public text: string | null = null;\n}\n"],"names":[],"mappings":";AAGO,MAAM,oBAAN,MAAM,0BAAyB,SAGpC;AAAA,EAHK,cAAA;AAAA,UAAA,GAAA,SAAA;AAUL,SAAO,OAAsB;AAAA,EAAA;AAC/B;AAPE,kBAAuB,SAAiB;AACxC,kBAAuB,UAAkB;AALpC,IAAM,mBAAN;"}
+{"version":3,"file":"UUICopyTextEvent.js","names":[],"sources":["../../../src/components/button-copy-text/UUICopyTextEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIButtonCopyTextElement } from './button-copy-text.element.js';\n\nexport class UUICopyTextEvent extends UUIEvent<\n  { text: string },\n  UUIButtonCopyTextElement\n> {\n  public static readonly COPIED: string = 'copied';\n  public static readonly COPYING: string = 'copying';\n\n  /**\n   * The text content that is about to be copied to the clipboard\n   */\n  public text: string | null = null;\n}\n"],"mappings":";;AAGA,IAAa,mBAAb,cAAsC,SAGpC;;;cAO6B;;;gBANW;;;iBACC;;AAM3C"}

package/dist/components/button-copy-text/button-copy-text.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './button-copy-text.element.js';
 export * from './UUICopyTextEvent.js';
-export { UUIButtonCopyTextElement as default } from './button-copy-text.element.js';