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

package/custom-elements.json

@@ -1276,6 +1276,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -1348,6 +1354,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "hasChildren",
+          "attribute": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -1448,6 +1461,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -1515,6 +1534,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "hasChildren",
+          "attribute": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -1625,6 +1651,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -1699,6 +1731,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "hasChildren",
+          "attribute": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -1750,6 +1789,10 @@
         {
           "name": "",
           "description": "slot for the default content area"
+        },
+        {
+          "name": "icon",
+          "description": "slot for the icon with support for `<uui-icon>` elements"
         }
       ]
     },
@@ -1793,6 +1836,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -1853,6 +1902,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "hasChildren",
+          "attribute": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -1946,6 +2002,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -1999,6 +2061,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "hasChildren",
+          "attribute": "has-children",
+          "description": "Set to true to indicate this item has children.",
+          "type": "boolean",
+          "default": "\"false\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -2892,7 +2961,7 @@
         },
         {
           "name": "--uui-swatch-color",
-          "description": "The width of the border."
+          "description": "The color of the swatch."
         }
       ]
     },
@@ -5894,6 +5963,11 @@
           "type": "PopoverContainerPlacement",
           "default": "\"'bottom-start'\""
         },
+        {
+          "name": "no-scroll",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "popover",
           "description": "Indicates that the element is a popover container"
@@ -5921,6 +5995,12 @@
           "type": "PopoverContainerPlacement",
           "default": "\"'bottom-start'\""
         },
+        {
+          "name": "noScroll",
+          "attribute": "no-scroll",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -8374,6 +8454,12 @@
           "description": "Label to be used for aria-label and eventually as visual label",
           "type": "string"
         },
+        {
+          "name": "autocomplete",
+          "description": "Defines the autocomplete attribute, forwarded to the native input. A slider rarely wants autofill; set to \"off\" to discourage password managers from attaching to it.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "name",
           "description": "This is a name property of the component.",
@@ -8473,6 +8559,13 @@
           "description": "Label to be used for aria-label and eventually as visual label",
           "type": "string"
         },
+        {
+          "name": "autocomplete",
+          "attribute": "autocomplete",
+          "description": "Defines the autocomplete attribute, forwarded to the native input. A slider rarely wants autofill; set to \"off\" to discourage password managers from attaching to it.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "styles",
           "type": "CSSResult[]",
@@ -9600,9 +9693,18 @@
           "description": "Sets the background color of the textarea",
           "type": "color"
         },
+        {
+          "name": "--uui-textarea-border-color-hover",
+          "description": "Sets the border color of the textarea when hovered",
+          "type": "color"
+        },
         {
           "name": "--uui-textarea-font-size",
           "description": "Overwrites the default font size"
+        },
+        {
+          "name": "--uui-textarea-padding",
+          "description": "Overwrites the default padding"
         }
       ]
     },

package/dist/_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate as default };

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

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

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

@@ -1,11 +1,14 @@
+import { UUIButtonGroupElement } from "../button-group/button-group.element.js";
 import "../button-group/button-group.js";
 import { css } from "lit";
-import { UUIButtonGroupElement } from "../button-group/button-group.element.js";
-const _UUIActionBarElement = class _UUIActionBarElement extends UUIButtonGroupElement {
-};
-_UUIActionBarElement.styles = [
-  ...UUIButtonGroupElement.styles,
-  css`
+//#region src/components/action-bar/action-bar.element.ts
+/**
+*  @element uui-action-bar
+*  @description - Extends button group to hold buttons with icons that represent actions.
+*/
+var UUIActionBarElement = class extends UUIButtonGroupElement {
+	static {
+		this.styles = [...UUIButtonGroupElement.styles, css`
       ::slotted(*) {
         --uui-button-padding-left-factor: 0.5;
         --uui-button-padding-right-factor: 0.5;
@@ -47,10 +50,10 @@ _UUIActionBarElement.styles = [
         --uui-button-padding-left-factor: 1.5;
         --uui-button-padding-right-factor: 1.5;
       }
-    `
-];
-let UUIActionBarElement = _UUIActionBarElement;
-export {
-  UUIActionBarElement
+    `];
+	}
 };
