@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.0

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

@@ -0,0 +1,100 @@
+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 "../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`
+      <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
+};
+//# sourceMappingURL=button-copy-text.element.js.map

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

@@ -0,0 +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;"}

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { UUIButtonGroupElement } from './button-group.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-button-group': UUIButtonGroupElement;
+    }
+}
+export * from './button-group.element.js';
+export { UUIButtonGroupElement as default } from './button-group.element.js';

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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit';
+/**
+ *  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.
+ */
+export declare class UUIButtonGroupElement extends LitElement {
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from "lit";
+const _UUIButtonGroupElement = class _UUIButtonGroupElement extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+_UUIButtonGroupElement.styles = [
+  css`
+      :host {
+        display: inline-flex;
+        align-items: stretch;
+      }
+
+      ::slotted(*) {
+        --uui-button-border-radius: 0;
+        flex-grow: 1;
+      }
+
+      ::slotted([look='outline']:not(:first-child)) {
+        --uui-button-merge-border-left: 1;
+      }
+      ::slotted([look='placeholder']:not(:first-child)) {
+        --uui-button-merge-border-left: 1;
+      }
+
+      ::slotted(*:first-child) {
+        --uui-button-border-radius: var(--uui-border-radius-3) 0 0
+          var(--uui-border-radius-3);
+      }
+      ::slotted(*:last-child) {
+        --uui-button-border-radius: 0 var(--uui-border-radius-3)
+          var(--uui-border-radius-3) 0;
+      }
+
+      ::slotted(*:hover) {
+        z-index: 1;
+      }
+    `
+];
+let UUIButtonGroupElement = _UUIButtonGroupElement;
+export {
+  UUIButtonGroupElement
+};
+//# sourceMappingURL=button-group.element.js.map

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

@@ -0,0 +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;"}

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

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

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,6 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUIButtonInlineCreateElement } from './button-inline-create.element.js';
+export declare class UUIButtonInlineCreateEvent extends UUIEvent<{}, UUIButtonInlineCreateElement> {
+    static readonly CLICK: string;
+    constructor(evName: string, eventInit?: any);
+}

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

@@ -0,0 +1,16 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUIButtonInlineCreateEvent = class _UUIButtonInlineCreateEvent extends UUIEvent {
+  constructor(evName, eventInit = {}) {
+    super(evName, {
+      bubbles: true,
+      composed: true,
+      ...eventInit
+    });
+  }
+};
+_UUIButtonInlineCreateEvent.CLICK = "click";
+let UUIButtonInlineCreateEvent = _UUIButtonInlineCreateEvent;
+export {
+  UUIButtonInlineCreateEvent
+};
+//# sourceMappingURL=UUIButtonInlineCreateEvent.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,9 @@
+import { UUIButtonInlineCreateElement } from './button-inline-create.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-button-inline-create': UUIButtonInlineCreateElement;
+    }
+}
+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.d.ts

