@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1,55 +1,48 @@
-import { LitElement, html, css } from "lit";
-import { queryAssignedElements, state, 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 _UUIAvatarGroupElement = class _UUIAvatarGroupElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this._avatarArray = [];
-    this.limit = 0;
-  }
-  firstUpdated() {
-    this._setAvatarArray();
-  }
-  _onSlotChange() {
-    this._setAvatarArray();
-    this._updateAvatarVisibility();
-  }
-  _setAvatarArray() {
-    this._avatarArray = this._avatarNodes ?? [];
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("limit")) {
-      this._updateAvatarVisibility();
-    }
-  }
-  _updateAvatarVisibility() {
-    this._avatarArray.forEach((avatar, index) => {
-      avatar.style.display = index < this.limit || this.limit === 0 ? "" : "none";
-    });
-  }
-  _isLimitExceeded() {
-    return this.limit !== 0 && this._avatarArray.length > this.limit;
-  }
-  render() {
-    return html`
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LitElement, css, html } from "lit";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
+//#region src/components/avatar-group/avatar-group.element.ts
+/**
+* Group a set of avatars, set a limit to minimize the visual space.
+* @element uui-avatar-group
+* @slot - Insert the `<uui-avatar>` elements in the default slot
+* @cssprop --uui-avatar-border-color - Border color of the avatars
+*/
+var UUIAvatarGroupElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._avatarArray = [];
+		this.limit = 0;
+	}
+	firstUpdated() {
+		this._setAvatarArray();
+	}
+	_onSlotChange() {
+		this._setAvatarArray();
+		this._updateAvatarVisibility();
+	}
+	_setAvatarArray() {
+		this._avatarArray = this._avatarNodes ?? [];
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("limit")) this._updateAvatarVisibility();
+	}
+	_updateAvatarVisibility() {
+		this._avatarArray.forEach((avatar, index) => {
+			avatar.style.display = index < this.limit || this.limit === 0 ? "" : "none";
+		});
+	}
+	_isLimitExceeded() {
+		return this.limit !== 0 && this._avatarArray.length > this.limit;
+	}
+	render() {
+		return html`
       <slot @slotchange=${this._onSlotChange}></slot>
-      ${this._isLimitExceeded() ? (
-      //prettier-ignore
-      html`<small id="overflow-indication">+${this._avatarArray.length - this.limit}</small>`
-    ) : ""}
+      ${this._isLimitExceeded() ? html`<small id="overflow-indication">+${this._avatarArray.length - this.limit}</small>` : ""}
     `;
-  }
-};
-_UUIAvatarGroupElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-flex;
         align-items: center;
@@ -66,22 +59,19 @@ _UUIAvatarGroupElement.styles = [
       #overflow-indication {
         margin-left: 6px;
       }
-    `
-];
-let UUIAvatarGroupElement = _UUIAvatarGroupElement;
-__decorateClass([
-  queryAssignedElements({
-    selector: "uui-avatar, [uui-avatar]",
-    flatten: true
-  })
-], UUIAvatarGroupElement.prototype, "_avatarNodes");
-__decorateClass([
-  state()
-], UUIAvatarGroupElement.prototype, "_avatarArray");
-__decorateClass([
-  property({ type: Number, attribute: true })
-], UUIAvatarGroupElement.prototype, "limit");
-export {
-  UUIAvatarGroupElement
+    `];
+	}
 };
-//# sourceMappingURL=avatar-group.element.js.map
+__decorate([queryAssignedElements({
+	selector: "uui-avatar, [uui-avatar]",
+	flatten: true
+})], UUIAvatarGroupElement.prototype, "_avatarNodes", void 0);
+__decorate([state()], UUIAvatarGroupElement.prototype, "_avatarArray", void 0);
+__decorate([property({
+	type: Number,
+	attribute: true
+})], UUIAvatarGroupElement.prototype, "limit", void 0);
+//#endregion
+export { UUIAvatarGroupElement };
+
+//# sourceMappingURL=avatar-group.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.element.js","sources":["../../../src/components/avatar-group/avatar-group.element.ts"],"sourcesContent":["import type { UUIAvatarElement } from '../avatar/avatar.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\n\n/**\n * Group a set of avatars, set a limit to minimize the visual space.\n * @element uui-avatar-group\n * @slot - Insert the `<uui-avatar>` elements in the default slot\n * @cssprop --uui-avatar-border-color - Border color of the avatars\n */\nexport class UUIAvatarGroupElement extends LitElement {\n  @queryAssignedElements({\n    selector: 'uui-avatar, [uui-avatar]',\n    flatten: true,\n  })\n  private readonly _avatarNodes?: UUIAvatarElement[];\n\n  @state()\n  private _avatarArray: UUIAvatarElement[] = [];\n\n  /**\n   * This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number, attribute: true })\n  limit = 0;\n\n  firstUpdated() {\n    this._setAvatarArray();\n  }\n\n  private _onSlotChange() {\n    this._setAvatarArray();\n    this._updateAvatarVisibility();\n  }\n\n  private _setAvatarArray() {\n    this._avatarArray = this._avatarNodes ?? [];\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('limit')) {\n      this._updateAvatarVisibility();\n    }\n  }\n\n  private _updateAvatarVisibility() {\n    this._avatarArray.forEach((avatar: UUIAvatarElement, index: number) => {\n      avatar.style.display =\n        index < this.limit || this.limit === 0 ? '' : 'none';\n    });\n  }\n\n  private _isLimitExceeded() {\n    return this.limit !== 0 && this._avatarArray.length > this.limit;\n  }\n\n  render() {\n    return html`\n      <slot @slotchange=${this._onSlotChange}></slot>\n      ${this._isLimitExceeded()\n        ? //prettier-ignore\n          html`<small id=\"overflow-indication\">+${this._avatarArray.length - this.limit}</small>`\n        : ''}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 3px;\n        padding-right: 3px;\n      }\n\n      ::slotted(uui-avatar) {\n        margin-left: -0.2em;\n        margin-right: -0.2em;\n        border: 0.1em solid var(--uui-avatar-border-color);\n      }\n\n      #overflow-indication {\n        margin-left: 6px;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAUO,MAAM,yBAAN,MAAM,+BAA8B,WAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAQ,eAAmC,CAAA;AAS3C,SAAA,QAAQ;AAAA,EAAA;AAAA,EAER,eAAe;AACb,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,gBAAgB;AACtB,SAAK,gBAAA;AACL,SAAK,wBAAA;AAAA,EACP;AAAA,EAEQ,kBAAkB;AACxB,SAAK,eAAe,KAAK,gBAAgB,CAAA;AAAA,EAC3C;AAAA,EAEA,QAAQ,mBAA2D;AACjE,QAAI,kBAAkB,IAAI,OAAO,GAAG;AAClC,WAAK,wBAAA;AAAA,IACP;AAAA,EACF;AAAA,EAEQ,0BAA0B;AAChC,SAAK,aAAa,QAAQ,CAAC,QAA0B,UAAkB;AACrE,aAAO,MAAM,UACX,QAAQ,KAAK,SAAS,KAAK,UAAU,IAAI,KAAK;AAAA,IAClD,CAAC;AAAA,EACH;AAAA,EAEQ,mBAAmB;AACzB,WAAO,KAAK,UAAU,KAAK,KAAK,aAAa,SAAS,KAAK;AAAA,EAC7D;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,0BACe,KAAK,aAAa;AAAA,QACpC,KAAK,iBAAA;AAAA;AAAA,MAEH,wCAAwC,KAAK,aAAa,SAAS,KAAK,KAAK;AAAA,QAC7E,EAAE;AAAA;AAAA,EAEV;AAsBF;AApBE,uBAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5DG,IAAM,wBAAN;AAKY,gBAAA;AAAA,EAJhB,sBAAsB;AAAA,IACrB,UAAU;AAAA,IACV,SAAS;AAAA,EAAA,CACV;AAAA,GAJU,sBAKM,WAAA,cAAA;AAGT,gBAAA;AAAA,EADP,MAAA;AAAM,GAPI,sBAQH,WAAA,cAAA;AASR,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,MAAM;AAAA,GAhBhC,sBAiBX,WAAA,OAAA;"}
+{"version":3,"file":"avatar-group.element.js","names":[],"sources":["../../../src/components/avatar-group/avatar-group.element.ts"],"sourcesContent":["import type { UUIAvatarElement } from '../avatar/avatar.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\n\n/**\n * Group a set of avatars, set a limit to minimize the visual space.\n * @element uui-avatar-group\n * @slot - Insert the `<uui-avatar>` elements in the default slot\n * @cssprop --uui-avatar-border-color - Border color of the avatars\n */\nexport class UUIAvatarGroupElement extends LitElement {\n  @queryAssignedElements({\n    selector: 'uui-avatar, [uui-avatar]',\n    flatten: true,\n  })\n  private readonly _avatarNodes?: UUIAvatarElement[];\n\n  @state()\n  private _avatarArray: UUIAvatarElement[] = [];\n\n  /**\n   * This sets a limit of how many avatars can be shown. It will ad a +{number} after the avatars to show the number of hidden avatars.\n   * @type {number}\n   * @attr\n   * @default 0\n   */\n  @property({ type: Number, attribute: true })\n  limit = 0;\n\n  firstUpdated() {\n    this._setAvatarArray();\n  }\n\n  private _onSlotChange() {\n    this._setAvatarArray();\n    this._updateAvatarVisibility();\n  }\n\n  private _setAvatarArray() {\n    this._avatarArray = this._avatarNodes ?? [];\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    if (changedProperties.has('limit')) {\n      this._updateAvatarVisibility();\n    }\n  }\n\n  private _updateAvatarVisibility() {\n    this._avatarArray.forEach((avatar: UUIAvatarElement, index: number) => {\n      avatar.style.display =\n        index < this.limit || this.limit === 0 ? '' : 'none';\n    });\n  }\n\n  private _isLimitExceeded() {\n    return this.limit !== 0 && this._avatarArray.length > this.limit;\n  }\n\n  render() {\n    return html`\n      <slot @slotchange=${this._onSlotChange}></slot>\n      ${this._isLimitExceeded()\n        ? //prettier-ignore\n          html`<small id=\"overflow-indication\">+${this._avatarArray.length - this.limit}</small>`\n        : ''}\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        padding-left: 3px;\n        padding-right: 3px;\n      }\n\n      ::slotted(uui-avatar) {\n        margin-left: -0.2em;\n        margin-right: -0.2em;\n        border: 0.1em solid var(--uui-avatar-border-color);\n      }\n\n      #overflow-indication {\n        margin-left: 6px;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAa,wBAAb,cAA2C,WAAW;;;sBAQT,CAAC;eASpC;;CAER,eAAe;EACb,KAAK,gBAAgB;CACvB;CAEA,gBAAwB;EACtB,KAAK,gBAAgB;EACrB,KAAK,wBAAwB;CAC/B;CAEA,kBAA0B;EACxB,KAAK,eAAe,KAAK,gBAAgB,CAAC;CAC5C;CAEA,QAAQ,mBAA2D;EACjE,IAAI,kBAAkB,IAAI,OAAO,GAC/B,KAAK,wBAAwB;CAEjC;CAEA,0BAAkC;EAChC,KAAK,aAAa,SAAS,QAA0B,UAAkB;GACrE,OAAO,MAAM,UACX,QAAQ,KAAK,SAAS,KAAK,UAAU,IAAI,KAAK;EAClD,CAAC;CACH;CAEA,mBAA2B;EACzB,OAAO,KAAK,UAAU,KAAK,KAAK,aAAa,SAAS,KAAK;CAC7D;CAEA,SAAS;EACP,OAAO,IAAI;0BACW,KAAK,cAAc;QACrC,KAAK,iBAAiB,IAEpB,IAAI,oCAAoC,KAAK,aAAa,SAAS,KAAK,MAAM,YAC9E,GAAG;;CAEX;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;KAkBL;;AACF;YA9EG,sBAAsB;CACrB,UAAU;CACV,SAAS;AACX,CAAC,CAAA,GAAA,sBAAA,WAAA,gBAAA,KAAA,CAAA;YAGA,MAAM,CAAA,GAAA,sBAAA,WAAA,gBAAA,KAAA,CAAA;YASN,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAK,CAAC,CAAA,GAAA,sBAAA,WAAA,SAAA,KAAA,CAAA"}

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

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

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

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

package/dist/components/badge/badge.d.ts

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

package/dist/components/badge/badge.element.js

@@ -1,27 +1,24 @@
-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 _UUIBadgeElement = class _UUIBadgeElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.color = "default";
-    this.look = "primary";
-    this.attention = false;
-  }
-  render() {
-    return html` <slot></slot> `;
-  }
-};
-_UUIBadgeElement.styles = [
-  css`
+//#region src/components/badge/badge.element.ts
+/**
+*  A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.
+*  @element uui-badge
+*  @slot - The slot for badge contents
+*/
+var UUIBadgeElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.color = "default";
+		this.look = "primary";
+		this.attention = false;
+	}
+	render() {
+		return html` <slot></slot> `;
+	}
+	static {
+		this.styles = [css`
       :host {
         position: var(--uui-badge-position, absolute);
         display: flex;
@@ -136,19 +133,16 @@ _UUIBadgeElement.styles = [
           animation: none;
         }
       }
-    `
-];
-let UUIBadgeElement = _UUIBadgeElement;
-__decorateClass([
-  property({ reflect: true })
-], UUIBadgeElement.prototype, "color");
-__decorateClass([
-  property({ reflect: true })
-], UUIBadgeElement.prototype, "look");
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIBadgeElement.prototype, "attention");
-export {
-  UUIBadgeElement
+    `];
+	}
 };