-//# sourceMappingURL=action-bar.element.js.map
+//#endregion
+export { UUIActionBarElement };
+
+//# sourceMappingURL=action-bar.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"action-bar.element.js","sources":["../../../src/components/action-bar/action-bar.element.ts"],"sourcesContent":["import { UUIButtonGroupElement } from '../button-group/button-group.js';\nimport { css } from 'lit';\n\n/**\n *  @element uui-action-bar\n *  @description - Extends button group to hold buttons with icons that represent actions.\n */\nexport class UUIActionBarElement extends UUIButtonGroupElement {\n  static override readonly styles = [\n    ...UUIButtonGroupElement.styles,\n    css`\n      ::slotted(*) {\n        --uui-button-padding-left-factor: 0.5;\n        --uui-button-padding-right-factor: 0.5;\n      }\n\n      ::slotted(*:first-child) {\n        --uui-button-border-radius: 50px 0 0 50px;\n        --uui-button-padding-left-factor: 2;\n      }\n      ::slotted(*:last-child) {\n        --uui-button-border-radius: 0 50px 50px 0;\n        --uui-button-padding-right-factor: 2;\n      }\n      ::slotted(*:first-child:last-child) {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 2;\n        --uui-button-padding-right-factor: 2;\n      }\n\n      ::slotted([look='outline']),\n      ::slotted([look='placeholder']) {\n        --uui-button-padding-left-factor: 1;\n        --uui-button-padding-right-factor: 1;\n      }\n\n      ::slotted(uui-button[look='outline']:first-child),\n      ::slotted(uui-button[look='placeholder']:first-child) {\n        --uui-button-border-radius: 50px 0 0 50px;\n        --uui-button-padding-left-factor: 1.5;\n      }\n      ::slotted(uui-button[look='outline']:last-child),\n      ::slotted(uui-button[look='placeholder']:last-child) {\n        --uui-button-border-radius: 0 50px 50px 0;\n        --uui-button-padding-right-factor: 1.5;\n      }\n      ::slotted(uui-button[look='outline']:first-child:last-child),\n      ::slotted(uui-button[look='placeholder']:first-child:last-child) {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;AAOO,MAAM,uBAAN,MAAM,6BAA4B,sBAAsB;AA+C/D;AA9CE,qBAAyB,SAAS;AAAA,EAChC,GAAG,sBAAsB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAHG,IAAM,sBAAN;"}
+{"version":3,"file":"action-bar.element.js","names":[],"sources":["../../../src/components/action-bar/action-bar.element.ts"],"sourcesContent":["import { UUIButtonGroupElement } from '../button-group/button-group.js';\nimport { css } from 'lit';\n\n/**\n *  @element uui-action-bar\n *  @description - Extends button group to hold buttons with icons that represent actions.\n */\nexport class UUIActionBarElement extends UUIButtonGroupElement {\n  static override readonly styles = [\n    ...UUIButtonGroupElement.styles,\n    css`\n      ::slotted(*) {\n        --uui-button-padding-left-factor: 0.5;\n        --uui-button-padding-right-factor: 0.5;\n      }\n\n      ::slotted(*:first-child) {\n        --uui-button-border-radius: 50px 0 0 50px;\n        --uui-button-padding-left-factor: 2;\n      }\n      ::slotted(*:last-child) {\n        --uui-button-border-radius: 0 50px 50px 0;\n        --uui-button-padding-right-factor: 2;\n      }\n      ::slotted(*:first-child:last-child) {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 2;\n        --uui-button-padding-right-factor: 2;\n      }\n\n      ::slotted([look='outline']),\n      ::slotted([look='placeholder']) {\n        --uui-button-padding-left-factor: 1;\n        --uui-button-padding-right-factor: 1;\n      }\n\n      ::slotted(uui-button[look='outline']:first-child),\n      ::slotted(uui-button[look='placeholder']:first-child) {\n        --uui-button-border-radius: 50px 0 0 50px;\n        --uui-button-padding-left-factor: 1.5;\n      }\n      ::slotted(uui-button[look='outline']:last-child),\n      ::slotted(uui-button[look='placeholder']:last-child) {\n        --uui-button-border-radius: 0 50px 50px 0;\n        --uui-button-padding-right-factor: 1.5;\n      }\n      ::slotted(uui-button[look='outline']:first-child:last-child),\n      ::slotted(uui-button[look='placeholder']:first-child:last-child) {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;AAOA,IAAa,sBAAb,cAAyC,sBAAsB;;gBAC3B,CAChC,GAAG,sBAAsB,QACzB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CL;;AACF"}

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

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

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

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

package/dist/components/avatar/avatar.d.ts

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

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

@@ -1,77 +1,60 @@
-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 { when } from "lit/directives/when.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 _UUIAvatarElement = class _UUIAvatarElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.overflow = true;
-    this.imgSrc = "";
-    this.imgSrcset = "";
-    this.name = "";
-  }
-  get _initials() {
-    return this.initials?.substring(0, 3) || this.createInitials(this.name);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.name) {
-      console.warn(this.tagName + " needs a `name`", this);
-    }
-  }
-  createInitials(name) {
-    let initials = "";
-    if (!name) {
-      return initials;
-    }
-    const nameParts = name.split(/\s+/).filter((part) => part.length > 0 && !/^[^\p{L}\p{N}]/u.test(part));
-    if (nameParts.length === 0) {
-      const trimmedName = name.trim();
-      if (trimmedName.length > 0 && new RegExp("\\p{Extended_Pictographic}", "u").test(trimmedName)) {
-        const parts = trimmedName.split(/\s+/);
-        for (const part of parts) {
-          if (new RegExp("\\p{Extended_Pictographic}", "u").test(part)) {
-            return part;
-          }
-        }
-      }
-      return initials;
-    }
-    initials = nameParts[0].charAt(0);
-    if (nameParts.length > 1) {
-      initials += nameParts.at(-1).charAt(0);
-    }
-    return initials.toUpperCase();
-  }
-  renderImage() {
-    return html` <img
+//#region src/components/avatar/avatar.element.ts
+/**
+*  Avatar for displaying users
+*  @element uui-avatar
+*  @slot - For anything other than initials (no more than 2-3 characters)
+*/
+var UUIAvatarElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.overflow = true;
+		this.imgSrc = "";
+		this.imgSrcset = "";
+		this.name = "";
+	}
+	get _initials() {
+		return this.initials?.substring(0, 3) || this.createInitials(this.name);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.name) console.warn(this.tagName + " needs a `name`", this);
+	}
+	createInitials(name) {
+		let initials = "";
+		if (!name) return initials;
+		const nameParts = name.split(/\s+/).filter((part) => part.length > 0 && !/^[^\p{L}\p{N}]/u.test(part));
+		if (nameParts.length === 0) {
+			const trimmedName = name.trim();
+			if (trimmedName.length > 0 && /\p{Extended_Pictographic}/u.test(trimmedName)) {
+				const parts = trimmedName.split(/\s+/);
+				for (const part of parts) if (/\p{Extended_Pictographic}/u.test(part)) return part;
+			}
+			return initials;
+		}
+		initials = nameParts[0].charAt(0);
+		if (nameParts.length > 1) initials += nameParts.at(-1).charAt(0);
+		return initials.toUpperCase();
+	}
+	renderImage() {
+		return html` <img
       decoding="async"
       src="${this.imgSrc}"
       srcset="${this.imgSrcset}"
       alt="${this._initials}"
       title="${this.name}" />`;
-  }
-  render() {
-    return html`
-      ${when(
-      this.imgSrc,
-      () => this.renderImage(),
-      () => this._initials
-    )}
+	}
+	render() {
+		return html`
+      ${when(this.imgSrc, () => this.renderImage(), () => this._initials)}
       <slot></slot>
     `;
-  }
-};
-_UUIAvatarElement.styles = [
-  css`
+	}
+	static {
+		this.styles = [css`
       :host {
         display: inline-flex;
         align-items: center;
@@ -101,25 +84,28 @@ _UUIAvatarElement.styles = [
         overflow: hidden;
         border-radius: 50%;
       }
-    `
-];
-let UUIAvatarElement = _UUIAvatarElement;
-__decorateClass([
-  property({ type: Boolean, attribute: true, reflect: true })
-], UUIAvatarElement.prototype, "overflow");
-__decorateClass([
-  property({ type: String, attribute: "img-src" })
-], UUIAvatarElement.prototype, "imgSrc");
-__decorateClass([
-  property({ type: String, attribute: "img-srcset" })
-], UUIAvatarElement.prototype, "imgSrcset");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UUIAvatarElement.prototype, "name");
-__decorateClass([
-  property({ type: String })
-], UUIAvatarElement.prototype, "initials");
-export {
-  UUIAvatarElement
+    `];
+	}
 };