@@ -0,0 +1,48 @@
+import { LitElement } from 'lit';
+/**
+ *  @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
+ */
+export declare class UUIButtonInlineCreateElement extends LitElement {
+    #private;
+    private _position;
+    /**
+     * Label to be used for aria-label and eventually as visual label
+     * @type {string}
+     * @attr
+     */
+    label?: string;
+    /**
+     * Place the button vertically
+     * @type {Boolean}
+     * @attr
+     */
+    vertical: boolean;
+    /**
+     * Set an href, this will turns the button into an anchor tag.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    href?: string;
+    /**
+     * Set an anchor tag target, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Set the rel attribute for an anchor tag, only used when using href.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    rel?: string;
+    private _onMouseMove;
+    private _handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

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

@@ -0,0 +1,272 @@
+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 { 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`
+      <div
+        id="plus"
+        style=${styleMap({
+    left: this.vertical ? "" : this._position + "px",
+    top: this.vertical ? this._position + "px" : ""
+  })}>
+        <svg
+          id="plus-icon"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512">
+          <path
+            d="M420.592 214.291H296.104V89.804h-83.102v124.487H88.518v83.104h124.484v124.488h83.102V297.395h124.488z" />
+        </svg>
+      </div>
+    `;
+};
+renderLink_fn = function() {
+  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)
+  )}
+      aria-label=${this.label ? this.label : "create new element"}>
+      ${__privateMethod(this, _UUIButtonInlineCreateElement_instances, renderContent_fn).call(this)}
+    </a>`;
+};
+renderButton_fn = function() {
+  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)}
+      </button>
+    `;
+};
+_UUIButtonInlineCreateElement.styles = [
+  UUIBlinkKeyframes,
+  css`
+      :host {
+        display: flex;
+        position: relative;
+        z-index: 1;
+      }
+
+      :host(:not([vertical])) {
+        height: 20px;
+        width: 100%;
+        margin: -10px 0;
+      }
+
+      :host([vertical]) {
+        height: 100%;
+        width: 20px;
+        margin: 0 -10px;
+      }
+
+      #button-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        position: absolute;
+        z-index: 1;
+        outline: 0;
+        transition: opacity 0.24s;
+        display: inline-flex;
+        width: 100%;
+        border: none;
+        height: 100%;
+        padding: 0;
+
+        text-decoration: none;
+        background: transparent;
+        color: currentColor;
+
+        cursor: pointer;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+
+        opacity: 0;
+      }
+
+      :host(:focus) #button-wrapper,
+      :host(:focus-within) #button-wrapper,
+      :host(:hover) #button-wrapper {
+        opacity: 1;
+      }
+
+      :host(:focus) #button-wrapper:before,
+      :host(:focus-within) #button-wrapper:before,
+      :host(:hover) #button-wrapper:before {
+        animation: ${UUIBlinkAnimationValue};
+        background-color: var(--uui-color-interactive-emphasis);
+        border-color: var(--uui-color-surface) !important;
+      }
+
+      #button-wrapper:before {
+        content: '';
+        position: absolute;
+        right: 0;
+        left: 0;
+        height: 2px;
+        background-color: transparent;
+        border-top: 1px solid transparent;
+        border-bottom: 1px solid transparent;
+        border-radius: 2px;
+        pointer-events: none;
+        transition:
+          background-color 720ms ease-out,
+          border-color 240ms;
+      }
+
+      :host(:not([vertical])) #button-wrapper:before {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+
+      :host([vertical]) #button-wrapper:before {
+        height: 100%;
+        width: 2px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-top: none;
+        border-bottom: none;
+        border-left: 1px solid transparent;
+        border-right: 1px solid transparent;
+      }
+
+      :host(:not([vertical]):not(:hover)) #plus:not(:focus) {
+        left: calc(50% - 2px) !important;
+      }
+
+      :host([vertical]:not(:hover)) #plus:not(:focus) {
+        top: calc(50% - 2px) !important;
+      }
+
+      #plus {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: none;
+        box-sizing: border-box;
+        width: 28px;
+        height: 28px;
+        border-radius: 3em;
+        font-size: 14px;
+        border: 2px solid var(--uui-color-interactive-emphasis);
+        color: var(--uui-color-interactive-emphasis);
+        background-color: var(--uui-color-surface);
+
+        opacity: 0;
+        transform: scale(0);
+        transition:
+          transform 240ms ease-in,
+          opacity 240ms,
+          left 100ms linear 150ms,
+          top 100ms linear 150ms;
+      }
+      :host(:focus) #plus,
+      :host(:focus-within) #plus,
+      :host(:hover) #plus {
+        opacity: 1;
+        transform: scale(1);
+        transition:
+          transform 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+          opacity 80ms,
+          box-shadow 240ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        box-shadow: 0 0 0 2px var(--uui-color-surface);
+      }
+
+      :host(:not([vertical])) #plus {
+        margin-left: -18px;
+      }
+
+      :host([vertical]) #plus {
+        left: -4px;
+        margin-top: -18px;
+      }
+
+      #button-wrapper:focus #plus {
+        /* TODO: implement focus outline system */
+        border: 2px solid var(--uui-color-focus);
+        color: var(--uui-color-focus);
+      }
+
+      #plus-icon {
+        width: 50%;
+        fill: currentColor;
+      }
+
+      #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

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

@@ -0,0 +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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"}

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

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

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

@@ -0,0 +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;"}

package/dist/components/card/UUICardEvent.d.ts

@@ -0,0 +1,5 @@
+import { UUIEvent } from '../../internal/events/index.js';
+import type { UUICardElement } from './card.element.js';
+export declare class UUICardEvent extends UUIEvent<{}, UUICardElement> {
+    static readonly OPEN = "open";
+}

package/dist/components/card/UUICardEvent.js

@@ -0,0 +1,9 @@
+import { UUIEvent } from "../../internal/events/UUIEvent.js";
+const _UUICardEvent = class _UUICardEvent extends UUIEvent {
+};
+_UUICardEvent.OPEN = "open";
+let UUICardEvent = _UUICardEvent;
+export {
+  UUICardEvent
+};
+//# sourceMappingURL=UUICardEvent.js.map

package/dist/components/card/UUICardEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UUICardEvent.js","sources":["../../../src/components/card/UUICardEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUICardElement } from './card.element.js';\n\nexport class UUICardEvent extends UUIEvent<{}, UUICardElement> {\n  public static readonly OPEN = 'open';\n}\n"],"names":[],"mappings":";AAGO,MAAM,gBAAN,MAAM,sBAAqB,SAA6B;AAE/D;AADE,cAAuB,OAAO;AADzB,IAAM,eAAN;"}

package/dist/components/card/card.d.ts

@@ -0,0 +1,9 @@
+import { UUICardElement } from './card.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-card': UUICardElement;
+    }
+}
+export * from './card.element.js';
+export * from './UUICardEvent.js';
+export { UUICardElement as default } from './card.element.js';