@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

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

@@ -1,100 +1,85 @@
-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 _animationTimer, _onClick;
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-import "../button/button.js";
-import { UUICopyTextEvent } from "./UUICopyTextEvent.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import "../icon/icon.js";
 import { UUIButtonElement } from "../button/button.element.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 _UUIButtonCopyTextElement = class _UUIButtonCopyTextElement extends UUIButtonElement {
-  constructor() {
-    super();
-    __privateAdd(this, _animationTimer);
-    __privateAdd(this, _onClick);
-    this.text = "";
-    this.copyFrom = "";
-    this.animationStateDelay = 250;
-    __privateSet(this, _onClick, async () => {
-      this.state = "waiting";
-      let valueToCopy = this.text;
-      if (this.copyFrom) {
-        const el = document.getElementById(this.copyFrom);
-        if (el) {
-          if ("value" in el) {
-            valueToCopy = el.value;
-          } else {
-            valueToCopy = el.textContent ?? el.innerText ?? "";
-          }
-        } else {
-          console.error(`Element ID ${this.copyFrom} not found to copy from`);
-          this.state = "failed";
-          return;
-        }
-      }
-      const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);
-      beforeCopyEv.text = valueToCopy;
-      this.dispatchEvent(beforeCopyEv);
-      if (beforeCopyEv.text != null) {
-        valueToCopy = beforeCopyEv.text;
-      }
-      try {
-        await navigator.clipboard.writeText(valueToCopy);
-        const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);
-        copiedEv.text = valueToCopy;
-        this.dispatchEvent(copiedEv);
-        __privateSet(this, _animationTimer, setTimeout(() => {
-          this.state = "success";
-        }, this.animationStateDelay));
-      } catch (err) {
-        this.state = "failed";
-        console.error("Error copying to clipboard", err);
-      }
-    });
-    this.addEventListener("click", __privateGet(this, _onClick));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (__privateGet(this, _animationTimer)) {
-      clearTimeout(__privateGet(this, _animationTimer));
-    }
-  }
-  renderLabel() {
-    return html`
+import "../button/button.js";
+import { UUICopyTextEvent } from "./UUICopyTextEvent.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/button-copy-text/button-copy-text.element.ts
+/**
+* @summary A button to trigger text content to be copied to the clipboard
+* @element uui-button-copy-text
+* @dependency uui-button
+* @dependency uui-icon
+* @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard
+* @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard
+* @slot - Use to replace the default content of the copy icon
+*/
+var UUIButtonCopyTextElement = class extends UUIButtonElement {
+	#animationTimer;
+	constructor() {
+		super();
+		this.text = "";
+		this.copyFrom = "";
+		this.animationStateDelay = 250;
+		this.#onClick = async () => {
+			this.state = "waiting";
+			let valueToCopy = this.text;
+			if (this.copyFrom) {
+				const el = document.getElementById(this.copyFrom);
+				if (el) if ("value" in el) valueToCopy = el.value;
+				else valueToCopy = el.textContent ?? el.innerText ?? "";
+				else {
+					console.error(`Element ID ${this.copyFrom} not found to copy from`);
+					this.state = "failed";
+					return;
+				}
+			}
+			const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);
+			beforeCopyEv.text = valueToCopy;
+			this.dispatchEvent(beforeCopyEv);
+			if (beforeCopyEv.text != null) valueToCopy = beforeCopyEv.text;
+			try {
+				await navigator.clipboard.writeText(valueToCopy);
+				const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);
+				copiedEv.text = valueToCopy;
+				this.dispatchEvent(copiedEv);
+				this.#animationTimer = setTimeout(() => {
+					this.state = "success";
+				}, this.animationStateDelay);
+			} catch (err) {
+				this.state = "failed";
+				console.error("Error copying to clipboard", err);
+			}
+		};
+		this.addEventListener("click", this.#onClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#animationTimer) clearTimeout(this.#animationTimer);
+	}
+	#onClick;
+	renderLabel() {
+		return html`
       <slot class="label">
         <uui-icon name="copy"></uui-icon>
       </slot>
     `;
-  }
-};
-_animationTimer = new WeakMap();
-_onClick = new WeakMap();
-_UUIButtonCopyTextElement.styles = UUIButtonElement.styles;
-let UUIButtonCopyTextElement = _UUIButtonCopyTextElement;
-__decorateClass([
-  property({ type: String })
-], UUIButtonCopyTextElement.prototype, "text");
-__decorateClass([
-  property({ type: String, attribute: "copy-from" })
-], UUIButtonCopyTextElement.prototype, "copyFrom");
-__decorateClass([
-  property({ type: Number, attribute: "animation-state-delay" })
-], UUIButtonCopyTextElement.prototype, "animationStateDelay");
-export {
-  UUIButtonCopyTextElement
+	}
+	static {
+		this.styles = UUIButtonElement.styles;
+	}
 };
-//# sourceMappingURL=button-copy-text.element.js.map
+__decorate([property({ type: String })], UUIButtonCopyTextElement.prototype, "text", void 0);
+__decorate([property({
+	type: String,
+	attribute: "copy-from"
+})], UUIButtonCopyTextElement.prototype, "copyFrom", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "animation-state-delay"
+})], UUIButtonCopyTextElement.prototype, "animationStateDelay", void 0);
+//#endregion
+export { UUIButtonCopyTextElement };
+
+//# sourceMappingURL=button-copy-text.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-copy-text.element.js","sources":["../../../src/components/button-copy-text/button-copy-text.element.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIButtonElement } from '../button/button.js';\nimport { UUICopyTextEvent } from './UUICopyTextEvent.js';\n\nimport '../icon/icon.js';\n\n/**\n * @summary A button to trigger text content to be copied to the clipboard\n * @element uui-button-copy-text\n * @dependency uui-button\n * @dependency uui-icon\n * @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard\n * @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard\n * @slot - Use to replace the default content of the copy icon\n */\nexport class UUIButtonCopyTextElement extends UUIButtonElement {\n  /**\n   * Set a string you wish to copy to the clipboard\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String })\n  text: string = '';\n\n  /**\n   * Copies the text content from another element by specifying the ID of the element\n   * The ID of the element does not need to start with # like a CSS selector\n   * If this property is set, the value property is ignored\n   * @type {string}\n   * @attr\n   * @default ''\n   * @example copy-from=\"element-id\"\n   */\n  @property({ type: String, attribute: 'copy-from' })\n  copyFrom: string = '';\n\n  /**\n   * The delay in milliseconds before the button returns to its default state after a successful copy\n   * @type {number}\n   * @attr\n   * @default 250\n   */\n  @property({ type: Number, attribute: 'animation-state-delay' })\n  animationStateDelay: number = 250;\n\n  #animationTimer?: any;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.#animationTimer) {\n      clearTimeout(this.#animationTimer);\n    }\n  }\n\n  readonly #onClick = async () => {\n    this.state = 'waiting';\n\n    // By default use the value property\n    let valueToCopy = this.text;\n\n    // If copy-from is set use that instead\n    if (this.copyFrom) {\n      // Try & find an element with the ID\n      const el = document.getElementById(this.copyFrom);\n      if (el) {\n        // Override the value to copy, if the element has a value property\n        // Such as uui-input or uui-textarea or native input elements\n        if ('value' in el) {\n          valueToCopy = (el as any).value;\n        } else {\n          valueToCopy = el.textContent ?? el.innerText ?? '';\n        }\n      } else {\n        console.error(`Element ID ${this.copyFrom} not found to copy from`);\n        this.state = 'failed';\n        return;\n      }\n    }\n\n    const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);\n    beforeCopyEv.text = valueToCopy;\n    this.dispatchEvent(beforeCopyEv);\n\n    if (beforeCopyEv.text != null) {\n      valueToCopy = beforeCopyEv.text;\n    }\n\n    try {\n      await navigator.clipboard.writeText(valueToCopy);\n      const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);\n      copiedEv.text = valueToCopy;\n      this.dispatchEvent(copiedEv);\n      this.#animationTimer = setTimeout(() => {\n        this.state = 'success';\n      }, this.animationStateDelay);\n    } catch (err) {\n      this.state = 'failed';\n      console.error('Error copying to clipboard', err);\n    }\n  };\n\n  protected override renderLabel() {\n    return html`\n      <slot class=\"label\">\n        <uui-icon name=\"copy\"></uui-icon>\n      </slot>\n    `;\n  }\n\n  static override readonly styles = UUIButtonElement.styles;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,4BAAN,MAAM,kCAAiC,iBAAiB;AAAA,EAgC7D,cAAc;AACZ,UAAA;AAHF;AAcS;AArCT,SAAA,OAAe;AAYf,SAAA,WAAmB;AASnB,SAAA,sBAA8B;AAgB9B,uBAAS,UAAW,YAAY;AAC9B,WAAK,QAAQ;AAGb,UAAI,cAAc,KAAK;AAGvB,UAAI,KAAK,UAAU;AAEjB,cAAM,KAAK,SAAS,eAAe,KAAK,QAAQ;AAChD,YAAI,IAAI;AAGN,cAAI,WAAW,IAAI;AACjB,0BAAe,GAAW;AAAA,UAC5B,OAAO;AACL,0BAAc,GAAG,eAAe,GAAG,aAAa;AAAA,UAClD;AAAA,QACF,OAAO;AACL,kBAAQ,MAAM,cAAc,KAAK,QAAQ,yBAAyB;AAClE,eAAK,QAAQ;AACb;AAAA,QACF;AAAA,MACF;AAEA,YAAM,eAAe,IAAI,iBAAiB,iBAAiB,OAAO;AAClE,mBAAa,OAAO;AACpB,WAAK,cAAc,YAAY;AAE/B,UAAI,aAAa,QAAQ,MAAM;AAC7B,sBAAc,aAAa;AAAA,MAC7B;AAEA,UAAI;AACF,cAAM,UAAU,UAAU,UAAU,WAAW;AAC/C,cAAM,WAAW,IAAI,iBAAiB,iBAAiB,MAAM;AAC7D,iBAAS,OAAO;AAChB,aAAK,cAAc,QAAQ;AAC3B,2BAAK,iBAAkB,WAAW,MAAM;AACtC,eAAK,QAAQ;AAAA,QACf,GAAG,KAAK,mBAAmB;AAAA,MAC7B,SAAS,KAAK;AACZ,aAAK,QAAQ;AACb,gBAAQ,MAAM,8BAA8B,GAAG;AAAA,MACjD;AAAA,IACF;AAvDE,SAAK,iBAAiB,SAAS,mBAAK,SAAQ;AAAA,EAC9C;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA;AACN,QAAI,mBAAK,kBAAiB;AACxB,mBAAa,mBAAK,gBAAe;AAAA,IACnC;AAAA,EACF;AAAA,EAiDmB,cAAc;AAC/B,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAGF;AAtEE;AAcS;AAuDT,0BAAyB,SAAS,iBAAiB;AAnG9C,IAAM,2BAAN;AAOL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,yBAOX,WAAA,MAAA;AAYA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAlBvC,yBAmBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,yBAAyB;AAAA,GA3BnD,yBA4BX,WAAA,qBAAA;"}
+{"version":3,"file":"button-copy-text.element.js","names":["#animationTimer","#onClick"],"sources":["../../../src/components/button-copy-text/button-copy-text.element.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { UUIButtonElement } from '../button/button.js';\nimport { UUICopyTextEvent } from './UUICopyTextEvent.js';\n\nimport '../icon/icon.js';\n\n/**\n * @summary A button to trigger text content to be copied to the clipboard\n * @element uui-button-copy-text\n * @dependency uui-button\n * @dependency uui-icon\n * @fires {UUICopyTextEvent} copying - Fires before the content is about to copied to the clipboard and can be used to transform or modify the data before its added to the clipboard\n * @fires {UUICopyTextEvent} copied - Fires when the content is copied to the clipboard\n * @slot - Use to replace the default content of the copy icon\n */\nexport class UUIButtonCopyTextElement extends UUIButtonElement {\n  /**\n   * Set a string you wish to copy to the clipboard\n   * @type {string}\n   * @default ''\n   */\n  @property({ type: String })\n  text: string = '';\n\n  /**\n   * Copies the text content from another element by specifying the ID of the element\n   * The ID of the element does not need to start with # like a CSS selector\n   * If this property is set, the value property is ignored\n   * @type {string}\n   * @attr\n   * @default ''\n   * @example copy-from=\"element-id\"\n   */\n  @property({ type: String, attribute: 'copy-from' })\n  copyFrom: string = '';\n\n  /**\n   * The delay in milliseconds before the button returns to its default state after a successful copy\n   * @type {number}\n   * @attr\n   * @default 250\n   */\n  @property({ type: Number, attribute: 'animation-state-delay' })\n  animationStateDelay: number = 250;\n\n  #animationTimer?: any;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.#animationTimer) {\n      clearTimeout(this.#animationTimer);\n    }\n  }\n\n  readonly #onClick = async () => {\n    this.state = 'waiting';\n\n    // By default use the value property\n    let valueToCopy = this.text;\n\n    // If copy-from is set use that instead\n    if (this.copyFrom) {\n      // Try & find an element with the ID\n      const el = document.getElementById(this.copyFrom);\n      if (el) {\n        // Override the value to copy, if the element has a value property\n        // Such as uui-input or uui-textarea or native input elements\n        if ('value' in el) {\n          valueToCopy = (el as any).value;\n        } else {\n          valueToCopy = el.textContent ?? el.innerText ?? '';\n        }\n      } else {\n        console.error(`Element ID ${this.copyFrom} not found to copy from`);\n        this.state = 'failed';\n        return;\n      }\n    }\n\n    const beforeCopyEv = new UUICopyTextEvent(UUICopyTextEvent.COPYING);\n    beforeCopyEv.text = valueToCopy;\n    this.dispatchEvent(beforeCopyEv);\n\n    if (beforeCopyEv.text != null) {\n      valueToCopy = beforeCopyEv.text;\n    }\n\n    try {\n      await navigator.clipboard.writeText(valueToCopy);\n      const copiedEv = new UUICopyTextEvent(UUICopyTextEvent.COPIED);\n      copiedEv.text = valueToCopy;\n      this.dispatchEvent(copiedEv);\n      this.#animationTimer = setTimeout(() => {\n        this.state = 'success';\n      }, this.animationStateDelay);\n    } catch (err) {\n      this.state = 'failed';\n      console.error('Error copying to clipboard', err);\n    }\n  };\n\n  protected override renderLabel() {\n    return html`\n      <slot class=\"label\">\n        <uui-icon name=\"copy\"></uui-icon>\n      </slot>\n    `;\n  }\n\n  static override readonly styles = UUIButtonElement.styles;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAa,2BAAb,cAA8C,iBAAiB;CA8B7D;CAEA,cAAc;EACZ,MAAM;cA1BO;kBAYI;6BASW;kBAgBV,YAAY;GAC9B,KAAK,QAAQ;GAGb,IAAI,cAAc,KAAK;GAGvB,IAAI,KAAK,UAAU;IAEjB,MAAM,KAAK,SAAS,eAAe,KAAK,QAAQ;IAChD,IAAI,IAGF,IAAI,WAAW,IACb,cAAe,GAAW;SAE1B,cAAc,GAAG,eAAe,GAAG,aAAa;SAE7C;KACL,QAAQ,MAAM,cAAc,KAAK,SAAS,wBAAwB;KAClE,KAAK,QAAQ;KACb;IACF;GACF;GAEA,MAAM,eAAe,IAAI,iBAAiB,iBAAiB,OAAO;GAClE,aAAa,OAAO;GACpB,KAAK,cAAc,YAAY;GAE/B,IAAI,aAAa,QAAQ,MACvB,cAAc,aAAa;GAG7B,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,WAAW;IAC/C,MAAM,WAAW,IAAI,iBAAiB,iBAAiB,MAAM;IAC7D,SAAS,OAAO;IAChB,KAAK,cAAc,QAAQ;IAC3B,KAAKA,kBAAkB,iBAAiB;KACtC,KAAK,QAAQ;IACf,GAAG,KAAK,mBAAmB;GAC7B,SAAS,KAAK;IACZ,KAAK,QAAQ;IACb,QAAQ,MAAM,8BAA8B,GAAG;GACjD;EACF;EAvDE,KAAK,iBAAiB,SAAS,KAAKC,QAAQ;CAC9C;CAEA,uBAA6B;EAC3B,MAAM,qBAAqB;EAC3B,IAAI,KAAKD,iBACP,aAAa,KAAKA,eAAe;CAErC;CAEA;CA+CA,cAAiC;EAC/B,OAAO,IAAI;;;;;CAKb;;gBAEkC,iBAAiB;;AACrD;YA9FG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,yBAAA,WAAA,QAAA,KAAA,CAAA;YAYzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,yBAAA,WAAA,YAAA,KAAA,CAAA;YASjD,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAwB,CAAC,CAAA,GAAA,yBAAA,WAAA,uBAAA,KAAA,CAAA"}

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

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

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

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

package/dist/components/button-group/button-group.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './button-group.element.js';
-export { UUIButtonGroupElement as default } from './button-group.element.js';

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

@@ -1,11 +1,16 @@
-import { LitElement, html, css } from "lit";
-const _UUIButtonGroupElement = class _UUIButtonGroupElement extends LitElement {
-  render() {
-    return html`<slot></slot>`;
-  }
-};
-_UUIButtonGroupElement.styles = [
-  css`
+import { LitElement, css, html } from "lit";
+//#region src/components/button-group/button-group.element.ts
+/**
+*  Place <uui-button> elements in the slot. They will be nicely displayed.
+*  @element uui-button-group
+*  @slot - The slot for buttons. It supports `<uui-button>` elements out of the box.
+*/
+var UUIButtonGroupElement = class extends LitElement {
+	render() {
+		return html`<slot></slot>`;
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-flex;
         align-items: stretch;
@@ -35,10 +40,10 @@ _UUIButtonGroupElement.styles = [
       ::slotted(*:hover) {
         z-index: 1;
       }
-    `
-];
-let UUIButtonGroupElement = _UUIButtonGroupElement;
-export {
-  UUIButtonGroupElement
+    `];
+	}
 };
-//# sourceMappingURL=button-group.element.js.map
+//#endregion
+export { UUIButtonGroupElement };
+
+//# sourceMappingURL=button-group.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.element.js","sources":["../../../src/components/button-group/button-group.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Place <uui-button> elements in the slot. They will be nicely displayed.\n *  @element uui-button-group\n *  @slot - The slot for buttons. It supports `<uui-button>` elements out of the box.\n */\nexport class UUIButtonGroupElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: stretch;\n      }\n\n      ::slotted(*) {\n        --uui-button-border-radius: 0;\n        flex-grow: 1;\n      }\n\n      ::slotted([look='outline']:not(:first-child)) {\n        --uui-button-merge-border-left: 1;\n      }\n      ::slotted([look='placeholder']:not(:first-child)) {\n        --uui-button-merge-border-left: 1;\n      }\n\n      ::slotted(*:first-child) {\n        --uui-button-border-radius: var(--uui-border-radius-3) 0 0\n          var(--uui-border-radius-3);\n      }\n      ::slotted(*:last-child) {\n        --uui-button-border-radius: 0 var(--uui-border-radius-3)\n          var(--uui-border-radius-3) 0;\n      }\n\n      ::slotted(*:hover) {\n        z-index: 1;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAOO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EACpD,SAAS;AACP,WAAO;AAAA,EACT;AAmCF;AAjCE,uBAAyB,SAAS;AAAA,EAChC;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;AANG,IAAM,wBAAN;"}
+{"version":3,"file":"button-group.element.js","names":[],"sources":["../../../src/components/button-group/button-group.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\n\n/**\n *  Place <uui-button> elements in the slot. They will be nicely displayed.\n *  @element uui-button-group\n *  @slot - The slot for buttons. It supports `<uui-button>` elements out of the box.\n */\nexport class UUIButtonGroupElement extends LitElement {\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: stretch;\n      }\n\n      ::slotted(*) {\n        --uui-button-border-radius: 0;\n        flex-grow: 1;\n      }\n\n      ::slotted([look='outline']:not(:first-child)) {\n        --uui-button-merge-border-left: 1;\n      }\n      ::slotted([look='placeholder']:not(:first-child)) {\n        --uui-button-merge-border-left: 1;\n      }\n\n      ::slotted(*:first-child) {\n        --uui-button-border-radius: var(--uui-border-radius-3) 0 0\n          var(--uui-border-radius-3);\n      }\n      ::slotted(*:last-child) {\n        --uui-button-border-radius: 0 var(--uui-border-radius-3)\n          var(--uui-border-radius-3) 0;\n      }\n\n      ::slotted(*:hover) {\n        z-index: 1;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;AAOA,IAAa,wBAAb,cAA2C,WAAW;CACpD,SAAS;EACP,OAAO,IAAI;CACb;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BL;;AACF"}

package/dist/components/button-group/button-group.js

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

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

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

package/dist/components/button-inline-create/UUIButtonInlineCreateEvent.js

@@ -1,16 +1,18 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIButtonInlineCreateEvent = class _UUIButtonInlineCreateEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      composed: true,
-      ...eventInit
-    });
-  }
+//#region src/components/button-inline-create/UUIButtonInlineCreateEvent.ts
+var UUIButtonInlineCreateEvent = class extends UUIEvent {
+	static {
+		this.CLICK = "click";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			composed: true,
+			...eventInit
+		});
+	}
 };
-_UUIButtonInlineCreateEvent.CLICK = "click";
-let UUIButtonInlineCreateEvent = _UUIButtonInlineCreateEvent;
-export {
-  UUIButtonInlineCreateEvent
-};
-//# sourceMappingURL=UUIButtonInlineCreateEvent.js.map
+//#endregion
+export { UUIButtonInlineCreateEvent };
+
+//# sourceMappingURL=UUIButtonInlineCreateEvent.js.map

package/dist/components/button-inline-create/UUIButtonInlineCreateEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIButtonInlineCreateEvent.js","sources":["../../../src/components/button-inline-create/UUIButtonInlineCreateEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIButtonInlineCreateElement } from './button-inline-create.element.js';\n\nexport class UUIButtonInlineCreateEvent extends UUIEvent<\n  {},\n  UUIButtonInlineCreateElement\n> {\n  public static readonly CLICK: string = 'click';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      composed: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,8BAAN,MAAM,oCAAmC,SAG9C;AAAA,EAGA,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,4BAAuB,QAAgB;AAJlC,IAAM,6BAAN;"}
+{"version":3,"file":"UUIButtonInlineCreateEvent.js","names":[],"sources":["../../../src/components/button-inline-create/UUIButtonInlineCreateEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIButtonInlineCreateElement } from './button-inline-create.element.js';\n\nexport class UUIButtonInlineCreateEvent extends UUIEvent<\n  {},\n  UUIButtonInlineCreateElement\n> {\n  public static readonly CLICK: string = 'click';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      composed: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,6BAAb,cAAgD,SAG9C;;eACuC;;CAEvC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,UAAU;GACV,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/button-inline-create/button-inline-create.d.ts

@@ -6,4 +6,3 @@ declare global {
 }
 export * from './button-inline-create.element.js';
 export * from './UUIButtonInlineCreateEvent.js';
-export { UUIButtonInlineCreateElement as default } from './button-inline-create.element.js';

package/dist/components/button-inline-create/button-inline-create.element.js

@@ -1,56 +1,40 @@
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-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 __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _UUIButtonInlineCreateElement_instances, renderContent_fn, renderLink_fn, renderButton_fn;
-import { LitElement, html, css } from "lit";
-import { state, property } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from "../../internal/animations/uui-blink.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UUIButtonInlineCreateEvent } from "./UUIButtonInlineCreateEvent.js";
-import { UUIBlinkKeyframes, UUIBlinkAnimationValue } from "../../internal/animations/uui-blink.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 _UUIButtonInlineCreateElement = class _UUIButtonInlineCreateElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _UUIButtonInlineCreateElement_instances);
-    this._position = 0;
-    this.vertical = false;
-  }
-  _onMouseMove(e) {
-    this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;
-  }
-  _handleClick(e) {
-    e.preventDefault();
-    e.stopImmediatePropagation();
-    e.target?.blur?.();
-    this.dispatchEvent(
-      new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK)
-    );
-  }
-  render() {
-    return this.href ? __privateMethod(this, _UUIButtonInlineCreateElement_instances, renderLink_fn).call(this) : __privateMethod(this, _UUIButtonInlineCreateElement_instances, renderButton_fn).call(this);
-  }
-};
-_UUIButtonInlineCreateElement_instances = new WeakSet();
-renderContent_fn = function() {
-  return html`
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+//#region src/components/button-inline-create/button-inline-create.element.ts
+/**
+*  @element uui-button-inline-create
+*  @description - Special button for creating new elements
+*  @attr {Boolean} vertical - display vertical version of the button
+*  @fires click on user click
+*/
+var UUIButtonInlineCreateElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._position = 0;
+		this.vertical = false;
+	}
+	_onMouseMove(e) {
+		this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;
+	}
+	_handleClick(e) {
+		e.preventDefault();
+		e.stopImmediatePropagation();
+		e.target?.blur?.();
+		this.dispatchEvent(new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK));
+	}
+	#renderContent() {
+		return html`
       <div
         id="plus"
         style=${styleMap({
-    left: this.vertical ? "" : this._position + "px",
-    top: this.vertical ? this._position + "px" : ""
-  })}>
+			left: this.vertical ? "" : this._position + "px",
+			top: this.vertical ? this._position + "px" : ""
+		})}>
         <svg
           id="plus-icon"
           aria-hidden="true"
@@ -61,34 +45,34 @@ renderContent_fn = function() {
         </svg>
       </div>
     `;