-//# sourceMappingURL=badge.element.js.map
+__decorate([property({ reflect: true })], UUIBadgeElement.prototype, "color", void 0);
+__decorate([property({ reflect: true })], UUIBadgeElement.prototype, "look", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIBadgeElement.prototype, "attention", void 0);
+//#endregion
+export { UUIBadgeElement };
+
+//# sourceMappingURL=badge.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.element.js","sources":["../../../src/components/badge/badge.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/**\n *  A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.\n *  @element uui-badge\n *  @slot - The slot for badge contents\n */\n\nexport class UUIBadgeElement extends LitElement {\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'primary';\n\n  /**\n   * Bring attention to this badge by applying a bounce animation.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  attention: boolean = false;\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: var(--uui-badge-position, absolute);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        padding: var(--uui-size-1) var(--uui-size-2);\n        inset: var(--uui-badge-inset, -8px -8px auto auto);\n\n        text-align: center;\n        font-size: var(--uui-badge-font-size, var(--uui-type-small-size));\n        font-weight: 900;\n        line-height: 1;\n\n        margin-right: 0;\n\n        min-width: var(--uui-size-8);\n        min-height: var(--uui-size-8);\n        box-sizing: border-box;\n\n        border-radius: var(--uui-size-4);\n        border: 1px solid transparent;\n      }\n\n      :host {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n\n      :host {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n        border-color: transparent;\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='outline']) {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: var(--color-standalone);\n      }\n      :host([look='placeholder']) {\n        border-style: dashed;\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: var(--uui-color-border-standalone);\n      }\n\n      /** TODO: we didn't want to target elements by name, but what else can we do? */\n      ::slotted(uui-icon) {\n        margin-left: -0.2em;\n        margin-right: -0.2em;\n      }\n\n      @keyframes --uui-badge-bounce {\n        0% {\n          transform: translateY(0);\n        }\n        20% {\n          transform: translateY(-6px);\n        }\n        40% {\n          transform: translateY(0);\n        }\n        55% {\n          transform: translateY(-3px);\n        }\n        70% {\n          transform: translateY(0);\n        }\n        100% {\n          transform: translateY(0);\n        }\n      }\n      :host([attention]) {\n        animation-duration: 1.4s;\n        animation-iteration-count: infinite;\n        animation-name: --uui-badge-bounce;\n        animation-timing-function: ease;\n      }\n      @media (prefers-reduced-motion) {\n        :host([attention]) {\n          animation: none;\n        }\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAaO,MAAM,mBAAN,MAAM,yBAAwB,WAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAA,QAA2B;AAS3B,SAAA,OAAyB;AASzB,SAAA,YAAqB;AAAA,EAAA;AAAA,EAErB,SAAS;AACP,WAAO;AAAA,EACT;AAwHF;AAtHE,iBAAyB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjCG,IAAM,kBAAN;AAQL,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAPhB,gBAQX,WAAA,OAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,SAAS,KAAA,CAAM;AAAA,GAhBhB,gBAiBX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAzB/B,gBA0BX,WAAA,WAAA;"}
+{"version":3,"file":"badge.element.js","names":[],"sources":["../../../src/components/badge/badge.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type {\n  UUIInterfaceColor,\n  UUIInterfaceLook,\n} from '../../internal/types/index.js';\n\n/**\n *  A badge to notify that there is something that requires attention of the user. The badge is positioned with `position: absolute`. It will determine its position against the first ancestor with `position: relative`.\n *  @element uui-badge\n *  @slot - The slot for badge contents\n */\n\nexport class UUIBadgeElement extends LitElement {\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"positive\" | \"warning\" | \"danger\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = 'default';\n\n  /**\n   * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green \"confirm\" button.\n   * @type {\"default\" | \"primary\" | \"secondary\" | \"outline\" | \"placeholder\"}\n   * @attr\n   * @default \"default\"\n   */\n  @property({ reflect: true })\n  look: UUIInterfaceLook = 'primary';\n\n  /**\n   * Bring attention to this badge by applying a bounce animation.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  attention: boolean = false;\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: var(--uui-badge-position, absolute);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        padding: var(--uui-size-1) var(--uui-size-2);\n        inset: var(--uui-badge-inset, -8px -8px auto auto);\n\n        text-align: center;\n        font-size: var(--uui-badge-font-size, var(--uui-type-small-size));\n        font-weight: 900;\n        line-height: 1;\n\n        margin-right: 0;\n\n        min-width: var(--uui-size-8);\n        min-height: var(--uui-size-8);\n        box-sizing: border-box;\n\n        border-radius: var(--uui-size-4);\n        border: 1px solid transparent;\n      }\n\n      :host {\n        --color: var(--uui-color-default);\n        --color-standalone: var(--uui-color-default-standalone);\n        --color-contrast: var(--uui-color-default-contrast);\n      }\n      :host([color='positive']) {\n        --color: var(--uui-color-positive);\n        --color-standalone: var(--uui-color-positive-standalone);\n        --color-contrast: var(--uui-color-positive-contrast);\n      }\n      :host([color='warning']) {\n        --color: var(--uui-color-warning);\n        --color-standalone: var(--uui-color-warning-standalone);\n        --color-contrast: var(--uui-color-warning-contrast);\n      }\n      :host([color='danger']) {\n        --color: var(--uui-color-danger);\n        --color-standalone: var(--uui-color-danger-standalone);\n        --color-contrast: var(--uui-color-danger-contrast);\n      }\n      :host([color='invalid']) {\n        --color: var(--uui-color-invalid);\n        --color-standalone: var(--uui-color-invalid-standalone);\n        --color-contrast: var(--uui-color-invalid-contrast);\n      }\n\n      :host {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='primary']) {\n        background-color: var(--color);\n        color: var(--color-contrast);\n        border-color: transparent;\n      }\n      :host([look='secondary']) {\n        background-color: var(--uui-color-surface-alt);\n        color: var(--color-standalone);\n        border-color: transparent;\n      }\n      :host([look='outline']) {\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: var(--color-standalone);\n      }\n      :host([look='placeholder']) {\n        border-style: dashed;\n        background-color: var(--uui-color-surface);\n        color: var(--color-standalone);\n        border-color: var(--uui-color-border-standalone);\n      }\n\n      /** TODO: we didn't want to target elements by name, but what else can we do? */\n      ::slotted(uui-icon) {\n        margin-left: -0.2em;\n        margin-right: -0.2em;\n      }\n\n      @keyframes --uui-badge-bounce {\n        0% {\n          transform: translateY(0);\n        }\n        20% {\n          transform: translateY(-6px);\n        }\n        40% {\n          transform: translateY(0);\n        }\n        55% {\n          transform: translateY(-3px);\n        }\n        70% {\n          transform: translateY(0);\n        }\n        100% {\n          transform: translateY(0);\n        }\n      }\n      :host([attention]) {\n        animation-duration: 1.4s;\n        animation-iteration-count: infinite;\n        animation-name: --uui-badge-bounce;\n        animation-timing-function: ease;\n      }\n      @media (prefers-reduced-motion) {\n        :host([attention]) {\n          animation: none;\n        }\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;AAaA,IAAa,kBAAb,cAAqC,WAAW;;;eAQnB;cASF;mBASJ;;CAErB,SAAS;EACP,OAAO,IAAI;CACb;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHL;;AACF;YA/IG,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,SAAA,KAAA,CAAA;YAS1B,SAAS,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,QAAA,KAAA,CAAA;YAS1B,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,aAAA,KAAA,CAAA"}

package/dist/components/badge/badge.js

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

package/dist/components/badge/badge.js.map

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

package/dist/components/boolean-input/UUIBooleanInputEvent.js

@@ -1,15 +1,17 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIBooleanInputEvent = class _UUIBooleanInputEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/boolean-input/UUIBooleanInputEvent.ts
+var UUIBooleanInputEvent = class extends UUIEvent {
+	static {
+		this.CHANGE = "change";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUIBooleanInputEvent.CHANGE = "change";
-let UUIBooleanInputEvent = _UUIBooleanInputEvent;
-export {
-  UUIBooleanInputEvent
-};
-//# sourceMappingURL=UUIBooleanInputEvent.js.map
+//#endregion
+export { UUIBooleanInputEvent };
+
+//# sourceMappingURL=UUIBooleanInputEvent.js.map

package/dist/components/boolean-input/UUIBooleanInputEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIBooleanInputEvent.js","sources":["../../../src/components/boolean-input/UUIBooleanInputEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIBooleanInputElement } from './boolean-input.element.js';\n\nexport class UUIBooleanInputEvent extends UUIEvent<{}, UUIBooleanInputElement> {\n  public static readonly CHANGE: string = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,wBAAN,MAAM,8BAA6B,SAAqC;AAAA,EAG7E,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AARE,sBAAuB,SAAiB;AADnC,IAAM,uBAAN;"}
+{"version":3,"file":"UUIBooleanInputEvent.js","names":[],"sources":["../../../src/components/boolean-input/UUIBooleanInputEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIBooleanInputElement } from './boolean-input.element.js';\n\nexport class UUIBooleanInputEvent extends UUIEvent<{}, UUIBooleanInputElement> {\n  public static readonly CHANGE: string = 'change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,uBAAb,cAA0C,SAAqC;;gBACrC;;CAExC,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/boolean-input/boolean-input.d.ts

@@ -1,3 +1,2 @@
 export * from './boolean-input.element.js';
 export * from './UUIBooleanInputEvent.js';
-export { UUIBooleanInputElement as default } from './boolean-input.element.js';

package/dist/components/boolean-input/boolean-input.element.js

@@ -1,99 +1,89 @@
-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 _UUIBooleanInputElement_instances, onKeyDown_fn;
-import { LitElement, html, css } from "lit";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
+import { UUIFormControlMixin as UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
+import { UUIBooleanInputEvent } from "./UUIBooleanInputEvent.js";
+import { LitElement, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { UUIBooleanInputEvent } from "./UUIBooleanInputEvent.js";
-import { UUIFormControlWithBasicsMixin } from "../../internal/mixins/FormControlWithBasicsMixin.js";
-import { LabelMixin } from "../../internal/mixins/LabelMixin.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const _UUIBooleanInputElement = class _UUIBooleanInputElement extends UUIFormControlWithBasicsMixin(
-  LabelMixin("", LitElement),
-  ""
-) {
-  constructor(inputRole = "checkbox") {
-    super();
-    __privateAdd(this, _UUIBooleanInputElement_instances);
-    this._value = "";
-    this.labelPosition = "right";
-    this._checked = false;
-    this.indeterminate = false;
-    this.disabled = false;
-    this.readonly = false;
-    if (this._value === "") {
-      this._value = "on";
-    }
-    this.inputRole = inputRole;
-    this.addEventListener("keydown", __privateMethod(this, _UUIBooleanInputElement_instances, onKeyDown_fn));
-  }
-  /** intentional overwrite of FormControlMixins value getter and setter method. */
-  get value() {
-    return this._value;
-  }
-  set value(newVal) {
-    const oldValue = super.value;
-    this._value = newVal;
-    this._internals.setFormValue(
-      this._checked && this.name !== "" ? this._value : null
-    );
-    this.requestUpdate("value", oldValue);
-  }
-  // Do not 'reflect' as the attribute is used as fallback.
-  get checked() {
-    return this._checked;
-  }
-  set checked(newVal) {
-    const oldValue = this._checked;
-    this._checked = newVal;
-    this._internals.setFormValue(
-      this._checked && this.name !== "" ? this._value || "on" : null
-    );
-    this.requestUpdate("checked", oldValue);
-  }
-  getFormElement() {
-    return this._input;
-  }
-  hasValue() {
-    return this.checked;
-  }
-  formResetCallback() {
-    super.formResetCallback();
-    this.checked = this.hasAttribute("checked");
-  }
-  /**
-   * This method enables <label for="..."> to focus the input
-   */
-  async focus() {
-    await this.updateComplete;
-    this._input.focus();
-  }
-  async click() {
-    await this.updateComplete;
-    this._input.click();
-  }
-  _onInputChange(e) {
-    e.stopPropagation();
-    this.pristine = false;
-    this.checked = this._input.checked;
-    this.indeterminate = this._input.indeterminate;
-    this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
-  }
-  render() {
-    return html`
+//#region src/components/boolean-input/boolean-input.element.ts
+/**
+* Base class wrapping native input type="checkbox". Extend for custom boolean input.
+* @extends LabelMixin
+* @fires UUIBooleanInputEvent#change on change
+* @abstract
+*/
+var UUIBooleanInputElement = class extends UUIFormControlWithBasicsMixin(LabelMixin("", LitElement), "") {
+	/** intentional overwrite of FormControlMixins value getter and setter method. */
+	get value() {
+		return this._value;
+	}
+	set value(newVal) {
+		const oldValue = super.value;
+		this._value = newVal;
+		this._internals.setFormValue(this._checked && this.name !== "" ? this._value : null);
+		this.requestUpdate("value", oldValue);
+	}
+	/**
+	* Reflects the state of the element.
+	* True if checkbox or toggle is checked. Change this to switch the state programmatically.
+	* @type {boolean}
+	* @attr
+	* @default false
+	*/
+	get checked() {
+		return this._checked;
+	}
+	set checked(newVal) {
+		const oldValue = this._checked;
+		this._checked = newVal;
+		this._internals.setFormValue(this._checked && this.name !== "" ? this._value || "on" : null);
+		this.requestUpdate("checked", oldValue);
+	}
+	constructor(inputRole = "checkbox") {
+		super();
+		this._value = "";
+		this.labelPosition = "right";
+		this._checked = false;
+		this.indeterminate = false;
+		this.disabled = false;
+		this.readonly = false;
+		if (this._value === "") this._value = "on";
+		this.inputRole = inputRole;
+		this.addEventListener("keydown", this.#onKeyDown);
+	}
+	getFormElement() {
+		return this._input;
+	}
+	#onKeyDown(e) {
+		if (e.key == "Enter") this.submit();
+	}
+	hasValue() {
+		return this.checked;
+	}
+	formResetCallback() {
+		super.formResetCallback();
+		this.checked = this.hasAttribute("checked");
+	}
+	/**
+	* This method enables <label for="..."> to focus the input
+	*/
+	async focus() {
+		await this.updateComplete;
+		this._input.focus();
+	}
+	async click() {
+		await this.updateComplete;
+		this._input.click();
+	}
+	_onInputChange(e) {
+		e.stopPropagation();
+		this.pristine = false;
+		this.checked = this._input.checked;
+		this.indeterminate = this._input.indeterminate;
+		this.dispatchEvent(new UUIBooleanInputEvent(UUIBooleanInputEvent.CHANGE));
+	}
+	render() {
+		return html`
       <label>
         <input
           id="input"
@@ -103,26 +93,15 @@ const _UUIBooleanInputElement = class _UUIBooleanInputElement extends UUIFormCon
           .checked=${this.checked}
           .indeterminate=${this.indeterminate}
           aria-checked="${this.checked ? "true" : "false"}"
-          aria-label=${ifDefined(
-      this.getAttribute("aria-label") || this.label || void 0
-    )}
-          aria-labelledby=${ifDefined(
-      this.getAttribute("aria-labelledby") || void 0
-    )}
+          aria-label=${ifDefined(this.getAttribute("aria-label") || this.label || void 0)}
+          aria-labelledby=${ifDefined(this.getAttribute("aria-labelledby") || void 0)}
           role="${this.inputRole}" />
         ${this.renderCheckbox()} ${this.renderLabel()}
       </label>
     `;
-  }
-};
-_UUIBooleanInputElement_instances = new WeakSet();
-onKeyDown_fn = function(e) {
-  if (e.key == "Enter") {
-    this.submit();
-  }
-};
-_UUIBooleanInputElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-block;
       }
@@ -175,28 +154,29 @@ _UUIBooleanInputElement.styles = [
       span.label:empty {
         display: none;
       }
-    `
-];
-let UUIBooleanInputElement = _UUIBooleanInputElement;
-__decorateClass([
-  property({ type: String, attribute: "label-position", reflect: true })
-], UUIBooleanInputElement.prototype, "labelPosition", 2);
-__decorateClass([
-  property({ type: Boolean })
-], UUIBooleanInputElement.prototype, "checked", 1);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIBooleanInputElement.prototype, "indeterminate", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIBooleanInputElement.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIBooleanInputElement.prototype, "readonly", 2);
-__decorateClass([
-  query("#input")
-], UUIBooleanInputElement.prototype, "_input", 2);
-export {
-  UUIBooleanInputElement
+    `];
+	}
 };
-//# sourceMappingURL=boolean-input.element.js.map
+__decorate([property({
+	type: String,
+	attribute: "label-position",
+	reflect: true
+})], UUIBooleanInputElement.prototype, "labelPosition", void 0);
+__decorate([property({ type: Boolean })], UUIBooleanInputElement.prototype, "checked", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIBooleanInputElement.prototype, "indeterminate", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIBooleanInputElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIBooleanInputElement.prototype, "readonly", void 0);
+__decorate([query("#input")], UUIBooleanInputElement.prototype, "_input", void 0);
+//#endregion
+export { UUIBooleanInputElement };
+
+//# sourceMappingURL=boolean-input.element.js.map