@umbraco-ui/uui 2.0.0 → 2.0.1

package/dist/components/label/label.element.js

@@ -1,46 +1,41 @@
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.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 _UUILabelElement = class _UUILabelElement extends LitElement {
-  constructor() {
-    super();
-    this.disabled = false;
-    this.for = null;
-    this.required = false;
-    this.addEventListener("click", this._onClick);
-  }
-  _onClick() {
-    if (this.disabled) return;
-    const el = this.getForElement();
-    if (el) {
-      el.focus();
-      el.click();
-    }
-  }
-  getForElement() {
-    if (typeof this.for === "string") {
-      const scope = this.getRootNode();
-      return scope?.getElementById(this.for) || null;
-    }
-    return this.for || null;
-  }
-  render() {
-    return html`
+//#region src/components/label/label.element.ts
+/**
+* Label element for Custom Element
+* @element uui-label
+* @slot - for the label text.
+* @cssprop --uui-validation-color - Color property for the required asterisk.
+*/
+var UUILabelElement = class extends LitElement {
+	constructor() {
+		super();
+		this.disabled = false;
+		this.for = null;
+		this.required = false;
+		this.addEventListener("click", this._onClick);
+	}
+	_onClick() {
+		if (this.disabled) return;
+		const el = this.getForElement();
+		if (el) {
+			el.focus();
+			el.click();
+		}
+	}
+	getForElement() {
+		if (typeof this.for === "string") return this.getRootNode()?.getElementById(this.for) || null;
+		return this.for || null;
+	}
+	render() {
+		return html`
       <slot></slot>
       ${this.required ? html`<div id="required">*</div>` : ""}
     `;
-  }
-};
-_UUILabelElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         font-weight: 700;
       }
@@ -55,19 +50,22 @@ _UUILabelElement.styles = [
         color: var(--uui-color-danger);
         font-weight: 900;
       }
-    `
-];
-let UUILabelElement = _UUILabelElement;
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUILabelElement.prototype, "disabled");
-__decorateClass([
-  property({ reflect: true, attribute: true })
-], UUILabelElement.prototype, "for");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUILabelElement.prototype, "required");
-export {
-  UUILabelElement
+    `];
+	}
 };
-//# sourceMappingURL=label.element.js.map
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUILabelElement.prototype, "disabled", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: true
+})], UUILabelElement.prototype, "for", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUILabelElement.prototype, "required", void 0);
+//#endregion
+export { UUILabelElement };
+
+//# sourceMappingURL=label.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.element.js","sources":["../../../src/components/label/label.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * Label element for Custom Element\n * @element uui-label\n * @slot - for the label text.\n * @cssprop --uui-validation-color - Color property for the required asterisk.\n */\nexport class UUILabelElement extends LitElement {\n  /**\n   * Disables the label.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Define the related element to this label.\n   * @type {string | HTMLElement}\n   * @attr for\n   * @default null\n   */\n  @property({ reflect: true, attribute: true })\n  for: string | HTMLElement | null = null;\n\n  /**\n   * Highlight that the related element is required.\n   * @type {boolean}\n   * @attr required\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._onClick);\n  }\n\n  private _onClick() {\n    if (this.disabled) return;\n\n    const el = this.getForElement();\n    if (el) {\n      el.focus();\n      el.click();\n    }\n  }\n\n  protected getForElement(): HTMLElement | null {\n    if (typeof this.for === 'string') {\n      const scope = this.getRootNode();\n      return (scope as DocumentFragment)?.getElementById(this.for) || null;\n    }\n    return this.for || null;\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      ${this.required ? html`<div id=\"required\">*</div>` : ''}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        font-weight: 700;\n      }\n      :host([for]) {\n        cursor: pointer;\n      }\n      :host([disabled]) {\n        cursor: default;\n      }\n      #required {\n        display: inline;\n        color: var(--uui-color-danger);\n        font-weight: 900;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AASO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EA4B9C,cAAc;AACZ,UAAA;AArBF,SAAA,WAAW;AASX,SAAA,MAAmC;AASnC,SAAA,WAAW;AAIT,SAAK,iBAAiB,SAAS,KAAK,QAAQ;AAAA,EAC9C;AAAA,EAEQ,WAAW;AACjB,QAAI,KAAK,SAAU;AAEnB,UAAM,KAAK,KAAK,cAAA;AAChB,QAAI,IAAI;AACN,SAAG,MAAA;AACH,SAAG,MAAA;AAAA,IACL;AAAA,EACF;AAAA,EAEU,gBAAoC;AAC5C,QAAI,OAAO,KAAK,QAAQ,UAAU;AAChC,YAAM,QAAQ,KAAK,YAAA;AACnB,aAAQ,OAA4B,eAAe,KAAK,GAAG,KAAK;AAAA,IAClE;AACA,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA,QAEH,KAAK,WAAW,mCAAmC,EAAE;AAAA;AAAA,EAE3D;AAoBF;AAlBE,iBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3DG,IAAM,kBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAP/B,gBAQX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,MAAM,WAAW,MAAM;AAAA,GAhBjC,gBAiBX,WAAA,KAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,gBA0BX,WAAA,UAAA;"}
+{"version":3,"file":"label.element.js","names":[],"sources":["../../../src/components/label/label.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * Label element for Custom Element\n * @element uui-label\n * @slot - for the label text.\n * @cssprop --uui-validation-color - Color property for the required asterisk.\n */\nexport class UUILabelElement extends LitElement {\n  /**\n   * Disables the label.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Define the related element to this label.\n   * @type {string | HTMLElement}\n   * @attr for\n   * @default null\n   */\n  @property({ reflect: true, attribute: true })\n  for: string | HTMLElement | null = null;\n\n  /**\n   * Highlight that the related element is required.\n   * @type {boolean}\n   * @attr required\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this._onClick);\n  }\n\n  private _onClick() {\n    if (this.disabled) return;\n\n    const el = this.getForElement();\n    if (el) {\n      el.focus();\n      el.click();\n    }\n  }\n\n  protected getForElement(): HTMLElement | null {\n    if (typeof this.for === 'string') {\n      const scope = this.getRootNode();\n      return (scope as DocumentFragment)?.getElementById(this.for) || null;\n    }\n    return this.for || null;\n  }\n\n  render() {\n    return html`\n      <slot></slot>\n      ${this.required ? html`<div id=\"required\">*</div>` : ''}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        font-weight: 700;\n      }\n      :host([for]) {\n        cursor: pointer;\n      }\n      :host([disabled]) {\n        cursor: default;\n      }\n      #required {\n        display: inline;\n        color: var(--uui-color-danger);\n        font-weight: 900;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,kBAAb,cAAqC,WAAW;CA4B9C,cAAc;EACZ,MAAM;kBArBG;aASwB;kBASxB;EAIT,KAAK,iBAAiB,SAAS,KAAK,QAAQ;CAC9C;CAEA,WAAmB;EACjB,IAAI,KAAK,UAAU;EAEnB,MAAM,KAAK,KAAK,cAAc;EAC9B,IAAI,IAAI;GACN,GAAG,MAAM;GACT,GAAG,MAAM;EACX;CACF;CAEA,gBAA8C;EAC5C,IAAI,OAAO,KAAK,QAAQ,UAEtB,OADc,KAAK,YACX,CAAA,EAA4B,eAAe,KAAK,GAAG,KAAK;EAElE,OAAO,KAAK,OAAO;CACrB;CAEA,SAAS;EACP,OAAO,IAAI;;QAEP,KAAK,WAAW,IAAI,+BAA+B,GAAG;;CAE5D;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;KAgBL;;AACF;YArEG,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS;CAAE,SAAS;CAAM,WAAW;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,OAAA,KAAA,CAAA;YAS3C,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA"}

package/dist/components/label/label.js

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

package/dist/components/label/label.js.map

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

package/dist/components/loader/loader.d.ts

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

package/dist/components/loader/loader.element.js

@@ -1,15 +1,19 @@
-import { LitElement, html, css } from "lit";
-const _UUILoaderElement = class _UUILoaderElement extends LitElement {
-  render() {
-    return html`
+import { LitElement, css, html } from "lit";
+//#region src/components/loader/loader.element.ts
+/**
+*  A basic loader.
+*  @element uui-loader
+*/
+var UUILoaderElement = class extends LitElement {
+	render() {
+		return html`
       <div></div>
       <div></div>
       <div></div>
     `;
-  }
-};
-_UUILoaderElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         color: var(--uui-color-default);
       }
@@ -69,10 +73,10 @@ _UUILoaderElement.styles = [
           opacity: 0.25;
         }
       }
-    `
-];
-let UUILoaderElement = _UUILoaderElement;
-export {
-  UUILoaderElement
+    `];
+	}
 };
-//# sourceMappingURL=loader.element.js.map
+//#endregion
+export { UUILoaderElement };
+
+//# sourceMappingURL=loader.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"loader.element.js","sources":["../../../src/components/loader/loader.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/**\n *  A basic loader.\n *  @element uui-loader\n */\nexport class UUILoaderElement extends LitElement {\n  render() {\n    return html`\n      <div></div>\n      <div></div>\n      <div></div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        color: var(--uui-color-default);\n      }\n\n      div {\n        display: inline-block;\n        width: var(--uui-size-2);\n        height: var(--uui-size-2);\n        border: 1px solid currentColor;\n        box-shadow: 0 0 0 0.33px currentColor;\n        border-radius: 100%;\n        opacity: 0;\n        animation: loaderAnimation 1.2s infinite;\n        transition:\n          transform 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          filter 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      }\n\n      div:nth-child(1n) {\n        animation-delay: 0s;\n      }\n\n      div:nth-child(2n) {\n        animation-delay: 0.15s;\n      }\n\n      div:nth-child(3n) {\n        animation-delay: 0.3s;\n      }\n\n      @keyframes loaderAnimation {\n        0% {\n          transform: scale(0.33);\n          background-color: currentColor;\n          filter: blur(1.5px);\n          opacity: 0.25;\n        }\n        33% {\n          transform: scale(1);\n          background-color: transparent;\n          filter: blur(0px);\n\n          opacity: 1;\n        }\n        50% {\n          transform: scale(1);\n          background-color: transparent;\n          filter: blur(0px);\n\n          opacity: 0.9;\n        }\n        100% {\n          transform: scale(0.33);\n          background-color: currentColor;\n          filter: blur(1.5px);\n          opacity: 0.25;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";AAKO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAC/C,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AAiEF;AA/DE,kBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAVG,IAAM,mBAAN;"}
+{"version":3,"file":"loader.element.js","names":[],"sources":["../../../src/components/loader/loader.element.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\n/**\n *  A basic loader.\n *  @element uui-loader\n */\nexport class UUILoaderElement extends LitElement {\n  render() {\n    return html`\n      <div></div>\n      <div></div>\n      <div></div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        color: var(--uui-color-default);\n      }\n\n      div {\n        display: inline-block;\n        width: var(--uui-size-2);\n        height: var(--uui-size-2);\n        border: 1px solid currentColor;\n        box-shadow: 0 0 0 0.33px currentColor;\n        border-radius: 100%;\n        opacity: 0;\n        animation: loaderAnimation 1.2s infinite;\n        transition:\n          transform 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          opacity 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275),\n          filter 60ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n      }\n\n      div:nth-child(1n) {\n        animation-delay: 0s;\n      }\n\n      div:nth-child(2n) {\n        animation-delay: 0.15s;\n      }\n\n      div:nth-child(3n) {\n        animation-delay: 0.3s;\n      }\n\n      @keyframes loaderAnimation {\n        0% {\n          transform: scale(0.33);\n          background-color: currentColor;\n          filter: blur(1.5px);\n          opacity: 0.25;\n        }\n        33% {\n          transform: scale(1);\n          background-color: transparent;\n          filter: blur(0px);\n\n          opacity: 1;\n        }\n        50% {\n          transform: scale(1);\n          background-color: transparent;\n          filter: blur(0px);\n\n          opacity: 0.9;\n        }\n        100% {\n          transform: scale(0.33);\n          background-color: currentColor;\n          filter: blur(1.5px);\n          opacity: 0.25;\n        }\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;AAKA,IAAa,mBAAb,cAAsC,WAAW;CAC/C,SAAS;EACP,OAAO,IAAI;;;;;CAKb;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DL;;AACF"}

package/dist/components/loader/loader.js

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

package/dist/components/loader/loader.js.map

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

package/dist/components/loader-bar/loader-bar.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './loader-bar.element.js';
-export { UUILoaderBarElement as default } from './loader-bar.element.js';

package/dist/components/loader-bar/loader-bar.element.js

@@ -1,40 +1,48 @@
-import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { clamp } from "../../internal/utils/math.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = __getOwnPropDesc(target, key);
-  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 _UUILoaderBarElement = class _UUILoaderBarElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._progress = 0;
-    this._animationDuration = 1;
-  }
-  get progress() {
-    return this._progress;
-  }
-  set progress(newVal) {
-    const oldVal = this._progress;
-    this._progress = clamp(newVal, 0, 100);
-    this.requestUpdate("progress", oldVal);
-  }
-  get animationDuration() {
-    return this._animationDuration;
-  }
-  set animationDuration(newVal) {
-    const oldVal = this._animationDuration;
-    this._animationDuration = newVal >= 0 ? newVal : 1;
-    this.requestUpdate("animationDuration", oldVal);
-  }
-  render() {
-    return html`
+import { LitElement, css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/loader-bar/loader-bar.element.ts
+/**
+*  @element uui-loader-bar
+* @description - Linear loader for indicating loading.
+*/
+var UUILoaderBarElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._progress = 0;
+		this._animationDuration = 1;
+	}
+	/**
+	* Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation
+	* @type {number}
+	* @attr
+	* @default 0
+	*/
+	get progress() {
+		return this._progress;
+	}
+	set progress(newVal) {
+		const oldVal = this._progress;
+		this._progress = clamp(newVal, 0, 100);
+		this.requestUpdate("progress", oldVal);
+	}
+	/**
+	* Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.
+	* @type {number}
+	* @attr
+	* @default 1
+	*/
+	get animationDuration() {
+		return this._animationDuration;
+	}
+	set animationDuration(newVal) {
+		const oldVal = this._animationDuration;
+		this._animationDuration = newVal >= 0 ? newVal : 1;
+		this.requestUpdate("animationDuration", oldVal);
+	}
+	render() {
+		return html`
       ${this.progress ? html`<div
             id="bar"
             style="max-width: ${this.progress.toString()}%;"></div>` : ""}
@@ -44,10 +52,9 @@ const _UUILoaderBarElement = class _UUILoaderBarElement extends LitElement {
         style="animation-duration: ${this.animationDuration}s"></div>
       <div id="bar-background"></div>
     `;
-  }
-};
-_UUILoaderBarElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         display: block;
@@ -107,16 +114,12 @@ _UUILoaderBarElement.styles = [
           transform-origin: 175% 0%;
         }
       }
-    `
-];
-let UUILoaderBarElement = _UUILoaderBarElement;
-__decorateClass([
-  property({ type: Number })
-], UUILoaderBarElement.prototype, "progress");
-__decorateClass([
-  property({ type: Number })
-], UUILoaderBarElement.prototype, "animationDuration");
-export {
-  UUILoaderBarElement
+    `];
+	}
 };
-//# sourceMappingURL=loader-bar.element.js.map
+__decorate([property({ type: Number })], UUILoaderBarElement.prototype, "progress", null);
+__decorate([property({ type: Number })], UUILoaderBarElement.prototype, "animationDuration", null);
+//#endregion
+export { UUILoaderBarElement };
+
+//# sourceMappingURL=loader-bar.element.js.map

package/dist/components/loader-bar/loader-bar.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader-bar.element.js","sources":["../../../src/components/loader-bar/loader-bar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { clamp } from '../../internal/utils/index.js';\n\n/**\n *  @element uui-loader-bar\n * @description - Linear loader for indicating loading.\n */\nexport class UUILoaderBarElement extends LitElement {\n  private _progress = 0;\n\n  /**\n   * Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  get progress() {\n    return this._progress;\n  }\n\n  set progress(newVal) {\n    const oldVal = this._progress;\n    this._progress = clamp(newVal, 0, 100);\n    this.requestUpdate('progress', oldVal);\n  }\n\n  private _animationDuration = 1;\n  /**\n   * Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.\n   * @type {number}\n   * @attr\n   * @default 1\n   */\n  @property({ type: Number })\n  get animationDuration() {\n    return this._animationDuration;\n  }\n\n  set animationDuration(newVal) {\n    const oldVal = this._animationDuration;\n    this._animationDuration = newVal >= 0 ? newVal : 1;\n    this.requestUpdate('animationDuration', oldVal);\n  }\n\n  render() {\n    return html`\n      ${this.progress\n        ? html`<div\n            id=\"bar\"\n            style=\"max-width: ${this.progress.toString()}%;\"></div>`\n        : ''}\n      <div\n        id=\"bar-anim\"\n        class=${this.progress ? '' : 'animate'}\n        style=\"animation-duration: ${this.animationDuration}s\"></div>\n      <div id=\"bar-background\"></div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        width: 100%;\n        height: 2px;\n        border-radius: 1px;\n        overflow: hidden;\n        color: var(--uui-color-default);\n      }\n\n      #bar,\n      #bar-anim,\n      #bar-background {\n        position: absolute;\n        inset: 0; /* top, left, bottom and right = 0*/\n        height: 100%;\n      }\n\n      #bar-background,\n      #bar {\n        background: currentColor;\n      }\n\n      #bar {\n        transition: max-width 120ms ease;\n      }\n\n      #bar-background {\n        opacity: 0.3;\n      }\n\n      #bar-anim {\n        transform: scaleX(0.4);\n        animation: bar-loading 1s infinite linear;\n        background: linear-gradient(\n          -90deg,\n          white 0%,\n          white 25%,\n          transparent 100%\n        );\n      }\n\n      #bar-anim.animate {\n        background: linear-gradient(\n          -90deg,\n          currentColor 0%,\n          currentColor 25%,\n          transparent 100%\n        );\n      }\n\n      @keyframes bar-loading {\n        0% {\n          transform-origin: -175% 0%;\n        }\n        100% {\n          transform-origin: 175% 0%;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAQO,MAAM,uBAAN,MAAM,6BAA4B,WAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AACL,SAAQ,YAAY;AAmBpB,SAAQ,qBAAqB;AAAA,EAAA;AAAA,EAV7B,IAAI,WAAW;AACb,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,SAAS,QAAQ;AACnB,UAAM,SAAS,KAAK;AACpB,SAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;AACrC,SAAK,cAAc,YAAY,MAAM;AAAA,EACvC;AAAA,EAUA,IAAI,oBAAoB;AACtB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,kBAAkB,QAAQ;AAC5B,UAAM,SAAS,KAAK;AACpB,SAAK,qBAAqB,UAAU,IAAI,SAAS;AACjD,SAAK,cAAc,qBAAqB,MAAM;AAAA,EAChD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,WACH;AAAA;AAAA,gCAEsB,KAAK,SAAS,SAAA,CAAU,eAC9C,EAAE;AAAA;AAAA;AAAA,gBAGI,KAAK,WAAW,KAAK,SAAS;AAAA,qCACT,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGzD;AAiEF;AA/DE,qBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAtDG,IAAM,sBAAN;AAUD,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATf,oBAUP,WAAA,UAAA;AAkBA,gBAAA;AAAA,EADH,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Bf,oBA4BP,WAAA,mBAAA;"}
+{"version":3,"file":"loader-bar.element.js","names":[],"sources":["../../../src/components/loader-bar/loader-bar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { clamp } from '../../internal/utils/index.js';\n\n/**\n *  @element uui-loader-bar\n * @description - Linear loader for indicating loading.\n */\nexport class UUILoaderBarElement extends LitElement {\n  private _progress = 0;\n\n  /**\n   * Set this to a number between 0 and 100 to reflect the progress of some operation. When the value is left at 0 loader will looped animation\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  get progress() {\n    return this._progress;\n  }\n\n  set progress(newVal) {\n    const oldVal = this._progress;\n    this._progress = clamp(newVal, 0, 100);\n    this.requestUpdate('progress', oldVal);\n  }\n\n  private _animationDuration = 1;\n  /**\n   * Set this to a number greater then 0 to define the length of loader animation in seconds. Passing 0 or a negative number as a value will set it to 1 second. This is because negative values are illegal in the `animation-duration` css property, and value of 0 just stops the animation.\n   * @type {number}\n   * @attr\n   * @default 1\n   */\n  @property({ type: Number })\n  get animationDuration() {\n    return this._animationDuration;\n  }\n\n  set animationDuration(newVal) {\n    const oldVal = this._animationDuration;\n    this._animationDuration = newVal >= 0 ? newVal : 1;\n    this.requestUpdate('animationDuration', oldVal);\n  }\n\n  render() {\n    return html`\n      ${this.progress\n        ? html`<div\n            id=\"bar\"\n            style=\"max-width: ${this.progress.toString()}%;\"></div>`\n        : ''}\n      <div\n        id=\"bar-anim\"\n        class=${this.progress ? '' : 'animate'}\n        style=\"animation-duration: ${this.animationDuration}s\"></div>\n      <div id=\"bar-background\"></div>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        display: block;\n        width: 100%;\n        height: 2px;\n        border-radius: 1px;\n        overflow: hidden;\n        color: var(--uui-color-default);\n      }\n\n      #bar,\n      #bar-anim,\n      #bar-background {\n        position: absolute;\n        inset: 0; /* top, left, bottom and right = 0*/\n        height: 100%;\n      }\n\n      #bar-background,\n      #bar {\n        background: currentColor;\n      }\n\n      #bar {\n        transition: max-width 120ms ease;\n      }\n\n      #bar-background {\n        opacity: 0.3;\n      }\n\n      #bar-anim {\n        transform: scaleX(0.4);\n        animation: bar-loading 1s infinite linear;\n        background: linear-gradient(\n          -90deg,\n          white 0%,\n          white 25%,\n          transparent 100%\n        );\n      }\n\n      #bar-anim.animate {\n        background: linear-gradient(\n          -90deg,\n          currentColor 0%,\n          currentColor 25%,\n          transparent 100%\n        );\n      }\n\n      @keyframes bar-loading {\n        0% {\n          transform-origin: -175% 0%;\n        }\n        100% {\n          transform-origin: 175% 0%;\n        }\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;AAQA,IAAa,sBAAb,cAAyC,WAAW;;;mBAC9B;4BAmBS;;;;;;;;CAX7B,IACI,WAAW;EACb,OAAO,KAAK;CACd;CAEA,IAAI,SAAS,QAAQ;EACnB,MAAM,SAAS,KAAK;EACpB,KAAK,YAAY,MAAM,QAAQ,GAAG,GAAG;EACrC,KAAK,cAAc,YAAY,MAAM;CACvC;;;;;;;CASA,IACI,oBAAoB;EACtB,OAAO,KAAK;CACd;CAEA,IAAI,kBAAkB,QAAQ;EAC5B,MAAM,SAAS,KAAK;EACpB,KAAK,qBAAqB,UAAU,IAAI,SAAS;EACjD,KAAK,cAAc,qBAAqB,MAAM;CAChD;CAEA,SAAS;EACP,OAAO,IAAI;QACP,KAAK,WACH,IAAI;;gCAEkB,KAAK,SAAS,SAAS,EAAE,cAC/C,GAAG;;;gBAGG,KAAK,WAAW,KAAK,UAAU;qCACV,KAAK,kBAAkB;;;CAG1D;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6DL;;AACF;YA3GG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,YAAA,IAAA;YAkBzB,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,oBAAA,WAAA,qBAAA,IAAA"}

package/dist/components/loader-bar/loader-bar.js

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

package/dist/components/loader-bar/loader-bar.js.map

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

package/dist/components/loader-circle/loader-circle.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './loader-circle.element.js';
-export { UUILoaderCircleElement as default } from './loader-circle.element.js';

package/dist/components/loader-circle/loader-circle.element.js

@@ -1,48 +1,42 @@
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.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 _UUILoaderCircleElement = class _UUILoaderCircleElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.progress = 0;
-    this.showProgress = false;
-    this._resizeObserver = new ResizeObserver(() => this.onResize());
-    this._isLarge = false;
-  }
-  _circleStyle() {
-    if (this.progress) {
-      return { strokeDasharray: `${this.progress} 100` };
-    } else {
-      return { strokeDasharray: "100 100" };
-    }
-  }
-  firstUpdated() {
-    this._resizeObserver.observe(this);
-  }
-  disconnectedCallback() {
-    this._resizeObserver.disconnect();
-  }
-  onResize() {
-    const newIsLarge = this.clientHeight >= 30;
-    if (this._isLarge != newIsLarge) {
-      this._isLarge = newIsLarge;
-      this.requestUpdate();
-    }
-  }
-  renderProgress() {
-    return this._isLarge && this.progress && this.showProgress ? html`<span id="progress-display">${this.progress}</span>` : "";
-  }
-  render() {
-    return html`
+//#region src/components/loader-circle/loader-circle.element.ts
+/**
+*  @element uui-loader-circle
+* @description - Circular loader for indicating loading. You can put in in a button ;)
+*/
+var UUILoaderCircleElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.progress = 0;
+		this.showProgress = false;
+		this._resizeObserver = new ResizeObserver(() => this.onResize());
+		this._isLarge = false;
+	}
+	_circleStyle() {
+		if (this.progress) return { strokeDasharray: `${this.progress} 100` };
+		else return { strokeDasharray: "100 100" };
+	}
+	firstUpdated() {
+		this._resizeObserver.observe(this);
+	}
+	disconnectedCallback() {
+		this._resizeObserver.disconnect();
+	}
+	onResize() {
+		const newIsLarge = this.clientHeight >= 30;
+		if (this._isLarge != newIsLarge) {
+			this._isLarge = newIsLarge;
+			this.requestUpdate();
+		}
+	}
+	renderProgress() {
+		return this._isLarge && this.progress && this.showProgress ? html`<span id="progress-display">${this.progress}</span>` : "";
+	}
+	render() {
+		return html`
       <svg
         id="spinner"
         class=${this.progress ? "" : "animate"}
@@ -60,10 +54,9 @@ const _UUILoaderCircleElement = class _UUILoaderCircleElement extends LitElement
       </svg>
       ${this.renderProgress()}
     `;
-  }
-};
-_UUILoaderCircleElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         vertical-align: middle;
         line-height: 0;
@@ -148,16 +141,16 @@ _UUILoaderCircleElement.styles = [
         /* Center the text */
         padding-top: 0.09em;
       }
-    `
-];
-let UUILoaderCircleElement = _UUILoaderCircleElement;
-__decorateClass([
-  property({ type: Number })
-], UUILoaderCircleElement.prototype, "progress");
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "show-progress" })
-], UUILoaderCircleElement.prototype, "showProgress");
-export {
-  UUILoaderCircleElement
+    `];
+	}
 };
-//# sourceMappingURL=loader-circle.element.js.map
+__decorate([property({ type: Number })], UUILoaderCircleElement.prototype, "progress", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-progress"
+})], UUILoaderCircleElement.prototype, "showProgress", void 0);
+//#endregion
+export { UUILoaderCircleElement };
+
+//# sourceMappingURL=loader-circle.element.js.map

package/dist/components/loader-circle/loader-circle.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader-circle.element.js","sources":["../../../src/components/loader-circle/loader-circle.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\n/**\n *  @element uui-loader-circle\n * @description - Circular loader for indicating loading. You can put in in a button ;)\n */\nexport class UUILoaderCircleElement extends LitElement {\n  private _circleStyle() {\n    if (this.progress) {\n      return { strokeDasharray: `${this.progress} 100` };\n    } else {\n      return { strokeDasharray: '100 100' };\n    }\n  }\n\n  /**\n   * Sets the progress that loader shows\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  progress = 0;\n\n  /**\n   * If true then element displays progress number at bigger sizes\n   * @type {boolean}\n   * @attr show-progress\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-progress' })\n  showProgress = false;\n\n  private readonly _resizeObserver = new ResizeObserver(() => this.onResize());\n  private _isLarge = false;\n\n  firstUpdated() {\n    this._resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    this._resizeObserver.disconnect();\n  }\n\n  onResize() {\n    const newIsLarge = this.clientHeight >= 30;\n\n    if (this._isLarge != newIsLarge) {\n      this._isLarge = newIsLarge;\n      this.requestUpdate();\n    }\n  }\n\n  protected renderProgress() {\n    return this._isLarge && this.progress && this.showProgress\n      ? html`<span id=\"progress-display\">${this.progress}</span>`\n      : '';\n  }\n\n  render() {\n    return html`\n      <svg\n        id=\"spinner\"\n        class=${this.progress ? '' : 'animate'}\n        viewBox=\"0 0 40 40\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle id=\"bg\" cx=\"50%\" cy=\"50%\" r=\"16\" />\n        <g>\n          <circle\n            id=\"circle\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r=\"16\"\n            style=${styleMap(this._circleStyle())} />\n        </g>\n      </svg>\n      ${this.renderProgress()}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        vertical-align: middle;\n        line-height: 0;\n        overflow: hidden;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        width: 1em;\n        height: 1em;\n        color: var(--uui-color-default);\n      }\n\n      #spinner {\n        width: 100%;\n        height: 100%;\n      }\n      #spinner g {\n        transform-origin: 50% 50%;\n        animation: 18s linear infinite spinner-animation;\n      }\n      #spinner.animate g {\n        animation: 800ms linear infinite spinner-animation;\n      }\n\n      @keyframes spinner-animation {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      #spinner.animate #circle {\n        animation: 1400ms ease-in infinite circle-animation;\n        /** ease-in */\n      }\n\n      @keyframes circle-animation {\n        0% {\n          stroke-dashoffset: -55;\n        }\n        38% {\n          stroke-dashoffset: -88;\n        }\n        100% {\n          stroke-dashoffset: -55;\n        }\n      }\n\n      svg circle {\n        fill: transparent;\n        stroke: currentColor;\n        stroke-width: 4px;\n      }\n\n      #bg {\n        opacity: 0.5;\n      }\n\n      #circle {\n        stroke-linecap: round;\n        stroke-dasharray: 0 0;\n\n        transform-origin: 50% 50%;\n        transform: rotate(-90deg);\n        transition: stroke-dasharray 120ms ease;\n      }\n\n      #progress-display {\n        position: absolute;\n        left: 0;\n        top: 50%;\n        right: 0;\n        stroke: currentColor;\n        transform: translateY(-50%);\n        font-size: 0.3em;\n        font-weight: 700;\n        text-align: center;\n\n        /* Center the text */\n        padding-top: 0.09em;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAQO,MAAM,0BAAN,MAAM,gCAA+B,WAAW;AAAA,EAAhD,cAAA;AAAA,UAAA,GAAA,SAAA;AAgBL,SAAA,WAAW;AASX,SAAA,eAAe;AAEf,SAAiB,kBAAkB,IAAI,eAAe,MAAM,KAAK,UAAU;AAC3E,SAAQ,WAAW;AAAA,EAAA;AAAA,EA3BX,eAAe;AACrB,QAAI,KAAK,UAAU;AACjB,aAAO,EAAE,iBAAiB,GAAG,KAAK,QAAQ,OAAA;AAAA,IAC5C,OAAO;AACL,aAAO,EAAE,iBAAiB,UAAA;AAAA,IAC5B;AAAA,EACF;AAAA,EAuBA,eAAe;AACb,SAAK,gBAAgB,QAAQ,IAAI;AAAA,EACnC;AAAA,EAEA,uBAAuB;AACrB,SAAK,gBAAgB,WAAA;AAAA,EACvB;AAAA,EAEA,WAAW;AACT,UAAM,aAAa,KAAK,gBAAgB;AAExC,QAAI,KAAK,YAAY,YAAY;AAC/B,WAAK,WAAW;AAChB,WAAK,cAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEU,iBAAiB;AACzB,WAAO,KAAK,YAAY,KAAK,YAAY,KAAK,eAC1C,mCAAmC,KAAK,QAAQ,YAChD;AAAA,EACN;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,gBAGK,KAAK,WAAW,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAU1B,SAAS,KAAK,aAAA,CAAc,CAAC;AAAA;AAAA;AAAA,QAGzC,KAAK,gBAAgB;AAAA;AAAA,EAE3B;AA0FF;AAxFE,wBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3EG,IAAM,yBAAN;AAgBL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAff,uBAgBX,WAAA,UAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,iBAAiB;AAAA,GAxB3D,uBAyBX,WAAA,cAAA;"}
+{"version":3,"file":"loader-circle.element.js","names":[],"sources":["../../../src/components/loader-circle/loader-circle.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\n/**\n *  @element uui-loader-circle\n * @description - Circular loader for indicating loading. You can put in in a button ;)\n */\nexport class UUILoaderCircleElement extends LitElement {\n  private _circleStyle() {\n    if (this.progress) {\n      return { strokeDasharray: `${this.progress} 100` };\n    } else {\n      return { strokeDasharray: '100 100' };\n    }\n  }\n\n  /**\n   * Sets the progress that loader shows\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number })\n  progress = 0;\n\n  /**\n   * If true then element displays progress number at bigger sizes\n   * @type {boolean}\n   * @attr show-progress\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-progress' })\n  showProgress = false;\n\n  private readonly _resizeObserver = new ResizeObserver(() => this.onResize());\n  private _isLarge = false;\n\n  firstUpdated() {\n    this._resizeObserver.observe(this);\n  }\n\n  disconnectedCallback() {\n    this._resizeObserver.disconnect();\n  }\n\n  onResize() {\n    const newIsLarge = this.clientHeight >= 30;\n\n    if (this._isLarge != newIsLarge) {\n      this._isLarge = newIsLarge;\n      this.requestUpdate();\n    }\n  }\n\n  protected renderProgress() {\n    return this._isLarge && this.progress && this.showProgress\n      ? html`<span id=\"progress-display\">${this.progress}</span>`\n      : '';\n  }\n\n  render() {\n    return html`\n      <svg\n        id=\"spinner\"\n        class=${this.progress ? '' : 'animate'}\n        viewBox=\"0 0 40 40\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <circle id=\"bg\" cx=\"50%\" cy=\"50%\" r=\"16\" />\n        <g>\n          <circle\n            id=\"circle\"\n            cx=\"50%\"\n            cy=\"50%\"\n            r=\"16\"\n            style=${styleMap(this._circleStyle())} />\n        </g>\n      </svg>\n      ${this.renderProgress()}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        vertical-align: middle;\n        line-height: 0;\n        overflow: hidden;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        width: 1em;\n        height: 1em;\n        color: var(--uui-color-default);\n      }\n\n      #spinner {\n        width: 100%;\n        height: 100%;\n      }\n      #spinner g {\n        transform-origin: 50% 50%;\n        animation: 18s linear infinite spinner-animation;\n      }\n      #spinner.animate g {\n        animation: 800ms linear infinite spinner-animation;\n      }\n\n      @keyframes spinner-animation {\n        0% {\n          transform: rotate(0deg);\n        }\n        100% {\n          transform: rotate(360deg);\n        }\n      }\n\n      #spinner.animate #circle {\n        animation: 1400ms ease-in infinite circle-animation;\n        /** ease-in */\n      }\n\n      @keyframes circle-animation {\n        0% {\n          stroke-dashoffset: -55;\n        }\n        38% {\n          stroke-dashoffset: -88;\n        }\n        100% {\n          stroke-dashoffset: -55;\n        }\n      }\n\n      svg circle {\n        fill: transparent;\n        stroke: currentColor;\n        stroke-width: 4px;\n      }\n\n      #bg {\n        opacity: 0.5;\n      }\n\n      #circle {\n        stroke-linecap: round;\n        stroke-dasharray: 0 0;\n\n        transform-origin: 50% 50%;\n        transform: rotate(-90deg);\n        transition: stroke-dasharray 120ms ease;\n      }\n\n      #progress-display {\n        position: absolute;\n        left: 0;\n        top: 50%;\n        right: 0;\n        stroke: currentColor;\n        transform: translateY(-50%);\n        font-size: 0.3em;\n        font-weight: 700;\n        text-align: center;\n\n        /* Center the text */\n        padding-top: 0.09em;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;AAQA,IAAa,yBAAb,cAA4C,WAAW;;;kBAgB1C;sBASI;yBAEoB,IAAI,qBAAqB,KAAK,SAAS,CAAC;kBACxD;;CA3BnB,eAAuB;EACrB,IAAI,KAAK,UACP,OAAO,EAAE,iBAAiB,GAAG,KAAK,SAAS,MAAM;OAEjD,OAAO,EAAE,iBAAiB,UAAU;CAExC;CAuBA,eAAe;EACb,KAAK,gBAAgB,QAAQ,IAAI;CACnC;CAEA,uBAAuB;EACrB,KAAK,gBAAgB,WAAW;CAClC;CAEA,WAAW;EACT,MAAM,aAAa,KAAK,gBAAgB;EAExC,IAAI,KAAK,YAAY,YAAY;GAC/B,KAAK,WAAW;GAChB,KAAK,cAAc;EACrB;CACF;CAEA,iBAA2B;EACzB,OAAO,KAAK,YAAY,KAAK,YAAY,KAAK,eAC1C,IAAI,+BAA+B,KAAK,SAAS,WACjD;CACN;CAEA,SAAS;EACP,OAAO,IAAI;;;gBAGC,KAAK,WAAW,KAAK,UAAU;;;;;;;;;;oBAU3B,SAAS,KAAK,aAAa,CAAC,EAAE;;;QAG1C,KAAK,eAAe,EAAE;;CAE5B;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsFL;;AACF;YAnJG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,uBAAA,WAAA,YAAA,KAAA,CAAA;YASzB,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAgB,CAAC,CAAA,GAAA,uBAAA,WAAA,gBAAA,KAAA,CAAA"}

package/dist/components/loader-circle/loader-circle.js

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

package/dist/components/loader-circle/loader-circle.js.map

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