-};
-renderLink_fn = function() {
-  return html`<a
+	}
+	#renderLink() {
+		return html`<a
       id="button-wrapper"
       @mousemove=${this._onMouseMove}
       href=${ifDefined(this.href)}
       target=${ifDefined(this.target || void 0)}
-      rel=${ifDefined(
-    this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0)
-  )}
+      rel=${ifDefined(this.rel || (this.target === "_blank" ? "noopener noreferrer" : void 0))}
       aria-label=${this.label ? this.label : "create new element"}>
-      ${__privateMethod(this, _UUIButtonInlineCreateElement_instances, renderContent_fn).call(this)}
+      ${this.#renderContent()}
     </a>`;
-};
-renderButton_fn = function() {
-  return html`
+	}
+	#renderButton() {
+		return html`
       <button
         id="button-wrapper"
         @mousemove=${this._onMouseMove}
         @click=${this._handleClick}
         aria-label=${this.label ? this.label : "create new element"}>
-        ${__privateMethod(this, _UUIButtonInlineCreateElement_instances, renderContent_fn).call(this)}
+        ${this.#renderContent()}
       </button>
     `;
-};
-_UUIButtonInlineCreateElement.styles = [
-  UUIBlinkKeyframes,
-  css`
+	}
+	render() {
+		return this.href ? this.#renderLink() : this.#renderButton();
+	}
+	static {
+		this.styles = [UUIBlinkKeyframes, css`
       :host {
         display: flex;
         position: relative;
@@ -245,28 +229,19 @@ _UUIButtonInlineCreateElement.styles = [
       #button-wrapper:active #plus {
         transform: scale(1.1);
       }
-    `
-];
-let UUIButtonInlineCreateElement = _UUIButtonInlineCreateElement;
-__decorateClass([
-  state()
-], UUIButtonInlineCreateElement.prototype, "_position");
-__decorateClass([
-  property({ type: String })
-], UUIButtonInlineCreateElement.prototype, "label");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIButtonInlineCreateElement.prototype, "vertical");
-__decorateClass([
-  property({ type: String })
-], UUIButtonInlineCreateElement.prototype, "href");
-__decorateClass([
-  property({ type: String })
-], UUIButtonInlineCreateElement.prototype, "target");
-__decorateClass([
-  property({ type: String })
-], UUIButtonInlineCreateElement.prototype, "rel");
-export {
-  UUIButtonInlineCreateElement
+    `];
+	}
 };