-//# sourceMappingURL=avatar.element.js.map
+__decorate([property({
+	type: Boolean,
+	attribute: true,
+	reflect: true
+})], UUIAvatarElement.prototype, "overflow", void 0);
+__decorate([property({
+	type: String,
+	attribute: "img-src"
+})], UUIAvatarElement.prototype, "imgSrc", void 0);
+__decorate([property({
+	type: String,
+	attribute: "img-srcset"
+})], UUIAvatarElement.prototype, "imgSrcset", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], UUIAvatarElement.prototype, "name", void 0);
+__decorate([property({ type: String })], UUIAvatarElement.prototype, "initials", void 0);
+//#endregion
+export { UUIAvatarElement };
+
+//# sourceMappingURL=avatar.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.element.js","sources":["../../../src/components/avatar/avatar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\n/**\n *  Avatar for displaying users\n *  @element uui-avatar\n *  @slot - For anything other than initials (no more than 2-3 characters)\n */\nexport class UUIAvatarElement extends LitElement {\n  /**\n   * Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n   * @type {boolean}\n   * @attr overflow\n   * @default true\n   */\n  @property({ type: Boolean, attribute: true, reflect: true })\n  public overflow = true;\n\n  /**\n   * Use this to apply a image src\n   * @type {string}\n   * @attr img-src\n   * @default ''\n   */\n  @property({ type: String, attribute: 'img-src' })\n  public imgSrc = '';\n\n  /**\n   * Use this to apply a image srcset\n   * @type {string}\n   * @attr img-srcset\n   * @default ''\n   */\n  @property({ type: String, attribute: 'img-srcset' })\n  public imgSrcset = '';\n\n  /**\n   * Provide the name used for labels and to generate the initials.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Use this to override the initials generated from the name.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  initials?: string;\n\n  private get _initials() {\n    return this.initials?.substring(0, 3) || this.createInitials(this.name);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.name) {\n      console.warn(this.tagName + ' needs a `name`', this);\n    }\n  }\n\n  private createInitials(name: string) {\n    let initials = '';\n\n    if (!name) {\n      return initials;\n    }\n\n    // Split by whitespace and filter out parts that start with special characters or emojis\n    // This filters out parts beginning with punctuation (like parentheses, brackets, @ symbols)\n    // and emojis, while keeping parts that start with letters or numbers\n    const nameParts = name\n      .split(/\\s+/)\n      .filter(part => part.length > 0 && !/^[^\\p{L}\\p{N}]/u.test(part));\n\n    // If no valid letter/number parts, check if we have emojis or other pictographic content\n    if (nameParts.length === 0) {\n      const trimmedName = name.trim();\n      // Only render content if it contains emojis/pictographs, not just punctuation\n      // Limit to the first emoji to avoid overflow in small avatars\n      if (\n        trimmedName.length > 0 &&\n        /\\p{Extended_Pictographic}/u.test(trimmedName)\n      ) {\n        // Split by spaces and get the first part that contains an emoji\n        const parts = trimmedName.split(/\\s+/);\n        for (const part of parts) {\n          if (/\\p{Extended_Pictographic}/u.test(part)) {\n            return part;\n          }\n        }\n      }\n      return initials;\n    }\n\n    // Take first character of the first valid name part\n    initials = nameParts[0].charAt(0);\n\n    // If there's more than one valid name part, add the first character of the last valid name part\n    if (nameParts.length > 1) {\n      initials += nameParts.at(-1)!.charAt(0);\n    }\n\n    return initials.toUpperCase();\n  }\n\n  private renderImage() {\n    return html` <img\n      decoding=\"async\"\n      src=\"${this.imgSrc}\"\n      srcset=\"${this.imgSrcset}\"\n      alt=\"${this._initials}\"\n      title=\"${this.name}\" />`;\n  }\n\n  render() {\n    return html`\n      ${when(\n        this.imgSrc,\n        () => this.renderImage(),\n        () => this._initials,\n      )}\n      <slot></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        position: relative;\n        overflow: hidden;\n        border-radius: 50%;\n        font-weight: 700;\n        -webkit-font-smoothing: subpixel-antialiased;\n        width: calc(2em + 4px);\n        height: calc(2em + 4px);\n        user-select: none;\n        /* box-sizing: border-box; */\n        aspect-ratio: 1;\n        box-shadow: 0 0 0 1.5px var(--uui-color-border);\n      }\n\n      :host([overflow]) {\n        overflow: unset;\n      }\n\n      img {\n        object-fit: cover;\n        height: 100%;\n        width: 100%;\n        overflow: hidden;\n        border-radius: 50%;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AASO,MAAM,oBAAN,MAAM,0BAAyB,WAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAO,WAAW;AASlB,SAAO,SAAS;AAShB,SAAO,YAAY;AASnB,SAAA,OAAO;AAAA,EAAA;AAAA,EAWP,IAAY,YAAY;AACtB,WAAO,KAAK,UAAU,UAAU,GAAG,CAAC,KAAK,KAAK,eAAe,KAAK,IAAI;AAAA,EACxE;AAAA,EAEA,oBAAoB;AAClB,UAAM,kBAAA;AACN,QAAI,CAAC,KAAK,MAAM;AACd,cAAQ,KAAK,KAAK,UAAU,mBAAmB,IAAI;AAAA,IACrD;AAAA,EACF;AAAA,EAEQ,eAAe,MAAc;AACnC,QAAI,WAAW;AAEf,QAAI,CAAC,MAAM;AACT,aAAO;AAAA,IACT;AAKA,UAAM,YAAY,KACf,MAAM,KAAK,EACX,OAAO,CAAA,SAAQ,KAAK,SAAS,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;AAGlE,QAAI,UAAU,WAAW,GAAG;AAC1B,YAAM,cAAc,KAAK,KAAA;AAGzB,UACE,YAAY,SAAS,KACrB,WAAA,8BAAA,GAAA,EAA6B,KAAK,WAAW,GAC7C;AAEA,cAAM,QAAQ,YAAY,MAAM,KAAK;AACrC,mBAAW,QAAQ,OAAO;AACxB,cAAI,WAAA,8BAAA,GAAA,EAA6B,KAAK,IAAI,GAAG;AAC3C,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAGA,eAAW,UAAU,CAAC,EAAE,OAAO,CAAC;AAGhC,QAAI,UAAU,SAAS,GAAG;AACxB,kBAAY,UAAU,GAAG,EAAE,EAAG,OAAO,CAAC;AAAA,IACxC;AAEA,WAAO,SAAS,YAAA;AAAA,EAClB;AAAA,EAEQ,cAAc;AACpB,WAAO;AAAA;AAAA,aAEE,KAAK,MAAM;AAAA,gBACR,KAAK,SAAS;AAAA,aACjB,KAAK,SAAS;AAAA,eACZ,KAAK,IAAI;AAAA,EACtB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH;AAAA,MACA,KAAK;AAAA,MACL,MAAM,KAAK,YAAA;AAAA,MACX,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA;AAAA;AAAA,EAGL;AAmCF;AAjCE,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;AA3HG,IAAM,mBAAN;AAQE,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,SAAS,WAAW,MAAM,SAAS,MAAM;AAAA,GAPhD,iBAQJ,WAAA,UAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,WAAW;AAAA,GAhBrC,iBAiBJ,WAAA,QAAA;AASA,gBAAA;AAAA,EADN,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GAzBxC,iBA0BJ,WAAA,WAAA;AASP,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM;AAAA,GAlC9B,iBAmCX,WAAA,MAAA;AASA,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3Cf,iBA4CX,WAAA,UAAA;"}
+{"version":3,"file":"avatar.element.js","names":[],"sources":["../../../src/components/avatar/avatar.element.ts"],"sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { when } from 'lit/directives/when.js';\n\n/**\n *  Avatar for displaying users\n *  @element uui-avatar\n *  @slot - For anything other than initials (no more than 2-3 characters)\n */\nexport class UUIAvatarElement extends LitElement {\n  /**\n   * Set to true to prevent content from getting hidden if going outside the parent. Useful in combination with something like a Badge.\n   * @type {boolean}\n   * @attr overflow\n   * @default true\n   */\n  @property({ type: Boolean, attribute: true, reflect: true })\n  public overflow = true;\n\n  /**\n   * Use this to apply a image src\n   * @type {string}\n   * @attr img-src\n   * @default ''\n   */\n  @property({ type: String, attribute: 'img-src' })\n  public imgSrc = '';\n\n  /**\n   * Use this to apply a image srcset\n   * @type {string}\n   * @attr img-srcset\n   * @default ''\n   */\n  @property({ type: String, attribute: 'img-srcset' })\n  public imgSrcset = '';\n\n  /**\n   * Provide the name used for labels and to generate the initials.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Use this to override the initials generated from the name.\n   * @type {string}\n   * @attr\n   * @default undefined\n   */\n  @property({ type: String })\n  initials?: string;\n\n  private get _initials() {\n    return this.initials?.substring(0, 3) || this.createInitials(this.name);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.name) {\n      console.warn(this.tagName + ' needs a `name`', this);\n    }\n  }\n\n  private createInitials(name: string) {\n    let initials = '';\n\n    if (!name) {\n      return initials;\n    }\n\n    // Split by whitespace and filter out parts that start with special characters or emojis\n    // This filters out parts beginning with punctuation (like parentheses, brackets, @ symbols)\n    // and emojis, while keeping parts that start with letters or numbers\n    const nameParts = name\n      .split(/\\s+/)\n      .filter(part => part.length > 0 && !/^[^\\p{L}\\p{N}]/u.test(part));\n\n    // If no valid letter/number parts, check if we have emojis or other pictographic content\n    if (nameParts.length === 0) {\n      const trimmedName = name.trim();\n      // Only render content if it contains emojis/pictographs, not just punctuation\n      // Limit to the first emoji to avoid overflow in small avatars\n      if (\n        trimmedName.length > 0 &&\n        /\\p{Extended_Pictographic}/u.test(trimmedName)\n      ) {\n        // Split by spaces and get the first part that contains an emoji\n        const parts = trimmedName.split(/\\s+/);\n        for (const part of parts) {\n          if (/\\p{Extended_Pictographic}/u.test(part)) {\n            return part;\n          }\n        }\n      }\n      return initials;\n    }\n\n    // Take first character of the first valid name part\n    initials = nameParts[0].charAt(0);\n\n    // If there's more than one valid name part, add the first character of the last valid name part\n    if (nameParts.length > 1) {\n      initials += nameParts.at(-1)!.charAt(0);\n    }\n\n    return initials.toUpperCase();\n  }\n\n  private renderImage() {\n    return html` <img\n      decoding=\"async\"\n      src=\"${this.imgSrc}\"\n      srcset=\"${this.imgSrcset}\"\n      alt=\"${this._initials}\"\n      title=\"${this.name}\" />`;\n  }\n\n  render() {\n    return html`\n      ${when(\n        this.imgSrc,\n        () => this.renderImage(),\n        () => this._initials,\n      )}\n      <slot></slot>\n    `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n        position: relative;\n        overflow: hidden;\n        border-radius: 50%;\n        font-weight: 700;\n        -webkit-font-smoothing: subpixel-antialiased;\n        width: calc(2em + 4px);\n        height: calc(2em + 4px);\n        user-select: none;\n        /* box-sizing: border-box; */\n        aspect-ratio: 1;\n        box-shadow: 0 0 0 1.5px var(--uui-color-border);\n      }\n\n      :host([overflow]) {\n        overflow: unset;\n      }\n\n      img {\n        object-fit: cover;\n        height: 100%;\n        width: 100%;\n        overflow: hidden;\n        border-radius: 50%;\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;AASA,IAAa,mBAAb,cAAsC,WAAW;;;kBAQ7B;gBASF;mBASG;cASZ;;CAWP,IAAY,YAAY;EACtB,OAAO,KAAK,UAAU,UAAU,GAAG,CAAC,KAAK,KAAK,eAAe,KAAK,IAAI;CACxE;CAEA,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,IAAI,CAAC,KAAK,MACR,QAAQ,KAAK,KAAK,UAAU,mBAAmB,IAAI;CAEvD;CAEA,eAAuB,MAAc;EACnC,IAAI,WAAW;EAEf,IAAI,CAAC,MACH,OAAO;EAMT,MAAM,YAAY,KACf,MAAM,KAAK,CAAC,CACZ,QAAO,SAAQ,KAAK,SAAS,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;EAGlE,IAAI,UAAU,WAAW,GAAG;GAC1B,MAAM,cAAc,KAAK,KAAK;GAG9B,IACE,YAAY,SAAS,KACrB,6BAA6B,KAAK,WAAW,GAC7C;IAEA,MAAM,QAAQ,YAAY,MAAM,KAAK;IACrC,KAAK,MAAM,QAAQ,OACjB,IAAI,6BAA6B,KAAK,IAAI,GACxC,OAAO;GAGb;GACA,OAAO;EACT;EAGA,WAAW,UAAU,EAAE,CAAC,OAAO,CAAC;EAGhC,IAAI,UAAU,SAAS,GACrB,YAAY,UAAU,GAAG,EAAE,CAAC,CAAE,OAAO,CAAC;EAGxC,OAAO,SAAS,YAAY;CAC9B;CAEA,cAAsB;EACpB,OAAO,IAAI;;aAEF,KAAK,OAAO;gBACT,KAAK,UAAU;aAClB,KAAK,UAAU;eACb,KAAK,KAAK;CACvB;CAEA,SAAS;EACP,OAAO,IAAI;QACP,KACA,KAAK,cACC,KAAK,YAAY,SACjB,KAAK,SACb,EAAE;;;CAGN;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BL;;AACF;YApJG,SAAS;CAAE,MAAM;CAAS,WAAW;CAAM,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA;YAS1D,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAU,CAAC,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;YAS/C,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,iBAAA,WAAA,aAAA,KAAA,CAAA;YASlD,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,QAAA,KAAA,CAAA;YASxC,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,iBAAA,WAAA,YAAA,KAAA,CAAA"}

package/dist/components/avatar/avatar.js

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

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

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

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

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