-//# sourceMappingURL=button-inline-create.element.js.map
+__decorate([state()], UUIButtonInlineCreateElement.prototype, "_position", void 0);
+__decorate([property({ type: String })], UUIButtonInlineCreateElement.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIButtonInlineCreateElement.prototype, "vertical", void 0);
+__decorate([property({ type: String })], UUIButtonInlineCreateElement.prototype, "href", void 0);
+__decorate([property({ type: String })], UUIButtonInlineCreateElement.prototype, "target", void 0);
+__decorate([property({ type: String })], UUIButtonInlineCreateElement.prototype, "rel", void 0);
+//#endregion
+export { UUIButtonInlineCreateElement };
+
+//# sourceMappingURL=button-inline-create.element.js.map

package/dist/components/button-inline-create/button-inline-create.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-inline-create.element.js","sources":["../../../src/components/button-inline-create/button-inline-create.element.ts"],"sourcesContent":["import {\n  UUIBlinkAnimationValue,\n  UUIBlinkKeyframes,\n} from '../../internal/animations/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIButtonInlineCreateEvent } from './UUIButtonInlineCreateEvent.js';\n\n/**\n *  @element uui-button-inline-create\n *  @description - Special button for creating new elements\n *  @attr {Boolean} vertical - display vertical version of the button\n *  @fires click on user click\n */\n\nexport class UUIButtonInlineCreateElement extends LitElement {\n  @state()\n  private _position = 0;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label?: string;\n\n  /**\n   * Place the button vertically\n   * @type {Boolean}\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * Set an href, this will turns the button into an 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  private _onMouseMove(e: MouseEvent) {\n    this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;\n  }\n\n  private _handleClick(e: MouseEvent) {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    // We do not want to focus the button after click.\n    (e.target as any)?.blur?.();\n\n    this.dispatchEvent(\n      new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK),\n    );\n  }\n\n  #renderContent() {\n    return html`\n      <div\n        id=\"plus\"\n        style=${styleMap({\n          left: this.vertical ? '' : this._position + 'px',\n          top: this.vertical ? this._position + 'px' : '',\n        })}>\n        <svg\n          id=\"plus-icon\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 512 512\">\n          <path\n            d=\"M420.592 214.291H296.104V89.804h-83.102v124.487H88.518v83.104h124.484v124.488h83.102V297.395h124.488z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  #renderLink() {\n    return html`<a\n      id=\"button-wrapper\"\n      @mousemove=${this._onMouseMove}\n      href=${ifDefined(this.href)}\n      target=${ifDefined(this.target || undefined)}\n      rel=${ifDefined(\n        this.rel ||\n          (this.target === '_blank' ? 'noopener noreferrer' : undefined),\n      )}\n      aria-label=${this.label ? this.label : 'create new element'}>\n      ${this.#renderContent()}\n    </a>`;\n  }\n\n  #renderButton() {\n    return html`\n      <button\n        id=\"button-wrapper\"\n        @mousemove=${this._onMouseMove}\n        @click=${this._handleClick}\n        aria-label=${this.label ? this.label : 'create new element'}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  render() {\n    return this.href ? this.#renderLink() : this.#renderButton();\n  }\n\n  static override readonly styles = [\n    UUIBlinkKeyframes,\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        z-index: 1;\n      }\n\n      :host(:not([vertical])) {\n        height: 20px;\n        width: 100%;\n        margin: -10px 0;\n      }\n\n      :host([vertical]) {\n        height: 100%;\n        width: 20px;\n        margin: 0 -10px;\n      }\n\n      #button-wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        position: absolute;\n        z-index: 1;\n        outline: 0;\n        transition: opacity 0.24s;\n        display: inline-flex;\n        width: 100%;\n        border: none;\n        height: 100%;\n        padding: 0;\n\n        text-decoration: none;\n        background: transparent;\n        color: currentColor;\n\n        cursor: pointer;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n\n        opacity: 0;\n      }\n\n      :host(:focus) #button-wrapper,\n      :host(:focus-within) #button-wrapper,\n      :host(:hover) #button-wrapper {\n        opacity: 1;\n      }\n\n      :host(:focus) #button-wrapper:before,\n      :host(:focus-within) #button-wrapper:before,\n      :host(:hover) #button-wrapper:before {\n        animation: ${UUIBlinkAnimationValue};\n        background-color: var(--uui-color-interactive-emphasis);\n        border-color: var(--uui-color-surface) !important;\n      }\n\n      #button-wrapper:before {\n        content: '';\n        position: absolute;\n        right: 0;\n        left: 0;\n        height: 2px;\n        background-color: transparent;\n        border-top: 1px solid transparent;\n        border-bottom: 1px solid transparent;\n        border-radius: 2px;\n        pointer-events: none;\n        transition:\n          background-color 720ms ease-out,\n          border-color 240ms;\n      }\n\n      :host(:not([vertical])) #button-wrapper:before {\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      :host([vertical]) #button-wrapper:before {\n        height: 100%;\n        width: 2px;\n        left: 50%;\n        transform: translateX(-50%);\n        border-top: none;\n        border-bottom: none;\n        border-left: 1px solid transparent;\n        border-right: 1px solid transparent;\n      }\n\n      :host(:not([vertical]):not(:hover)) #plus:not(:focus) {\n        left: calc(50% - 2px) !important;\n      }\n\n      :host([vertical]:not(:hover)) #plus:not(:focus) {\n        top: calc(50% - 2px) !important;\n      }\n\n      #plus {\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n        box-sizing: border-box;\n        width: 28px;\n        height: 28px;\n        border-radius: 3em;\n        font-size: 14px;\n        border: 2px solid var(--uui-color-interactive-emphasis);\n        color: var(--uui-color-interactive-emphasis);\n        background-color: var(--uui-color-surface);\n\n        opacity: 0;\n        transform: scale(0);\n        transition:\n          transform 240ms ease-in,\n          opacity 240ms,\n          left 100ms linear 150ms,\n          top 100ms linear 150ms;\n      }\n      :host(:focus) #plus,\n      :host(:focus-within) #plus,\n      :host(:hover) #plus {\n        opacity: 1;\n        transform: scale(1);\n        transition:\n          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 80ms,\n          box-shadow 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        box-shadow: 0 0 0 2px var(--uui-color-surface);\n      }\n\n      :host(:not([vertical])) #plus {\n        margin-left: -18px;\n      }\n\n      :host([vertical]) #plus {\n        left: -4px;\n        margin-top: -18px;\n      }\n\n      #button-wrapper:focus #plus {\n        /* TODO: implement focus outline system */\n        border: 2px solid var(--uui-color-focus);\n        color: var(--uui-color-focus);\n      }\n\n      #plus-icon {\n        width: 50%;\n        fill: currentColor;\n      }\n\n      #button-wrapper:active #plus {\n        transform: scale(1.1);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"button-inline-create.element.js","names":["#renderContent","#renderLink","#renderButton"],"sources":["../../../src/components/button-inline-create/button-inline-create.element.ts"],"sourcesContent":["import {\n  UUIBlinkAnimationValue,\n  UUIBlinkKeyframes,\n} from '../../internal/animations/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { UUIButtonInlineCreateEvent } from './UUIButtonInlineCreateEvent.js';\n\n/**\n *  @element uui-button-inline-create\n *  @description - Special button for creating new elements\n *  @attr {Boolean} vertical - display vertical version of the button\n *  @fires click on user click\n */\n\nexport class UUIButtonInlineCreateElement extends LitElement {\n  @state()\n  private _position = 0;\n\n  /**\n   * Label to be used for aria-label and eventually as visual label\n   * @type {string}\n   * @attr\n   */\n  @property({ type: String })\n  public label?: string;\n\n  /**\n   * Place the button vertically\n   * @type {Boolean}\n   * @attr\n   */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /**\n   * Set an href, this will turns the button into an 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  private _onMouseMove(e: MouseEvent) {\n    this._position = (this.vertical ? e.offsetY : e.offsetX) - 5;\n  }\n\n  private _handleClick(e: MouseEvent) {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    // We do not want to focus the button after click.\n    (e.target as any)?.blur?.();\n\n    this.dispatchEvent(\n      new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK),\n    );\n  }\n\n  #renderContent() {\n    return html`\n      <div\n        id=\"plus\"\n        style=${styleMap({\n          left: this.vertical ? '' : this._position + 'px',\n          top: this.vertical ? this._position + 'px' : '',\n        })}>\n        <svg\n          id=\"plus-icon\"\n          aria-hidden=\"true\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 512 512\">\n          <path\n            d=\"M420.592 214.291H296.104V89.804h-83.102v124.487H88.518v83.104h124.484v124.488h83.102V297.395h124.488z\" />\n        </svg>\n      </div>\n    `;\n  }\n\n  #renderLink() {\n    return html`<a\n      id=\"button-wrapper\"\n      @mousemove=${this._onMouseMove}\n      href=${ifDefined(this.href)}\n      target=${ifDefined(this.target || undefined)}\n      rel=${ifDefined(\n        this.rel ||\n          (this.target === '_blank' ? 'noopener noreferrer' : undefined),\n      )}\n      aria-label=${this.label ? this.label : 'create new element'}>\n      ${this.#renderContent()}\n    </a>`;\n  }\n\n  #renderButton() {\n    return html`\n      <button\n        id=\"button-wrapper\"\n        @mousemove=${this._onMouseMove}\n        @click=${this._handleClick}\n        aria-label=${this.label ? this.label : 'create new element'}>\n        ${this.#renderContent()}\n      </button>\n    `;\n  }\n\n  render() {\n    return this.href ? this.#renderLink() : this.#renderButton();\n  }\n\n  static override readonly styles = [\n    UUIBlinkKeyframes,\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        z-index: 1;\n      }\n\n      :host(:not([vertical])) {\n        height: 20px;\n        width: 100%;\n        margin: -10px 0;\n      }\n\n      :host([vertical]) {\n        height: 100%;\n        width: 20px;\n        margin: 0 -10px;\n      }\n\n      #button-wrapper {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        position: absolute;\n        z-index: 1;\n        outline: 0;\n        transition: opacity 0.24s;\n        display: inline-flex;\n        width: 100%;\n        border: none;\n        height: 100%;\n        padding: 0;\n\n        text-decoration: none;\n        background: transparent;\n        color: currentColor;\n\n        cursor: pointer;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n\n        opacity: 0;\n      }\n\n      :host(:focus) #button-wrapper,\n      :host(:focus-within) #button-wrapper,\n      :host(:hover) #button-wrapper {\n        opacity: 1;\n      }\n\n      :host(:focus) #button-wrapper:before,\n      :host(:focus-within) #button-wrapper:before,\n      :host(:hover) #button-wrapper:before {\n        animation: ${UUIBlinkAnimationValue};\n        background-color: var(--uui-color-interactive-emphasis);\n        border-color: var(--uui-color-surface) !important;\n      }\n\n      #button-wrapper:before {\n        content: '';\n        position: absolute;\n        right: 0;\n        left: 0;\n        height: 2px;\n        background-color: transparent;\n        border-top: 1px solid transparent;\n        border-bottom: 1px solid transparent;\n        border-radius: 2px;\n        pointer-events: none;\n        transition:\n          background-color 720ms ease-out,\n          border-color 240ms;\n      }\n\n      :host(:not([vertical])) #button-wrapper:before {\n        top: 50%;\n        transform: translateY(-50%);\n      }\n\n      :host([vertical]) #button-wrapper:before {\n        height: 100%;\n        width: 2px;\n        left: 50%;\n        transform: translateX(-50%);\n        border-top: none;\n        border-bottom: none;\n        border-left: 1px solid transparent;\n        border-right: 1px solid transparent;\n      }\n\n      :host(:not([vertical]):not(:hover)) #plus:not(:focus) {\n        left: calc(50% - 2px) !important;\n      }\n\n      :host([vertical]:not(:hover)) #plus:not(:focus) {\n        top: calc(50% - 2px) !important;\n      }\n\n      #plus {\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        pointer-events: none;\n        box-sizing: border-box;\n        width: 28px;\n        height: 28px;\n        border-radius: 3em;\n        font-size: 14px;\n        border: 2px solid var(--uui-color-interactive-emphasis);\n        color: var(--uui-color-interactive-emphasis);\n        background-color: var(--uui-color-surface);\n\n        opacity: 0;\n        transform: scale(0);\n        transition:\n          transform 240ms ease-in,\n          opacity 240ms,\n          left 100ms linear 150ms,\n          top 100ms linear 150ms;\n      }\n      :host(:focus) #plus,\n      :host(:focus-within) #plus,\n      :host(:hover) #plus {\n        opacity: 1;\n        transform: scale(1);\n        transition:\n          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 80ms,\n          box-shadow 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n        box-shadow: 0 0 0 2px var(--uui-color-surface);\n      }\n\n      :host(:not([vertical])) #plus {\n        margin-left: -18px;\n      }\n\n      :host([vertical]) #plus {\n        left: -4px;\n        margin-top: -18px;\n      }\n\n      #button-wrapper:focus #plus {\n        /* TODO: implement focus outline system */\n        border: 2px solid var(--uui-color-focus);\n        color: var(--uui-color-focus);\n      }\n\n      #plus-icon {\n        width: 50%;\n        fill: currentColor;\n      }\n\n      #button-wrapper:active #plus {\n        transform: scale(1.1);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,IAAa,+BAAb,cAAkD,WAAW;;;mBAEvC;kBAgBT;;CA6BX,aAAqB,GAAe;EAClC,KAAK,aAAa,KAAK,WAAW,EAAE,UAAU,EAAE,WAAW;CAC7D;CAEA,aAAqB,GAAe;EAClC,EAAE,eAAe;EACjB,EAAE,yBAAyB;EAG3B,EAAG,QAAgB,OAAO;EAE1B,KAAK,cACH,IAAI,2BAA2B,2BAA2B,KAAK,CACjE;CACF;CAEA,iBAAiB;EACf,OAAO,IAAI;;;gBAGC,SAAS;GACf,MAAM,KAAK,WAAW,KAAK,KAAK,YAAY;GAC5C,KAAK,KAAK,WAAW,KAAK,YAAY,OAAO;EAC/C,CAAC,EAAE;;;;;;;;;;;CAWT;CAEA,cAAc;EACZ,OAAO,IAAI;;mBAEI,KAAK,aAAa;aACxB,UAAU,KAAK,IAAI,EAAE;eACnB,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;YACvC,UACJ,KAAK,QACF,KAAK,WAAW,WAAW,wBAAwB,KAAA,EACxD,EAAE;mBACW,KAAK,QAAQ,KAAK,QAAQ,qBAAqB;QAC1D,KAAKA,eAAe,EAAE;;CAE5B;CAEA,gBAAgB;EACd,OAAO,IAAI;;;qBAGM,KAAK,aAAa;iBACtB,KAAK,aAAa;qBACd,KAAK,QAAQ,KAAK,QAAQ,qBAAqB;UAC1D,KAAKA,eAAe,EAAE;;;CAG9B;CAEA,SAAS;EACP,OAAO,KAAK,OAAO,KAAKC,YAAY,IAAI,KAAKC,cAAc;CAC7D;;gBAEkC,CAChC,mBACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAsDc,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwG1C;;AACF;YAlRG,MAAM,CAAA,GAAA,6BAAA,WAAA,aAAA,KAAA,CAAA;YAQN,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,6BAAA,WAAA,SAAA,KAAA,CAAA;YAQzB,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,6BAAA,WAAA,QAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,6BAAA,WAAA,UAAA,KAAA,CAAA;YASzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,6BAAA,WAAA,OAAA,KAAA,CAAA"}

package/dist/components/button-inline-create/button-inline-create.js

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

package/dist/components/button-inline-create/button-inline-create.js.map

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