@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/dist/Avatar.d.ts

@@ -114,7 +114,9 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     size: `${AvatarSize}`;
     /**
      * Defines the background color of the desired image.
-     * @default "Accent6"
+     * If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
+     *
+     * @default "Auto"
      * @public
      */
     colorScheme: `${AvatarColorScheme}`;
@@ -147,7 +149,10 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     /**
      * Receives the desired `<img>` tag
      *
-     * **Note:** If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
+     * **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>
+     * `ui5-avatar:not(:defined) {`<br/>
+     * &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
+     * `}`
      * @public
      * @since 1.0.0-rc.15
      */
@@ -174,15 +179,15 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     get effectiveSize(): AvatarSize;
     /**
      * Returns the effective background color.
-     * @default "Accent6"
+     * @default "Auto"
      * @private
      */
-    get еffectiveBackgroundColor(): AvatarColorScheme;
+    get effectiveBackgroundColor(): AvatarColorScheme;
     get _role(): "button" | "img";
     get _ariaHasPopup(): import("@ui5/webcomponents-base/dist/types.js").AriaHasPopup | undefined;
     get _interactive(): boolean;
     get validInitials(): string | null | undefined;
-    get accessibleNameText(): string | undefined;
+    get accessibleNameText(): string;
     get hasImage(): boolean;
     get initialsContainer(): HTMLObjectElement | null;
     get fallBackIconDomRef(): Icon | null;

package/dist/Avatar.js

@@ -101,14 +101,16 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         this.size = "S";
         /**
          * Defines the background color of the desired image.
-         * @default "Accent6"
+         * If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
+         *
+         * @default "Auto"
          * @public
          */
-        this.colorScheme = "Accent6";
+        this.colorScheme = "Auto";
         /**
          * @private
          */
-        this._colorScheme = "Accent6";
+        this._colorScheme = "Auto";
         /**
          * Defines the additional accessibility attributes that will be applied to the component.
          * The following field is supported:
@@ -141,10 +143,10 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
     }
     /**
      * Returns the effective background color.
-     * @default "Accent6"
+     * @default "Auto"
      * @private
      */
-    get еffectiveBackgroundColor() {
+    get effectiveBackgroundColor() {
         // we read the attribute, because the "background-color" property will always have a default value
         return this.getAttribute("color-scheme") || this._colorScheme;
     }
@@ -169,7 +171,8 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         if (this.accessibleName) {
             return this.accessibleName;
         }
-        return Avatar_1.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;
+        const defaultLabel = Avatar_1.i18nBundle.getText(AVATAR_TOOLTIP);
+        return this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel;
     }
     get hasImage() {
         this._hasImage = !!this.image.length;

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IAvatarGroupItem } from \"./AvatarGroup.js\";\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\nimport { AVATAR_TOOLTIP } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nimport type Icon from \"./Icon.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport type AvatarShape from \"./types/AvatarShape.js\";\nimport type AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\n// Icon\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\n\ntype AvatarAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\">;\n\n/**\n * @class\n * ### Overview\n *\n * An image-like component that has different display options for representing images and icons\n * in different shapes and sizes, depending on the use case.\n *\n * The shape can be circular or square. There are several predefined sizes, as well as an option to\n * set a custom size.\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/Avatar.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.6\n * @implements {IAvatarGroupItem}\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: AvatarCss,\n\ttemplate: AvatarTemplate,\n})\n/**\n * Fired on mouseup, space and enter if avatar is interactive\n *\n * **Note:** The event will not be fired if the `disabled`\n * property is set to `true`.\n * @private\n * @since 1.0.0-rc.11\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {\n\teventDetails!: {\n\t\tclick: void,\n\t}\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines if the avatar is interactive (focusable and pressable).\n\t *\n\t * **Note:** This property won't have effect if the `disabled`\n\t * property is set to `true`.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the name of the UI5 Icon, that will be displayed.\n\t *\n\t * **Note:** If `image` slot is provided, the property will be ignored.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * `<ui5-avatar icon=\"employee\">`\n\t *\n\t * **Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the name of the fallback icon, which should be displayed in the following cases:\n\t *\n\t * \t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t * \t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t * \t- If the image src is wrong.\n\t *\n\t * **Note:** If not set, a default fallback icon \"employee\" is displayed.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * `<ui5-avatar fallback-icon=\"alert\">`\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"employee\"\n\t * @public\n\t */\n\t@property()\n\tfallbackIcon = \"employee\";\n\n\t/**\n\t * Defines the displayed initials.\n\t *\n\t * Up to three Latin letters can be displayed as initials.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tinitials?: string;\n\n\t/**\n\t * Defines the shape of the component.\n\t * @default \"Circle\"\n\t * @public\n\t */\n\t@property()\n\tshape: `${AvatarShape}` = \"Circle\";\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t */\n\t@property()\n\tsize: `${AvatarSize}` = \"S\";\n\n\t/**\n\t * Defines the background color of the desired image.\n\t * @default \"Accent6\"\n\t * @public\n\t */\n\t@property()\n\tcolorScheme: `${AvatarColorScheme}` = \"Accent6\";\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\t_colorScheme: `${AvatarColorScheme}` = \"Accent6\";\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.7\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following field is supported:\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 2.0.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: AvatarAccessibilityAttributes = {};\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex?: string;\n\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * Receives the desired `<img>` tag\n\t *\n\t * **Note:** If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\timage!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the optional badge that will be used for visual affordance.\n\t *\n\t * **Note:** While the slot allows for custom badges, to achieve\n\t * the Fiori design, you can use the `ui5-tag` with `ui5-icon`\n\t * in the corresponding `icon` slot, without text nodes.\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@slot()\n\tbadge!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResizeBound: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\tget tabindex() {\n\t\tif (this.forcedTabIndex) {\n\t\t\treturn parseInt(this.forcedTabIndex);\n\t\t}\n\t\treturn this._interactive ? 0 : undefined;\n\t}\n\n\t/**\n\t * Returns the effective avatar size.\n\t * @default \"S\"\n\t * @private\n\t */\n\tget effectiveSize(): AvatarSize {\n\t\t// we read the attribute, because the \"size\" property will always have a default value\n\t\treturn this.getAttribute(\"size\") as AvatarSize || AvatarSize.S;\n\t}\n\n\t/**\n\t * Returns the effective background color.\n\t * @default \"Accent6\"\n\t * @private\n\t */\n\tget еffectiveBackgroundColor(): AvatarColorScheme {\n\t\t// we read the attribute, because the \"background-color\" property will always have a default value\n\t\treturn this.getAttribute(\"color-scheme\") as AvatarColorScheme || this._colorScheme;\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : \"img\";\n\t}\n\n\tget _ariaHasPopup() {\n\t\treturn this._getAriaHasPopup();\n\t}\n\n\tget _interactive() {\n\t\treturn this.interactive && !this.disabled;\n\t}\n\n\tget validInitials() {\n\t\t// initials should consist of only 1,2 or 3 latin letters\n\t\tconst validInitials = /^[a-zA-Zà-üÀ-Ü]{1,3}$/,\n\t\t\tareInitialsValid = this.initials && validInitials.test(this.initials);\n\n\t\tif (areInitialsValid) {\n\t\t\treturn this.initials;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tget accessibleNameText() {\n\t\tif (this.accessibleName) {\n\t\t\treturn this.accessibleName;\n\t\t}\n\n\t\treturn Avatar.i18nBundle.getText(AVATAR_TOOLTIP) || undefined;\n\t}\n\n\tget hasImage() {\n\t\tthis._hasImage = !!this.image.length;\n\t\treturn this._hasImage;\n\t}\n\n\tget initialsContainer(): HTMLObjectElement | null {\n\t\treturn this.getDomRef()!.querySelector(\".ui5-avatar-initials\");\n\t}\n\n\tget fallBackIconDomRef(): Icon | null {\n\t\treturn this.getDomRef()!.querySelector(\".ui5-avatar-icon-fallback\");\n\t}\n\n\tasync onAfterRendering() {\n\t\tawait renderFinished();\n\t\tif (this.initials && !this.icon) {\n\t\t\tthis._checkInitials();\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\n\t\tthis.initialsContainer && ResizeHandler.register(this.initialsContainer,\n\t\t\tthis._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tthis.initialsContainer && ResizeHandler.deregister(this.initialsContainer,\n\t\t\tthis._handleResizeBound);\n\t}\n\n\thandleResize() {\n\t\tif (this.initials && !this.icon) {\n\t\t\tthis._checkInitials();\n\t\t}\n\t}\n\n\t_checkInitials() {\n\t\tconst avatar = this.getDomRef()!;\n\t\tconst avatarInitials = avatar.querySelector(\".ui5-avatar-initials\");\n\t\tconst validInitials = this.validInitials && avatarInitials && avatarInitials.scrollWidth <= avatar.scrollWidth;\n\n\t\tif (validInitials) {\n\t\t\tthis.showInitials();\n\t\t\treturn;\n\t\t}\n\t\tthis.showFallbackIcon();\n\t}\n\n\tshowFallbackIcon() {\n\t\tthis.initialsContainer?.classList.add(\"ui5-avatar-initials-hidden\");\n\t\tthis.fallBackIconDomRef?.classList.remove(\"ui5-avatar-fallback-icon-hidden\");\n\t}\n\n\tshowInitials() {\n\t\tthis.initialsContainer?.classList.remove(\"ui5-avatar-initials-hidden\");\n\t\tthis.fallBackIconDomRef?.classList.add(\"ui5-avatar-fallback-icon-hidden\");\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis._fireClick();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this._interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireClick();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this._interactive && !e.shiftKey && isSpace(e)) {\n\t\t\tthis._fireClick();\n\t\t}\n\t}\n\n\t_fireClick() {\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t_getAriaHasPopup() {\n\t\tconst ariaHaspopup = this.accessibilityAttributes.hasPopup;\n\n\t\tif (!this._interactive || !ariaHaspopup) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn ariaHaspopup;\n\t}\n}\n\nAvatar.define();\n\nexport default Avatar;\nexport type {\n\tAvatarAccessibilityAttributes,\n};\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { renderFinished } from \"@ui5/webcomponents-base/dist/Render.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type { IAvatarGroupItem } from \"./AvatarGroup.js\";\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\nimport { AVATAR_TOOLTIP } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nimport type Icon from \"./Icon.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport type AvatarShape from \"./types/AvatarShape.js\";\nimport type AvatarColorScheme from \"./types/AvatarColorScheme.js\";\n\n// Icon\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\n\ntype AvatarAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\">;\n\n/**\n * @class\n * ### Overview\n *\n * An image-like component that has different display options for representing images and icons\n * in different shapes and sizes, depending on the use case.\n *\n * The shape can be circular or square. There are several predefined sizes, as well as an option to\n * set a custom size.\n *\n * ### Keyboard Handling\n *\n * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.\n * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents/dist/Avatar.js\";`\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.6\n * @implements {IAvatarGroupItem}\n * @public\n */\n@customElement({\n\ttag: \"ui5-avatar\",\n\tlanguageAware: true,\n\trenderer: jsxRenderer,\n\tstyles: AvatarCss,\n\ttemplate: AvatarTemplate,\n})\n/**\n * Fired on mouseup, space and enter if avatar is interactive\n *\n * **Note:** The event will not be fired if the `disabled`\n * property is set to `true`.\n * @private\n * @since 1.0.0-rc.11\n */\n@event(\"click\", {\n\tbubbles: true,\n})\nclass Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {\n\teventDetails!: {\n\t\tclick: void,\n\t}\n\t/**\n\t * Defines whether the component is disabled.\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines if the avatar is interactive (focusable and pressable).\n\t *\n\t * **Note:** This property won't have effect if the `disabled`\n\t * property is set to `true`.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the name of the UI5 Icon, that will be displayed.\n\t *\n\t * **Note:** If `image` slot is provided, the property will be ignored.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * `<ui5-avatar icon=\"employee\">`\n\t *\n\t * **Note:** If no icon or an empty one is provided, by default the \"employee\" icon should be displayed.\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\ticon?: string;\n\n\t/**\n\t * Defines the name of the fallback icon, which should be displayed in the following cases:\n\t *\n\t * \t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t * \t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t * \t- If the image src is wrong.\n\t *\n\t * **Note:** If not set, a default fallback icon \"employee\" is displayed.\n\t *\n\t * **Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\t *\n\t * `import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\t *\n\t * `<ui5-avatar fallback-icon=\"alert\">`\n\t *\n\t * See all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\t * @default \"employee\"\n\t * @public\n\t */\n\t@property()\n\tfallbackIcon = \"employee\";\n\n\t/**\n\t * Defines the displayed initials.\n\t *\n\t * Up to three Latin letters can be displayed as initials.\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tinitials?: string;\n\n\t/**\n\t * Defines the shape of the component.\n\t * @default \"Circle\"\n\t * @public\n\t */\n\t@property()\n\tshape: `${AvatarShape}` = \"Circle\";\n\n\t/**\n\t * Defines predefined size of the component.\n\t * @default \"S\"\n\t * @public\n\t */\n\t@property()\n\tsize: `${AvatarSize}` = \"S\";\n\n\t/**\n\t * Defines the background color of the desired image.\n\t * If `colorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.\n\t *\n\t * @default \"Auto\"\n\t * @public\n\t */\n\t@property()\n\tcolorScheme: `${AvatarColorScheme}` = \"Auto\";\n\n\t/**\n\t * @private\n\t */\n\t@property()\n\t_colorScheme: `${AvatarColorScheme}` = \"Auto\";\n\n\t/**\n\t * Defines the text alternative of the component.\n\t * If not provided a default text alternative will be set, if present.\n\t * @default undefined\n\t * @public\n\t * @since 1.0.0-rc.7\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following field is supported:\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 2.0.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: AvatarAccessibilityAttributes = {};\n\n\t@property({ noAttribute: true })\n\tforcedTabIndex?: string;\n\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * Receives the desired `<img>` tag\n\t *\n\t * **Note:** If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS:<br/>\n\t * `ui5-avatar:not(:defined) {`<br/>\n\t * &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>\n\t * `}`\n\t * @public\n\t * @since 1.0.0-rc.15\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\timage!: Array<HTMLElement>;\n\n\t/**\n\t * Defines the optional badge that will be used for visual affordance.\n\t *\n\t * **Note:** While the slot allows for custom badges, to achieve\n\t * the Fiori design, you can use the `ui5-tag` with `ui5-icon`\n\t * in the corresponding `icon` slot, without text nodes.\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@slot()\n\tbadge!: Array<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResizeBound: ResizeObserverCallback;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\tget tabindex() {\n\t\tif (this.forcedTabIndex) {\n\t\t\treturn parseInt(this.forcedTabIndex);\n\t\t}\n\t\treturn this._interactive ? 0 : undefined;\n\t}\n\n\t/**\n\t * Returns the effective avatar size.\n\t * @default \"S\"\n\t * @private\n\t */\n\tget effectiveSize(): AvatarSize {\n\t\t// we read the attribute, because the \"size\" property will always have a default value\n\t\treturn this.getAttribute(\"size\") as AvatarSize || AvatarSize.S;\n\t}\n\n\t/**\n\t * Returns the effective background color.\n\t * @default \"Auto\"\n\t * @private\n\t */\n\tget effectiveBackgroundColor(): AvatarColorScheme {\n\t\t// we read the attribute, because the \"background-color\" property will always have a default value\n\t\treturn this.getAttribute(\"color-scheme\") as AvatarColorScheme || this._colorScheme;\n\t}\n\n\tget _role() {\n\t\treturn this._interactive ? \"button\" : \"img\";\n\t}\n\n\tget _ariaHasPopup() {\n\t\treturn this._getAriaHasPopup();\n\t}\n\n\tget _interactive() {\n\t\treturn this.interactive && !this.disabled;\n\t}\n\n\tget validInitials() {\n\t\t// initials should consist of only 1,2 or 3 latin letters\n\t\tconst validInitials = /^[a-zA-Zà-üÀ-Ü]{1,3}$/,\n\t\t\tareInitialsValid = this.initials && validInitials.test(this.initials);\n\n\t\tif (areInitialsValid) {\n\t\t\treturn this.initials;\n\t\t}\n\n\t\treturn null;\n\t}\n\n\tget accessibleNameText() {\n\t\tif (this.accessibleName) {\n\t\t\treturn this.accessibleName;\n\t\t}\n\n\t\tconst defaultLabel = Avatar.i18nBundle.getText(AVATAR_TOOLTIP);\n\n\t\treturn this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel;\n\t}\n\n\tget hasImage() {\n\t\tthis._hasImage = !!this.image.length;\n\t\treturn this._hasImage;\n\t}\n\n\tget initialsContainer(): HTMLObjectElement | null {\n\t\treturn this.getDomRef()!.querySelector(\".ui5-avatar-initials\");\n\t}\n\n\tget fallBackIconDomRef(): Icon | null {\n\t\treturn this.getDomRef()!.querySelector(\".ui5-avatar-icon-fallback\");\n\t}\n\n\tasync onAfterRendering() {\n\t\tawait renderFinished();\n\t\tif (this.initials && !this.icon) {\n\t\t\tthis._checkInitials();\n\t\t}\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\n\t\tthis.initialsContainer && ResizeHandler.register(this.initialsContainer,\n\t\t\tthis._handleResizeBound);\n\t}\n\n\tonExitDOM() {\n\t\tthis.initialsContainer && ResizeHandler.deregister(this.initialsContainer,\n\t\t\tthis._handleResizeBound);\n\t}\n\n\thandleResize() {\n\t\tif (this.initials && !this.icon) {\n\t\t\tthis._checkInitials();\n\t\t}\n\t}\n\n\t_checkInitials() {\n\t\tconst avatar = this.getDomRef()!;\n\t\tconst avatarInitials = avatar.querySelector(\".ui5-avatar-initials\");\n\t\tconst validInitials = this.validInitials && avatarInitials && avatarInitials.scrollWidth <= avatar.scrollWidth;\n\n\t\tif (validInitials) {\n\t\t\tthis.showInitials();\n\t\t\treturn;\n\t\t}\n\t\tthis.showFallbackIcon();\n\t}\n\n\tshowFallbackIcon() {\n\t\tthis.initialsContainer?.classList.add(\"ui5-avatar-initials-hidden\");\n\t\tthis.fallBackIconDomRef?.classList.remove(\"ui5-avatar-fallback-icon-hidden\");\n\t}\n\n\tshowInitials() {\n\t\tthis.initialsContainer?.classList.remove(\"ui5-avatar-initials-hidden\");\n\t\tthis.fallBackIconDomRef?.classList.add(\"ui5-avatar-fallback-icon-hidden\");\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis._fireClick();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this._interactive) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis._fireClick();\n\t\t}\n\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault(); // prevent scrolling\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (this._interactive && !e.shiftKey && isSpace(e)) {\n\t\t\tthis._fireClick();\n\t\t}\n\t}\n\n\t_fireClick() {\n\t\tthis.fireDecoratorEvent(\"click\");\n\t}\n\n\t_getAriaHasPopup() {\n\t\tconst ariaHaspopup = this.accessibilityAttributes.hasPopup;\n\n\t\tif (!this._interactive || !ariaHaspopup) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn ariaHaspopup;\n\t}\n}\n\nAvatar.define();\n\nexport default Avatar;\nexport type {\n\tAvatarAccessibilityAttributes,\n};\n"]}

package/dist/AvatarGroup.d.ts

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import type Button from "./Button.js";
@@ -13,7 +14,7 @@ import type { IButton } from "./Button.js";
  * @public
  */
 interface IAvatarGroupItem extends HTMLElement, ITabbable {
-    еffectiveBackgroundColor: AvatarColorScheme;
+    effectiveBackgroundColor: AvatarColorScheme;
     size: `${AvatarSize}`;
     effectiveSize: AvatarSize;
     interactive: boolean;
@@ -172,7 +173,7 @@ declare class AvatarGroup extends UI5Element {
      * @private
      */
     get _overflowButtonEffectiveWidth(): number;
-    get firstAvatarSize(): "S" | "XS" | "M" | "L" | "XL";
+    get firstAvatarSize(): "S" | "L" | "XS" | "M" | "XL";
     onAfterRendering(): void;
     onBeforeRendering(): void;
     onEnterDOM(): void;
@@ -184,7 +185,7 @@ declare class AvatarGroup extends UI5Element {
     _onClick(e: MouseEvent): void;
     onAvatarClick(e: MouseEvent): void;
     onAvatarUI5Click(e: MouseEvent): void;
-    onOverflowButtonClick(e: MouseEvent): void;
+    onOverflowButtonClick(e: UI5CustomEvent<Button, "click">): void;
     /**
      * Modifies avatars to the needs of avatar group properties. Respects already set size and background color.
      * Set the margins (offsets) based on RTL/LTR.

package/dist/AvatarGroup.js

@@ -154,7 +154,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
      * @public
      */
     get colorScheme() {
-        return this.items.map(avatar => avatar.еffectiveBackgroundColor);
+        return this.items.map(avatar => avatar.effectiveBackgroundColor);
     }
     get _customOverflowButton() {
         return this.overflowButton.length ? this.overflowButton[0] : undefined;
@@ -312,7 +312,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
         this.items.forEach((avatar, index) => {
             const colorIndex = this._getNextBackgroundColor();
             avatar.interactive = !this._isGroup;
-            if (!avatar.getAttribute("_color-scheme")) {
+            if (avatar.getAttribute("_color-scheme") === AvatarColorScheme.Auto) {
                 // AvatarGroup respects colors set to ui5-avatar
                 avatar.setAttribute("_color-scheme", AvatarColorScheme[`Accent${colorIndex}`]);
             }
@@ -321,6 +321,9 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
                 // based on RTL the browser automatically sets left or right margin to avatars
                 avatar.style.marginInlineEnd = offsets[avatar.effectiveSize][this.type];
             }
+            else {
+                avatar.style.marginInlineEnd = "";
+            }
         });
     }
     _onfocusin(e) {
@@ -353,6 +356,7 @@ let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
     _overflowItems() {
         if (this.items.length < 2) {
             // no need to overflow avatars
+            this._setHiddenItems(0);
             return;
         }
         let hiddenItems = 0;

package/dist/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\nimport {\n\tisEnter,\n\tisSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Button from \"./Button.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport AvatarGroupType from \"./types/AvatarGroupType.js\";\nimport AvatarColorScheme from \"./types/AvatarColorScheme.js\";\nimport type { IButton } from \"./Button.js\";\n\nimport {\n\tAVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,\n\tAVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL,\n\tAVATAR_GROUP_ARIA_LABEL_INDIVIDUAL,\n\tAVATAR_GROUP_ARIA_LABEL_GROUP,\n\tAVATAR_GROUP_MOVE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarGroupCss from \"./generated/themes/AvatarGroup.css.js\";\n\n// Template\nimport AvatarGroupTemplate from \"./AvatarGroupTemplate.js\";\n\n/**\n * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as `ui5-avatar-group`\n * @public\n */\ninterface IAvatarGroupItem extends HTMLElement, ITabbable {\n\tеffectiveBackgroundColor: AvatarColorScheme;\n\tsize: `${AvatarSize}`;\n\teffectiveSize: AvatarSize;\n\tinteractive: boolean;\n}\n\nconst OVERFLOW_BTN_CLASS = \"ui5-avatar-group-overflow-btn\";\nconst AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;\n\n// based on RTL/LTR a margin-left/right is set respectfully\nconst offsets = {\n\t[AvatarSize.XS]: {\n\t\t[AvatarGroupType.Individual]: \"0.0625rem\",\n\t\t[AvatarGroupType.Group]: \"-0.5rem\",\n\t},\n\t[AvatarSize.S]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.25rem\",\n\t},\n\t[AvatarSize.M]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.625rem\",\n\t},\n\t[AvatarSize.L]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \" -2rem\",\n\t},\n\t[AvatarSize.XL]: {\n\t\t[AvatarGroupType.Individual]: \"0.25rem\",\n\t\t[AvatarGroupType.Group]: \"-2.75rem\",\n\t},\n};\n\ntype AvatarGroupAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\">;\n\ntype AvatarGroupClickEventDetail = {\n\ttargetRef: HTMLElement,\n\toverflowButtonClicked: boolean,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * Displays a group of avatars arranged horizontally. It is useful to visually\n * showcase a group of related avatars, such as, project team members or employees.\n *\n * The component allows you to display the avatars in different sizes,\n * depending on your use case.\n *\n * The `AvatarGroup` component has two group types:\n *\n * - `Group` type: The avatars are displayed as partially overlapped on\n * top of each other and the entire group has one click/tap area.\n * - `Individual` type: The avatars are displayed side-by-side and each\n * avatar has its own click/tap area.\n *\n * ### Usage\n *\n * Use the `AvatarGroup` if:\n *\n * - You want to display a group of avatars.\n * - You want to display several avatars which have something in common.\n *\n * Do not use the `AvatarGroup` if:\n *\n * - You want to display a single avatar.\n * - You want to display a gallery for simple images.\n * - You want to use it for other visual content than avatars.\n *\n * ### Responsive Behavior\n *\n * When the available space is less than the width required to display all avatars,\n * an overflow visualization appears as a button placed at the end with the same shape\n * and size as the avatars. The visualization displays the number of avatars that have overflowed\n * and are not currently visible.\n *\n * ### Keyboard Handling\n * The component provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * `type` Individual:\n *\n * - [Tab] - Move focus to the overflow button\n * - [Left] - Navigate one avatar to the left\n * - [Right] - Navigate one avatar to the right\n * - [Home] - Navigate to the first avatar\n * - [End] - Navigate to the last avatar\n * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n *\n * `type` Group:\n *\n * - [Tab] - Move focus to the next interactive element after the component\n * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.11\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-avatar-group\",\n\trenderer: jsxRenderer,\n\ttemplate: AvatarGroupTemplate,\n\tstyles: AvatarGroupCss,\n})\n/**\n * Fired when the component is activated either with a\n * click/tap or by using the Enter or Space key.\n * @param {HTMLElement} targetRef The DOM ref of the clicked item.\n * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked\n * @public\n * @since 1.0.0-rc.11\n */\n@event(\"click\")\n\n/**\n * Fired when the count of visible `ui5-avatar` elements in the\n * component has changed\n * @public\n * @since 1.0.0-rc.13\n */\n@event(\"overflow\")\nclass AvatarGroup extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": AvatarGroupClickEventDetail\n\t\t\"overflow\": void\n\t}\n\t/**\n\t * Defines the mode of the `AvatarGroup`.\n\t * @default \"Group\"\n\t * @public\n\t */\n\t@property()\n\ttype: `${AvatarGroupType}` = \"Group\"\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following field is supported:\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 2.0.0\n\t * @default {}\n\t */\n\t @property({ type: Object })\n\t accessibilityAttributes: AvatarGroupAccessibilityAttributes = {};\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_overflowButtonText?: string;\n\n\t/**\n\t * Defines the items of the component. Use the `ui5-avatar` component as an item.\n\t *\n\t * **Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\t *\n\t * Moreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\n\t * as the built-in overflow action has \"Circle\" shape.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<IAvatarGroupItem>;\n\n\t/**\n\t * Defines the overflow button of the component.\n\t *\n\t * **Note:** We recommend using the `ui5-button` component.\n\t *\n\t * **Note:** If this slot is not used, the component will display the built-in overflow button.\n\t * @public\n\t * @since 1.0.0-rc.13\n\t */\n\t@slot()\n\toverflowButton!: Array<IButton>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_onResizeHandler: () => void;\n\t_colorIndex = 0;\n\t_hiddenItems = 0;\n\t_itemNavigation: ItemNavigation;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => {\n\t\t\t\treturn this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);\n\t\t\t},\n\t\t});\n\t\tthis._onResizeHandler = this._onResize.bind(this);\n\t}\n\n\t/**\n\t * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n\t * @default []\n\t * @public\n\t */\n\tget hiddenItems(): IAvatarGroupItem[] {\n\t\treturn this.items.slice(this._hiddenStartIndex);\n\t}\n\n\t/**\n\t * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n\t * @default []\n\t * @public\n\t */\n\tget colorScheme(): AvatarColorScheme[] {\n\t\treturn this.items.map(avatar => avatar.еffectiveBackgroundColor);\n\t}\n\n\tget _customOverflowButton() {\n\t\treturn this.overflowButton.length ? this.overflowButton[0] : undefined;\n\t}\n\n\tget _ariaLabelText() {\n\t\tconst hiddenItemsCount = this.hiddenItems.length;\n\t\tconst typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;\n\n\t\t// avatar type label\n\t\tlet text = AvatarGroup.i18nBundle.getText(typeLabelKey);\n\n\t\t// add displayed-hidden avatars label\n\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;\n\n\t\tif (this._isGroup) {\n\t\t\t// the container role is \"button\", add the message for complete list activation\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;\n\t\t} else {\n\t\t\t// the container role is \"group\", add the \"how to navigate\" message\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;\n\t\t}\n\n\t\treturn text;\n\t}\n\n\tget _overflowButtonAriaLabelText() {\n\t\treturn this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);\n\t}\n\n\tget _containerAriaHasPopup() {\n\t\treturn this._isGroup ? this._getAriaHasPopup() : undefined;\n\t}\n\n\tget _overflowButtonAccAttributes() {\n\t\treturn {\n\t\t\thasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._isGroup ? \"button\" : \"group\";\n\t}\n\n\tget _hiddenStartIndex() {\n\t\treturn this._itemsCount - this._hiddenItems;\n\t}\n\n\tget _overflowBtnHidden() {\n\t\treturn this._hiddenItems === 0;\n\t}\n\n\tget _isGroup() {\n\t\treturn this.type === AvatarGroupType.Group;\n\t}\n\n\tget _itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget _groupTabIndex() {\n\t\treturn this._isGroup ? 0 : -1;\n\t}\n\n\tget _overflowButton() {\n\t\treturn this.shadowRoot!.querySelector<Button>(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);\n\t}\n\n\t/**\n\t * Return the effective overflow button width\n\t * Differences are that when in \"Group\" type the button is offset and overlaps the avatars\n\t *\n\t * 1) In case of \"Group\", (LTR/RTL aware) button width is qual to second item offset left/right\n\t * 2) In case of \"Individual\" group type width is directly taken from button element\n\t * @private\n\t */\n\tget _overflowButtonEffectiveWidth() {\n\t\tconst button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;\n\t\t// if in \"Group\" mode overflow button size is equal to the offset from second item\n\n\t\tif (!button) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this._isGroup) {\n\t\t\tlet item: HTMLElement = this.items[1];\n\t\t\tconst ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;\n\n\t\t\t// in some cases when second avatar is overflowed the offset of the button is the right one\n\t\t\tif (!item || item.hidden) {\n\t\t\t\titem = button;\n\t\t\t}\n\n\t\t\treturn this.effectiveDir === \"rtl\" ? this._getWidthToItem(item) : ltrEffectiveWidth;\n\t\t}\n\n\t\treturn button.offsetWidth;\n\t}\n\n\tget firstAvatarSize() {\n\t\treturn this.items[0]?.size ?? AvatarSize.S;\n\t}\n\n\tonAfterRendering() {\n\t\tthis._overflowItems();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._customOverflowButton) {\n\t\t\tthis._customOverflowButton.nonInteractive = this._isGroup;\n\t\t}\n\n\t\tthis._prepareAvatars();\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\n\t\tResizeHandler.register(this, this._onResizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeHandler);\n\t}\n\n\t_onResize() {\n\t\tthis._overflowItems();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this._isGroup) {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\t} else if (isSpace(e)) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!e.shiftKey && isSpace(e) && this._isGroup) {\n\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_fireGroupEvent(targetRef: HTMLElement) {\n\t\tconst isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) || targetRef === this._customOverflowButton;\n\n\t\tthis.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef,\n\t\t\toverflowButtonClicked: isOverflowButtonClicked,\n\t\t});\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis._isGroup && this._fireGroupEvent(e.target as HTMLElement);\n\t}\n\n\tonAvatarClick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef: e.target as HTMLElement,\n\t\t\toverflowButtonClicked: false,\n\t\t});\n\t}\n\n\tonAvatarUI5Click(e: MouseEvent) {\n\t\t// AvatrGroup fires click and ui5-click - Avatar's ui5-click should be stopped.\n\t\te.stopPropagation();\n\t}\n\n\tonOverflowButtonClick(e: MouseEvent) {\n\t\te.stopPropagation();\n\n\t\tthis.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef: e.target as HTMLElement,\n\t\t\toverflowButtonClicked: true,\n\t\t});\n\t}\n\n\t/**\n\t * Modifies avatars to the needs of avatar group properties. Respects already set size and background color.\n\t * Set the margins (offsets) based on RTL/LTR.\n\t * @private\n\t */\n\t_prepareAvatars() {\n\t\tthis._colorIndex = 0;\n\n\t\tthis.items.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\tavatar.interactive = !this._isGroup;\n\n\t\t\tif (!avatar.getAttribute(\"_color-scheme\")) {\n\t\t\t\t// AvatarGroup respects colors set to ui5-avatar\n\t\t\t\tavatar.setAttribute(\"_color-scheme\", AvatarColorScheme[`Accent${colorIndex}` as keyof typeof AvatarColorScheme]);\n\t\t\t}\n\n\t\t\t// last avatar should not be offset as it breaks the container width and focus styles are no set correctly\n\t\t\tif (index !== this._itemsCount - 1 || this._customOverflowButton) {\n\t\t\t\t// based on RTL the browser automatically sets left or right margin to avatars\n\t\t\t\tavatar.style.marginInlineEnd = offsets[avatar.effectiveSize][this.type];\n\t\t\t}\n\t\t});\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis._itemNavigation.setCurrentItem(e.target as IAvatarGroupItem);\n\t}\n\n\t/**\n\t * Returns the total width to item excluding the item width\n\t * RTL/LTR aware\n\t * @private\n\t * @param item\n\t */\n\t_getWidthToItem(item: HTMLElement) {\n\t\tconst isRTL = this.effectiveDir === \"rtl\";\n\t\tconst ltrWidthToItem = item.offsetLeft - this.offsetLeft;\n\n\t\tif (isRTL) {\n\t\t\tconst itemOffsetParent = item.offsetParent as HTMLElement;\n\n\t\t\t// in RTL the total width is equal to difference of the parent container width and\n\t\t\t// how much is the item offset to the left minus its offsetWidth\n\n\t\t\tif (!itemOffsetParent) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\treturn itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;\n\t\t}\n\n\t\treturn ltrWidthToItem;\n\t}\n\n\t/**\n\t * Overflows items that were not able to fit the container\n\t * @private\n\t */\n\t_overflowItems() {\n\t\tif (this.items.length < 2) {\n\t\t\t// no need to overflow avatars\n\t\t\treturn;\n\t\t}\n\n\t\tlet hiddenItems = 0;\n\n\t\tfor (let index = 0; index < this._itemsCount; index++) {\n\t\t\tconst item: IAvatarGroupItem = this.items[index];\n\n\t\t\t// show item to determine if it will fit the new container size\n\t\t\titem.hidden = false;\n\n\t\t\t// container width to current item + item width (avatar)\n\t\t\t// used to determine whether the following items will fit the container or not\n\t\t\tlet totalWidth = this._getWidthToItem(item) + item.offsetWidth;\n\n\t\t\tif (index !== this._itemsCount - 1 || this._customOverflowButton) {\n\t\t\t\ttotalWidth += this._overflowButtonEffectiveWidth;\n\t\t\t}\n\n\t\t\tif (totalWidth > this.offsetWidth) {\n\t\t\t\thiddenItems = this._itemsCount - index;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// hide the items that did not fit the container size\n\t\tthis._setHiddenItems(hiddenItems);\n\t}\n\n\t_getNextBackgroundColor() {\n\t\t// counter is to automatically assign background colors to avatars, `Accent10` is the highest color value\n\t\tif (++this._colorIndex > 10) {\n\t\t\tthis._colorIndex = 1;\n\t\t}\n\t\treturn this._colorIndex;\n\t}\n\n\t_setHiddenItems(hiddenItems: number) {\n\t\tconst shouldFireEvent = this._hiddenItems !== hiddenItems;\n\n\t\tthis._hiddenItems = hiddenItems;\n\n\t\tthis.items.forEach((item, index) => {\n\t\t\titem.hidden = index >= this._hiddenStartIndex;\n\t\t});\n\n\t\tthis._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;\n\n\t\tif (shouldFireEvent) {\n\t\t\tthis.fireDecoratorEvent(\"overflow\");\n\t\t}\n\t}\n\n\t_getAriaHasPopup() {\n\t\treturn this.accessibilityAttributes.hasPopup;\n\t}\n}\n\nAvatarGroup.define();\n\nexport default AvatarGroup;\nexport type {\n\tAvatarGroupClickEventDetail,\n\tAvatarGroupAccessibilityAttributes,\n\tIAvatarGroupItem,\n};\n"]}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type { AccessibilityAttributes } from \"@ui5/webcomponents-base/dist/types.js\";\n\nimport {\n\tisEnter,\n\tisSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport type Button from \"./Button.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport AvatarGroupType from \"./types/AvatarGroupType.js\";\nimport AvatarColorScheme from \"./types/AvatarColorScheme.js\";\nimport type { IButton } from \"./Button.js\";\n\nimport {\n\tAVATAR_GROUP_DISPLAYED_HIDDEN_LABEL,\n\tAVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL,\n\tAVATAR_GROUP_ARIA_LABEL_INDIVIDUAL,\n\tAVATAR_GROUP_ARIA_LABEL_GROUP,\n\tAVATAR_GROUP_MOVE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AvatarGroupCss from \"./generated/themes/AvatarGroup.css.js\";\n\n// Template\nimport AvatarGroupTemplate from \"./AvatarGroupTemplate.js\";\n\n/**\n * Interface for components that represent an avatar and may be slotted in numerous higher-order components such as `ui5-avatar-group`\n * @public\n */\ninterface IAvatarGroupItem extends HTMLElement, ITabbable {\n\teffectiveBackgroundColor: AvatarColorScheme;\n\tsize: `${AvatarSize}`;\n\teffectiveSize: AvatarSize;\n\tinteractive: boolean;\n}\n\nconst OVERFLOW_BTN_CLASS = \"ui5-avatar-group-overflow-btn\";\nconst AVATAR_GROUP_OVERFLOW_BTN_SELECTOR = `.${OVERFLOW_BTN_CLASS}`;\n\n// based on RTL/LTR a margin-left/right is set respectfully\nconst offsets = {\n\t[AvatarSize.XS]: {\n\t\t[AvatarGroupType.Individual]: \"0.0625rem\",\n\t\t[AvatarGroupType.Group]: \"-0.5rem\",\n\t},\n\t[AvatarSize.S]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.25rem\",\n\t},\n\t[AvatarSize.M]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \"-1.625rem\",\n\t},\n\t[AvatarSize.L]: {\n\t\t[AvatarGroupType.Individual]: \"0.125rem\",\n\t\t[AvatarGroupType.Group]: \" -2rem\",\n\t},\n\t[AvatarSize.XL]: {\n\t\t[AvatarGroupType.Individual]: \"0.25rem\",\n\t\t[AvatarGroupType.Group]: \"-2.75rem\",\n\t},\n};\n\ntype AvatarGroupAccessibilityAttributes = Pick<AccessibilityAttributes, \"hasPopup\">;\n\ntype AvatarGroupClickEventDetail = {\n\ttargetRef: HTMLElement,\n\toverflowButtonClicked: boolean,\n};\n\n/**\n * @class\n *\n * ### Overview\n *\n * Displays a group of avatars arranged horizontally. It is useful to visually\n * showcase a group of related avatars, such as, project team members or employees.\n *\n * The component allows you to display the avatars in different sizes,\n * depending on your use case.\n *\n * The `AvatarGroup` component has two group types:\n *\n * - `Group` type: The avatars are displayed as partially overlapped on\n * top of each other and the entire group has one click/tap area.\n * - `Individual` type: The avatars are displayed side-by-side and each\n * avatar has its own click/tap area.\n *\n * ### Usage\n *\n * Use the `AvatarGroup` if:\n *\n * - You want to display a group of avatars.\n * - You want to display several avatars which have something in common.\n *\n * Do not use the `AvatarGroup` if:\n *\n * - You want to display a single avatar.\n * - You want to display a gallery for simple images.\n * - You want to use it for other visual content than avatars.\n *\n * ### Responsive Behavior\n *\n * When the available space is less than the width required to display all avatars,\n * an overflow visualization appears as a button placed at the end with the same shape\n * and size as the avatars. The visualization displays the number of avatars that have overflowed\n * and are not currently visible.\n *\n * ### Keyboard Handling\n * The component provides advanced keyboard handling.\n * When focused, the user can use the following keyboard\n * shortcuts in order to perform a navigation:\n *\n * `type` Individual:\n *\n * - [Tab] - Move focus to the overflow button\n * - [Left] - Navigate one avatar to the left\n * - [Right] - Navigate one avatar to the right\n * - [Home] - Navigate to the first avatar\n * - [End] - Navigate to the last avatar\n * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n *\n * `type` Group:\n *\n * - [Tab] - Move focus to the next interactive element after the component\n * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event\n * @constructor\n * @extends UI5Element\n * @since 1.0.0-rc.11\n * @public\n */\n\n@customElement({\n\ttag: \"ui5-avatar-group\",\n\trenderer: jsxRenderer,\n\ttemplate: AvatarGroupTemplate,\n\tstyles: AvatarGroupCss,\n})\n/**\n * Fired when the component is activated either with a\n * click/tap or by using the Enter or Space key.\n * @param {HTMLElement} targetRef The DOM ref of the clicked item.\n * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked\n * @public\n * @since 1.0.0-rc.11\n */\n@event(\"click\")\n\n/**\n * Fired when the count of visible `ui5-avatar` elements in the\n * component has changed\n * @public\n * @since 1.0.0-rc.13\n */\n@event(\"overflow\")\nclass AvatarGroup extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": AvatarGroupClickEventDetail\n\t\t\"overflow\": void\n\t}\n\t/**\n\t * Defines the mode of the `AvatarGroup`.\n\t * @default \"Group\"\n\t * @public\n\t */\n\t@property()\n\ttype: `${AvatarGroupType}` = \"Group\"\n\n\t/**\n\t * Defines the additional accessibility attributes that will be applied to the component.\n\t * The following field is supported:\n\t *\n\t * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\n\t * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\t *\n\t * @public\n\t * @since 2.0.0\n\t * @default {}\n\t */\n\t@property({ type: Object })\n\taccessibilityAttributes: AvatarGroupAccessibilityAttributes = {};\n\n\t/**\n\t * @private\n\t */\n\t@property({ noAttribute: true })\n\t_overflowButtonText?: string;\n\n\t/**\n\t * Defines the items of the component. Use the `ui5-avatar` component as an item.\n\t *\n\t * **Note:** The UX guidelines recommends using avatars with \"Circle\" shape.\n\t *\n\t * Moreover, if you use avatars with \"Square\" shape, there will be visual inconsistency\n\t * as the built-in overflow action has \"Circle\" shape.\n\t * @public\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\titems!: Array<IAvatarGroupItem>;\n\n\t/**\n\t * Defines the overflow button of the component.\n\t *\n\t * **Note:** We recommend using the `ui5-button` component.\n\t *\n\t * **Note:** If this slot is not used, the component will display the built-in overflow button.\n\t * @public\n\t * @since 1.0.0-rc.13\n\t */\n\t@slot()\n\toverflowButton!: Array<IButton>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\t_onResizeHandler: () => void;\n\t_colorIndex = 0;\n\t_hiddenItems = 0;\n\t_itemNavigation: ItemNavigation;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._itemNavigation = new ItemNavigation(this, {\n\t\t\tgetItemsCallback: () => {\n\t\t\t\treturn this._isGroup ? [] : this.items.slice(0, this._hiddenStartIndex);\n\t\t\t},\n\t\t});\n\t\tthis._onResizeHandler = this._onResize.bind(this);\n\t}\n\n\t/**\n\t * Returns an array containing the `ui5-avatar` instances that are currently not displayed due to lack of space.\n\t * @default []\n\t * @public\n\t */\n\tget hiddenItems(): IAvatarGroupItem[] {\n\t\treturn this.items.slice(this._hiddenStartIndex);\n\t}\n\n\t/**\n\t * Returns an array containing the `AvatarColorScheme` values that correspond to the avatars in the component.\n\t * @default []\n\t * @public\n\t */\n\tget colorScheme(): AvatarColorScheme[] {\n\t\treturn this.items.map(avatar => avatar.effectiveBackgroundColor);\n\t}\n\n\tget _customOverflowButton() {\n\t\treturn this.overflowButton.length ? this.overflowButton[0] : undefined;\n\t}\n\n\tget _ariaLabelText() {\n\t\tconst hiddenItemsCount = this.hiddenItems.length;\n\t\tconst typeLabelKey = this._isGroup ? AVATAR_GROUP_ARIA_LABEL_GROUP : AVATAR_GROUP_ARIA_LABEL_INDIVIDUAL;\n\n\t\t// avatar type label\n\t\tlet text = AvatarGroup.i18nBundle.getText(typeLabelKey);\n\n\t\t// add displayed-hidden avatars label\n\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_DISPLAYED_HIDDEN_LABEL, this._itemsCount - hiddenItemsCount, hiddenItemsCount)}`;\n\n\t\tif (this._isGroup) {\n\t\t\t// the container role is \"button\", add the message for complete list activation\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL)}`;\n\t\t} else {\n\t\t\t// the container role is \"group\", add the \"how to navigate\" message\n\t\t\ttext += ` ${AvatarGroup.i18nBundle.getText(AVATAR_GROUP_MOVE)}`;\n\t\t}\n\n\t\treturn text;\n\t}\n\n\tget _overflowButtonAriaLabelText() {\n\t\treturn this._isGroup ? undefined : AvatarGroup.i18nBundle.getText(AVATAR_GROUP_SHOW_COMPLETE_LIST_LABEL);\n\t}\n\n\tget _containerAriaHasPopup() {\n\t\treturn this._isGroup ? this._getAriaHasPopup() : undefined;\n\t}\n\n\tget _overflowButtonAccAttributes() {\n\t\treturn {\n\t\t\thasPopup: this._isGroup ? undefined : this._getAriaHasPopup(),\n\t\t};\n\t}\n\n\tget _role() {\n\t\treturn this._isGroup ? \"button\" : \"group\";\n\t}\n\n\tget _hiddenStartIndex() {\n\t\treturn this._itemsCount - this._hiddenItems;\n\t}\n\n\tget _overflowBtnHidden() {\n\t\treturn this._hiddenItems === 0;\n\t}\n\n\tget _isGroup() {\n\t\treturn this.type === AvatarGroupType.Group;\n\t}\n\n\tget _itemsCount() {\n\t\treturn this.items.length;\n\t}\n\n\tget _groupTabIndex() {\n\t\treturn this._isGroup ? 0 : -1;\n\t}\n\n\tget _overflowButton() {\n\t\treturn this.shadowRoot!.querySelector<Button>(AVATAR_GROUP_OVERFLOW_BTN_SELECTOR);\n\t}\n\n\t/**\n\t * Return the effective overflow button width\n\t * Differences are that when in \"Group\" type the button is offset and overlaps the avatars\n\t *\n\t * 1) In case of \"Group\", (LTR/RTL aware) button width is qual to second item offset left/right\n\t * 2) In case of \"Individual\" group type width is directly taken from button element\n\t * @private\n\t */\n\tget _overflowButtonEffectiveWidth() {\n\t\tconst button = this._customOverflowButton ? this._customOverflowButton : this._overflowButton;\n\t\t// if in \"Group\" mode overflow button size is equal to the offset from second item\n\n\t\tif (!button) {\n\t\t\treturn 0;\n\t\t}\n\n\t\tif (this._isGroup) {\n\t\t\tlet item: HTMLElement = this.items[1];\n\t\t\tconst ltrEffectiveWidth = item.offsetLeft - this.offsetLeft;\n\n\t\t\t// in some cases when second avatar is overflowed the offset of the button is the right one\n\t\t\tif (!item || item.hidden) {\n\t\t\t\titem = button;\n\t\t\t}\n\n\t\t\treturn this.effectiveDir === \"rtl\" ? this._getWidthToItem(item) : ltrEffectiveWidth;\n\t\t}\n\n\t\treturn button.offsetWidth;\n\t}\n\n\tget firstAvatarSize() {\n\t\treturn this.items[0]?.size ?? AvatarSize.S;\n\t}\n\n\tonAfterRendering() {\n\t\tthis._overflowItems();\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._customOverflowButton) {\n\t\t\tthis._customOverflowButton.nonInteractive = this._isGroup;\n\t\t}\n\n\t\tthis._prepareAvatars();\n\t}\n\n\tonEnterDOM() {\n\t\tif (isDesktop()) {\n\t\t\tthis.setAttribute(\"desktop\", \"\");\n\t\t}\n\n\t\tResizeHandler.register(this, this._onResizeHandler);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._onResizeHandler);\n\t}\n\n\t_onResize() {\n\t\tthis._overflowItems();\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (this._isGroup) {\n\t\t\tif (isEnter(e)) {\n\t\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\t} else if (isSpace(e)) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t}\n\t}\n\n\t_onkeyup(e: KeyboardEvent) {\n\t\tif (!e.shiftKey && isSpace(e) && this._isGroup) {\n\t\t\tthis._fireGroupEvent(e.target as HTMLElement);\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_fireGroupEvent(targetRef: HTMLElement) {\n\t\tconst isOverflowButtonClicked = targetRef.classList.contains(OVERFLOW_BTN_CLASS) || targetRef === this._customOverflowButton;\n\n\t\tthis.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef,\n\t\t\toverflowButtonClicked: isOverflowButtonClicked,\n\t\t});\n\t}\n\n\t_onClick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis._isGroup && this._fireGroupEvent(e.target as HTMLElement);\n\t}\n\n\tonAvatarClick(e: MouseEvent) {\n\t\te.stopPropagation();\n\t\tthis.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef: e.target as HTMLElement,\n\t\t\toverflowButtonClicked: false,\n\t\t});\n\t}\n\n\tonAvatarUI5Click(e: MouseEvent) {\n\t\t// AvatrGroup fires click and ui5-click - Avatar's ui5-click should be stopped.\n\t\te.stopPropagation();\n\t}\n\n\tonOverflowButtonClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\te.stopPropagation();\n\n\t\tthis.fireDecoratorEvent(\"click\", {\n\t\t\ttargetRef: e.target as HTMLElement,\n\t\t\toverflowButtonClicked: true,\n\t\t});\n\t}\n\n\t/**\n\t * Modifies avatars to the needs of avatar group properties. Respects already set size and background color.\n\t * Set the margins (offsets) based on RTL/LTR.\n\t * @private\n\t */\n\t_prepareAvatars() {\n\t\tthis._colorIndex = 0;\n\n\t\tthis.items.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\tavatar.interactive = !this._isGroup;\n\n\t\t\tif (avatar.getAttribute(\"_color-scheme\") === AvatarColorScheme.Auto) {\n\t\t\t\t// AvatarGroup respects colors set to ui5-avatar\n\t\t\t\tavatar.setAttribute(\"_color-scheme\", AvatarColorScheme[`Accent${colorIndex}` as keyof typeof AvatarColorScheme]);\n\t\t\t}\n\n\t\t\t// last avatar should not be offset as it breaks the container width and focus styles are no set correctly\n\t\t\tif (index !== this._itemsCount - 1 || this._customOverflowButton) {\n\t\t\t\t// based on RTL the browser automatically sets left or right margin to avatars\n\t\t\t\tavatar.style.marginInlineEnd = offsets[avatar.effectiveSize][this.type];\n\t\t\t} else {\n\t\t\t\tavatar.style.marginInlineEnd = \"\";\n\t\t\t}\n\t\t});\n\t}\n\n\t_onfocusin(e: FocusEvent) {\n\t\tthis._itemNavigation.setCurrentItem(e.target as IAvatarGroupItem);\n\t}\n\n\t/**\n\t * Returns the total width to item excluding the item width\n\t * RTL/LTR aware\n\t * @private\n\t * @param item\n\t */\n\t_getWidthToItem(item: HTMLElement) {\n\t\tconst isRTL = this.effectiveDir === \"rtl\";\n\t\tconst ltrWidthToItem = item.offsetLeft - this.offsetLeft;\n\n\t\tif (isRTL) {\n\t\t\tconst itemOffsetParent = item.offsetParent as HTMLElement;\n\n\t\t\t// in RTL the total width is equal to difference of the parent container width and\n\t\t\t// how much is the item offset to the left minus its offsetWidth\n\n\t\t\tif (!itemOffsetParent) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\treturn itemOffsetParent.offsetWidth - item.offsetLeft - item.offsetWidth;\n\t\t}\n\n\t\treturn ltrWidthToItem;\n\t}\n\n\t/**\n\t * Overflows items that were not able to fit the container\n\t * @private\n\t */\n\t_overflowItems() {\n\t\tif (this.items.length < 2) {\n\t\t\t// no need to overflow avatars\n\t\t\tthis._setHiddenItems(0);\n\t\t\treturn;\n\t\t}\n\n\t\tlet hiddenItems = 0;\n\n\t\tfor (let index = 0; index < this._itemsCount; index++) {\n\t\t\tconst item: IAvatarGroupItem = this.items[index];\n\n\t\t\t// show item to determine if it will fit the new container size\n\t\t\titem.hidden = false;\n\n\t\t\t// container width to current item + item width (avatar)\n\t\t\t// used to determine whether the following items will fit the container or not\n\t\t\tlet totalWidth = this._getWidthToItem(item) + item.offsetWidth;\n\n\t\t\tif (index !== this._itemsCount - 1 || this._customOverflowButton) {\n\t\t\t\ttotalWidth += this._overflowButtonEffectiveWidth;\n\t\t\t}\n\n\t\t\tif (totalWidth > this.offsetWidth) {\n\t\t\t\thiddenItems = this._itemsCount - index;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t// hide the items that did not fit the container size\n\t\tthis._setHiddenItems(hiddenItems);\n\t}\n\n\t_getNextBackgroundColor() {\n\t\t// counter is to automatically assign background colors to avatars, `Accent10` is the highest color value\n\t\tif (++this._colorIndex > 10) {\n\t\t\tthis._colorIndex = 1;\n\t\t}\n\t\treturn this._colorIndex;\n\t}\n\n\t_setHiddenItems(hiddenItems: number) {\n\t\tconst shouldFireEvent = this._hiddenItems !== hiddenItems;\n\n\t\tthis._hiddenItems = hiddenItems;\n\n\t\tthis.items.forEach((item, index) => {\n\t\t\titem.hidden = index >= this._hiddenStartIndex;\n\t\t});\n\n\t\tthis._overflowButtonText = `+${hiddenItems > 99 ? 99 : hiddenItems}`;\n\n\t\tif (shouldFireEvent) {\n\t\t\tthis.fireDecoratorEvent(\"overflow\");\n\t\t}\n\t}\n\n\t_getAriaHasPopup() {\n\t\treturn this.accessibilityAttributes.hasPopup;\n\t}\n}\n\nAvatarGroup.define();\n\nexport default AvatarGroup;\nexport type {\n\tAvatarGroupClickEventDetail,\n\tAvatarGroupAccessibilityAttributes,\n\tIAvatarGroupItem,\n};\n"]}

package/dist/AvatarGroupTemplate.js

@@ -3,6 +3,7 @@ import Button from "./Button.js";
 import AvatarSize from "./types/AvatarSize.js";
 export default function AvatarGroupTemplate() {
     return (_jsx("div", { class: "ui5-avatar-group-root", children: _jsxs("div", { class: "ui5-avatar-group-items", role: this._role, tabindex: this._groupTabIndex, "aria-label": this._ariaLabelText, "aria-haspopup": this._containerAriaHasPopup, onClick: this._onClick, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onFocusIn: this._onfocusin, children: [_jsx("slot", { onClick: this.onAvatarClick, "onui5-click": this.onAvatarUI5Click }), this._customOverflowButton ?
+                    // @ts-expect-error
                     _jsx("slot", { onClick: this.onOverflowButtonClick, name: "overflowButton" })
                     :
                         _jsx(Button, { onClick: this.onOverflowButtonClick, accessibilityAttributes: this._overflowButtonAccAttributes, accessibleName: this._overflowButtonAriaLabelText, hidden: this._overflowBtnHidden, nonInteractive: this._isGroup, class: {

package/dist/AvatarGroupTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupTemplate.js","sourceRoot":"","sources":["../src/AvatarGroupTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,cAAK,KAAK,EAAC,uBAAuB,YACjC,eACC,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,QAAQ,EAAE,IAAI,CAAC,cAAc,gBACjB,IAAI,CAAC,cAAc,mBAChB,IAAI,CAAC,sBAAsB,EAC1C,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,aAE1B,eAAM,OAAO,EAAE,IAAI,CAAC,aAAa,iBAAe,IAAI,CAAC,gBAAgB,GAAS,EAE7E,IAAI,CAAC,qBAAqB,CAAC,CAAC;oBAC5B,eAAM,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,IAAI,EAAC,gBAAgB,GAAQ;oBACxE,CAAC;wBACD,KAAC,MAAM,IACN,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,uBAAuB,EAAE,IAAI,CAAC,4BAA4B,EAC1D,cAAc,EAAE,IAAI,CAAC,4BAA4B,EACjD,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,cAAc,EAAE,IAAI,CAAC,QAAQ,EAC7B,KAAK,EAAE;gCACN,+BAA+B,EAAE,IAAI;gCACrC,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,EAAE;gCAC1E,iCAAiC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC;gCACxE,iCAAiC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC;gCACxE,iCAAiC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC;gCACxE,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,EAAE;6BAC1E,YAEA,IAAI,CAAC,mBAAmB,GACjB,IAEL,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type AvatarGroup from \"./AvatarGroup.js\";\nimport Button from \"./Button.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\n\nexport default function AvatarGroupTemplate(this: AvatarGroup) {\n\treturn (\n\t\t<div class=\"ui5-avatar-group-root\">\n\t\t\t<div\n\t\t\t\tclass=\"ui5-avatar-group-items\"\n\t\t\t\trole={this._role}\n\t\t\t\ttabindex={this._groupTabIndex}\n\t\t\t\taria-label={this._ariaLabelText}\n\t\t\t\taria-haspopup={this._containerAriaHasPopup}\n\t\t\t\tonClick={this._onClick}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t>\n\t\t\t\t<slot onClick={this.onAvatarClick} onui5-click={this.onAvatarUI5Click}></slot>\n\n\t\t\t\t{this._customOverflowButton ?\n\t\t\t\t\t<slot onClick={this.onOverflowButtonClick} name=\"overflowButton\"></slot>\n\t\t\t\t\t:\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={this.onOverflowButtonClick}\n\t\t\t\t\t\taccessibilityAttributes={this._overflowButtonAccAttributes}\n\t\t\t\t\t\taccessibleName={this._overflowButtonAriaLabelText}\n\t\t\t\t\t\thidden={this._overflowBtnHidden}\n\t\t\t\t\t\tnonInteractive={this._isGroup}\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn\": true,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-xs\": this.firstAvatarSize === AvatarSize.XS,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-s\": this.firstAvatarSize === AvatarSize.S,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-m\": this.firstAvatarSize === AvatarSize.M,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-l\": this.firstAvatarSize === AvatarSize.L,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-xl\": this.firstAvatarSize === AvatarSize.XL,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._overflowButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"file":"AvatarGroupTemplate.js","sourceRoot":"","sources":["../src/AvatarGroupTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,mBAAmB;IAC1C,OAAO,CACN,cAAK,KAAK,EAAC,uBAAuB,YACjC,eACC,KAAK,EAAC,wBAAwB,EAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,QAAQ,EAAE,IAAI,CAAC,cAAc,gBACjB,IAAI,CAAC,cAAc,mBAChB,IAAI,CAAC,sBAAsB,EAC1C,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,SAAS,EAAE,IAAI,CAAC,UAAU,aAE1B,eAAM,OAAO,EAAE,IAAI,CAAC,aAAa,iBAAe,IAAI,CAAC,gBAAgB,GAAS,EAE7E,IAAI,CAAC,qBAAqB,CAAC,CAAC;oBAC5B,mBAAmB;oBACnB,eAAM,OAAO,EAAE,IAAI,CAAC,qBAAqB,EAAE,IAAI,EAAC,gBAAgB,GAAQ;oBACxE,CAAC;wBACD,KAAC,MAAM,IACN,OAAO,EAAE,IAAI,CAAC,qBAAqB,EACnC,uBAAuB,EAAE,IAAI,CAAC,4BAA4B,EAC1D,cAAc,EAAE,IAAI,CAAC,4BAA4B,EACjD,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAC/B,cAAc,EAAE,IAAI,CAAC,QAAQ,EAC7B,KAAK,EAAE;gCACN,+BAA+B,EAAE,IAAI;gCACrC,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,EAAE;gCAC1E,iCAAiC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC;gCACxE,iCAAiC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC;gCACxE,iCAAiC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,CAAC;gCACxE,kCAAkC,EAAE,IAAI,CAAC,eAAe,KAAK,UAAU,CAAC,EAAE;6BAC1E,YAEA,IAAI,CAAC,mBAAmB,GACjB,IAEL,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type AvatarGroup from \"./AvatarGroup.js\";\nimport Button from \"./Button.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\n\nexport default function AvatarGroupTemplate(this: AvatarGroup) {\n\treturn (\n\t\t<div class=\"ui5-avatar-group-root\">\n\t\t\t<div\n\t\t\t\tclass=\"ui5-avatar-group-items\"\n\t\t\t\trole={this._role}\n\t\t\t\ttabindex={this._groupTabIndex}\n\t\t\t\taria-label={this._ariaLabelText}\n\t\t\t\taria-haspopup={this._containerAriaHasPopup}\n\t\t\t\tonClick={this._onClick}\n\t\t\t\tonKeyUp={this._onkeyup}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonFocusIn={this._onfocusin}\n\t\t\t>\n\t\t\t\t<slot onClick={this.onAvatarClick} onui5-click={this.onAvatarUI5Click}></slot>\n\n\t\t\t\t{this._customOverflowButton ?\n\t\t\t\t\t// @ts-expect-error\n\t\t\t\t\t<slot onClick={this.onOverflowButtonClick} name=\"overflowButton\"></slot>\n\t\t\t\t\t:\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={this.onOverflowButtonClick}\n\t\t\t\t\t\taccessibilityAttributes={this._overflowButtonAccAttributes}\n\t\t\t\t\t\taccessibleName={this._overflowButtonAriaLabelText}\n\t\t\t\t\t\thidden={this._overflowBtnHidden}\n\t\t\t\t\t\tnonInteractive={this._isGroup}\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn\": true,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-xs\": this.firstAvatarSize === AvatarSize.XS,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-s\": this.firstAvatarSize === AvatarSize.S,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-m\": this.firstAvatarSize === AvatarSize.M,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-l\": this.firstAvatarSize === AvatarSize.L,\n\t\t\t\t\t\t\t\"ui5-avatar-group-overflow-btn-xl\": this.firstAvatarSize === AvatarSize.XL,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._overflowButtonText}\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}

package/dist/AvatarTemplate.js

@@ -4,7 +4,7 @@ export default function AvatarTemplate() {
     return (_jsxs("div", { class: "ui5-avatar-root", tabindex: this.tabindex, "data-sap-focus-ref": true, role: this._role, "aria-haspopup": this._ariaHasPopup, "aria-label": this.accessibleNameText, onKeyUp: this._onkeyup, onKeyDown: this._onkeydown, onClick: this._onclick, children: [this.hasImage ?
                 _jsx("slot", {})
                 :
-                    _jsxs(_Fragment, { children: [this.icon && _jsx(Icon, { class: "ui5-avatar-icon", name: this.icon }), this.initials &&
+                    _jsxs(_Fragment, { children: [this.icon && _jsx(Icon, { class: "ui5-avatar-icon", name: this.icon, accessibleName: this.accessibleName }), this.initials &&
                                 _jsxs(_Fragment, { children: [_jsx("span", { class: "ui5-avatar-initials ui5-avatar-initials-hidden", children: this.validInitials }), _jsx(Icon, { name: this.fallbackIcon, class: "ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden" })] })] }), _jsx("slot", { name: "badge" })] }));
 }
 //# sourceMappingURL=AvatarTemplate.js.map

package/dist/AvatarTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarTemplate.js","sourceRoot":"","sources":["../src/AvatarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,8BAEvB,IAAI,EAAE,IAAI,CAAC,KAAK,mBACD,IAAI,CAAC,aAAa,gBACrB,IAAI,CAAC,kBAAkB,EACnC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAErB,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACf,gBAAa;gBACb,CAAC;oBACD,8BACG,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAS,EAEnE,IAAI,CAAC,QAAQ;gCACf,8BACC,eAAM,KAAK,EAAC,gDAAgD,YAAE,IAAI,CAAC,aAAa,GAAQ,EACxF,KAAC,IAAI,IACJ,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,KAAK,EAAC,0EAA0E,GACzE,IACN,IAED,EAGJ,eAAM,IAAI,EAAC,OAAO,GAAQ,IACrB,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Avatar from \"./Avatar.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function AvatarTemplate(this: Avatar) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-avatar-root\"\n\t\t\ttabindex={this.tabindex}\n\t\t\tdata-sap-focus-ref\n\t\t\trole={this._role}\n\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\taria-label={this.accessibleNameText}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t{this.hasImage ?\n\t\t\t\t<slot></slot>\n\t\t\t\t:\n\t\t\t\t<>\n\t\t\t\t\t{ this.icon && <Icon class=\"ui5-avatar-icon\" name={this.icon}></Icon> }\n\n\t\t\t\t\t{ this.initials &&\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span class=\"ui5-avatar-initials ui5-avatar-initials-hidden\">{this.validInitials}</span>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tname={this.fallbackIcon}\n\t\t\t\t\t\t\tclass=\"ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden\"\n\t\t\t\t\t\t></Icon>\n\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t<slot name=\"badge\"></slot>\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"file":"AvatarTemplate.js","sourceRoot":"","sources":["../src/AvatarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,cAAc;IACrC,OAAO,CACN,eACC,KAAK,EAAC,iBAAiB,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,8BAEvB,IAAI,EAAE,IAAI,CAAC,KAAK,mBACD,IAAI,CAAC,aAAa,gBACrB,IAAI,CAAC,kBAAkB,EACnC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,OAAO,EAAE,IAAI,CAAC,QAAQ,aAErB,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACf,gBAAa;gBACb,CAAC;oBACD,8BACG,IAAI,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,GAAS,EAExG,IAAI,CAAC,QAAQ;gCACf,8BACC,eAAM,KAAK,EAAC,gDAAgD,YAAE,IAAI,CAAC,aAAa,GAAQ,EACxF,KAAC,IAAI,IACJ,IAAI,EAAE,IAAI,CAAC,YAAY,EACvB,KAAK,EAAC,0EAA0E,GACzE,IACN,IAED,EAGJ,eAAM,IAAI,EAAC,OAAO,GAAQ,IACrB,CACN,CAAC;AACH,CAAC","sourcesContent":["import type Avatar from \"./Avatar.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function AvatarTemplate(this: Avatar) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-avatar-root\"\n\t\t\ttabindex={this.tabindex}\n\t\t\tdata-sap-focus-ref\n\t\t\trole={this._role}\n\t\t\taria-haspopup={this._ariaHasPopup}\n\t\t\taria-label={this.accessibleNameText}\n\t\t\tonKeyUp={this._onkeyup}\n\t\t\tonKeyDown={this._onkeydown}\n\t\t\tonClick={this._onclick}\n\t\t>\n\t\t\t{this.hasImage ?\n\t\t\t\t<slot></slot>\n\t\t\t\t:\n\t\t\t\t<>\n\t\t\t\t\t{ this.icon && <Icon class=\"ui5-avatar-icon\" name={this.icon} accessibleName={this.accessibleName}></Icon> }\n\n\t\t\t\t\t{ this.initials &&\n\t\t\t\t\t<>\n\t\t\t\t\t\t<span class=\"ui5-avatar-initials ui5-avatar-initials-hidden\">{this.validInitials}</span>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tname={this.fallbackIcon}\n\t\t\t\t\t\t\tclass=\"ui5-avatar-icon ui5-avatar-icon-fallback ui5-avatar-fallback-icon-hidden\"\n\t\t\t\t\t\t></Icon>\n\t\t\t\t\t</>\n\t\t\t\t\t}\n\t\t\t\t</>\n\t\t\t}\n\n\t\t\t<slot name=\"badge\"></slot>\n\t\t</div>\n\t);\n}\n"]}

package/dist/Bar.d.ts

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type BarDesign from "./types/BarDesign.js";
+import type BarAccessibleRole from "./types/BarAccessibleRole.js";
 /**
  * @class
  *
@@ -44,6 +45,21 @@ declare class Bar extends UI5Element {
      * @public
      */
     design: `${BarDesign}`;
+    /**
+     * Specifies the ARIA role applied to the component for accessibility purposes.
+     *
+     * **Note:**
+     *
+     * - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+     *
+     * - If there is only one or no active element, it is recommended to avoid using the "toolbar" role, as it implies a grouping of multiple interactive controls.
+     *
+     * @public
+     * @default "Toolbar"
+     * @since 2.10.0
+     *
+     */
+    accessibleRole: `${BarAccessibleRole}`;
     /**
     * Defines the content at the start of the bar.
     * @public
@@ -62,10 +78,12 @@ declare class Bar extends UI5Element {
     _handleResizeBound: () => void;
     get accInfo(): {
         label: "Header" | "Subheader" | "Footer" | "FloatingFooter";
+        role: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.AriaRole | undefined;
     };
     constructor();
     handleResize(): void;
     onEnterDOM(): void;
     onExitDOM(): void;
+    get effectiveRole(): import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.AriaRole | undefined;
 }
 export default Bar;

package/dist/Bar.js

@@ -55,6 +55,7 @@ let Bar = class Bar extends UI5Element {
     get accInfo() {
         return {
             "label": this.design,
+            "role": this.effectiveRole,
         };
     }
     constructor() {
@@ -65,6 +66,21 @@ let Bar = class Bar extends UI5Element {
          * @public
          */
         this.design = "Header";
+        /**
+         * Specifies the ARIA role applied to the component for accessibility purposes.
+         *
+         * **Note:**
+         *
+         * - Set accessibleRole to "toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+         *
+         * - If there is only one or no active element, it is recommended to avoid using the "toolbar" role, as it implies a grouping of multiple interactive controls.
+         *
+         * @public
+         * @default "Toolbar"
+         * @since 2.10.0
+         *
+         */
+        this.accessibleRole = "Toolbar";
         this._handleResizeBound = this.handleResize.bind(this);
     }
     handleResize() {
@@ -87,10 +103,16 @@ let Bar = class Bar extends UI5Element {
             ResizeHandler.deregister(child, this._handleResizeBound);
         }, this);
     }
+    get effectiveRole() {
+        return this.accessibleRole.toLowerCase() === "toolbar" ? "toolbar" : undefined;
+    }
 };
 __decorate([
     property()
 ], Bar.prototype, "design", void 0);
+__decorate([
+    property()
+], Bar.prototype, "accessibleRole", void 0);
 __decorate([
     slot({ type: HTMLElement })
 ], Bar.prototype, "startContent", void 0);

package/dist/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAGnF,WAAW;AACX,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,SAAS;AACT,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAQH,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAgC3B,IAAI,OAAO;QACV,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC;IACH,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAtCT;;;;WAIG;QAEH,WAAM,GAAmB,QAAQ,CAAC;QAkCjC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxD,CAAC;IAED,YAAY;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC;QAC9B,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC;QACjC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC1D,OAAQ,KAAqB,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;IAC7D,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEtD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,QAAQ,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,CAAC,EAAE,IAAI,CAAC,CAAC;IACV,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAExD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,UAAU,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACzE,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,CAAC;CACF,CAAA;AA9DA;IADC,QAAQ,EAAE;mCACuB;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACM;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACX;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACG;AA5B1B,GAAG;IAPR,aAAa,CAAC;QACd,GAAG,EAAE,SAAS;QACd,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;KACrB,CAAC;GACI,GAAG,CAqER;AAED,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,eAAe,GAAG,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type BarDesign from \"./types/BarDesign.js\";\n\n// Template\nimport BarTemplate from \"./BarTemplate.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n *\n * ### Usage\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n *\n * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n *\n * ### Responsive Behavior\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Bar.js\";`\n * @csspart bar - Used to style the wrapper of the content of the component\n * @csspart startContent - Used to style the wrapper of the start content of the component\n * @csspart midContent - Used to style the wrapper of the middle content of the component\n * @csspart endContent - Used to style the wrapper of the end content of the component\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.11\n */\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: jsxRenderer,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element {\n\t/**\n\t * Defines the component's design.\n\t * @default \"Header\"\n\t * @public\n\t */\n\t@property()\n\tdesign: `${BarDesign}` = \"Header\";\n\n\t/**\n\t* Defines the content at the start of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/**\n\t* Defines the content in the middle of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/**\n\t* Defines the content at the end of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}
+{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAInF,WAAW;AACX,OAAO,WAAW,MAAM,kBAAkB,CAAC;AAE3C,SAAS;AACT,OAAO,MAAM,MAAM,+BAA+B,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAQH,IAAM,GAAG,GAAT,MAAM,GAAI,SAAQ,UAAU;IAiD3B,IAAI,OAAO;QACV,OAAO;YACN,OAAO,EAAE,IAAI,CAAC,MAAM;YACpB,MAAM,EAAE,IAAI,CAAC,aAAa;SAC1B,CAAC;IACH,CAAC;IAED;QACC,KAAK,EAAE,CAAC;QAxDT;;;;WAIG;QAEH,WAAM,GAAmB,QAAQ,CAAC;QAElC;;;;;;;;;;;;;WAaG;QAEH,mBAAc,GAA2B,SAAS,CAAC;QAmClD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxD,CAAC;IAED,YAAY;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC;QAC9B,MAAM,QAAQ,GAAG,GAAG,CAAC,WAAW,CAAC;QACjC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC1D,OAAQ,KAAqB,CAAC,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,uBAAuB,EAAE,YAAY,CAAC,CAAC;IAC7D,CAAC;IAED,UAAU;QACT,aAAa,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEtD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,QAAQ,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACvE,CAAC,EAAE,IAAI,CAAC,CAAC;IACV,CAAC;IAED,SAAS;QACR,aAAa,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAExD,IAAI,CAAC,SAAS,EAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAChF,aAAa,CAAC,UAAU,CAAC,KAAoB,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACzE,CAAC,EAAE,IAAI,CAAC,CAAC;IACT,CAAC;IAED,IAAI,aAAa;QACjB,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,SAAqB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC3F,CAAC;CACF,CAAA;AApFA;IADC,QAAQ,EAAE;mCACuB;AAiBlC;IADC,QAAQ,EAAE;2CACwC;AAOnD;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACM;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACX;AAOlC;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;uCACG;AA7C1B,GAAG;IAPR,aAAa,CAAC;QACd,GAAG,EAAE,SAAS;QACd,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,WAAW;KACrB,CAAC;GACI,GAAG,CA2FR;AAED,GAAG,CAAC,MAAM,EAAE,CAAC;AAEb,eAAe,GAAG,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport type BarDesign from \"./types/BarDesign.js\";\nimport type BarAccessibleRole from \"./types/BarAccessibleRole.js\";\n\n// Template\nimport BarTemplate from \"./BarTemplate.js\";\n\n// Styles\nimport BarCss from \"./generated/themes/Bar.css.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base/dist/types.js\";\n\n/**\n * @class\n *\n * ### Overview\n * The Bar is a container which is primarily used to hold titles, buttons and input elements\n * and its design and functionality is the basis for page headers and footers.\n * The component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\n * It has the capability to center content, such as a title, while having other components on the left and right side.\n *\n * ### Usage\n * With the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n *\n * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n *\n * ### Responsive Behavior\n * The default slot will be centered in the available space between the startContent and the endContent areas,\n * therefore it might not always be centered in the entire bar.\n *\n * ### Keyboard Handling\n *\n * #### Fast Navigation\n * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\n * In order to use this functionality, you need to import the following module:\n * `import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/Bar.js\";`\n * @csspart bar - Used to style the wrapper of the content of the component\n * @csspart startContent - Used to style the wrapper of the start content of the component\n * @csspart midContent - Used to style the wrapper of the middle content of the component\n * @csspart endContent - Used to style the wrapper of the end content of the component\n * @constructor\n * @extends UI5Element\n * @public\n * @since 1.0.0-rc.11\n */\n@customElement({\n\ttag: \"ui5-bar\",\n\tfastNavigation: true,\n\trenderer: jsxRenderer,\n\tstyles: BarCss,\n\ttemplate: BarTemplate,\n})\nclass Bar extends UI5Element {\n\t/**\n\t * Defines the component's design.\n\t * @default \"Header\"\n\t * @public\n\t */\n\t@property()\n\tdesign: `${BarDesign}` = \"Header\";\n\n\t/**\n\t * Specifies the ARIA role applied to the component for accessibility purposes.\n\t *\n\t * **Note:**\n\t *\n\t * - Set accessibleRole to \"toolbar\" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.\n\t *\n\t * - If there is only one or no active element, it is recommended to avoid using the \"toolbar\" role, as it implies a grouping of multiple interactive controls.\n\t *\n\t * @public\n\t * @default \"Toolbar\"\n\t * @since 2.10.0\n\t *\n\t */\n\t@property()\n\taccessibleRole: `${BarAccessibleRole}` = \"Toolbar\";\n\n\t/**\n\t* Defines the content at the start of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tstartContent!: Array<HTMLElement>;\n\n\t/**\n\t* Defines the content in the middle of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement, \"default\": true })\n\tmiddleContent!: Array<HTMLElement>\n\n\t/**\n\t* Defines the content at the end of the bar.\n\t* @public\n\t*/\n\t@slot({ type: HTMLElement })\n\tendContent!: Array<HTMLElement>\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.design,\n\t\t\t\"role\": this.effectiveRole,\n\t\t};\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t}\n\n\thandleResize() {\n\t\tconst bar = this.getDomRef()!;\n\t\tconst barWidth = bar.offsetWidth;\n\t\tconst needShrinked = Array.from(bar.children).some(child => {\n\t\t\treturn (child as HTMLElement).offsetWidth > barWidth / 3;\n\t\t});\n\n\t\tbar.classList.toggle(\"ui5-bar-root-shrinked\", needShrinked);\n\t}\n\n\tonEnterDOM() {\n\t\tResizeHandler.register(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.register(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t}\n\n\tonExitDOM() {\n\t\tResizeHandler.deregister(this, this._handleResizeBound);\n\n\t\tthis.getDomRef()!.querySelectorAll(\".ui5-bar-content-container\").forEach(child => {\n\t\t\tResizeHandler.deregister(child as HTMLElement, this._handleResizeBound);\n\t\t}, this);\n\t }\n\n\t get effectiveRole() {\n\t\treturn this.accessibleRole.toLowerCase() === \"toolbar\" ? \"toolbar\" as AriaRole : undefined;\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}

package/dist/BarTemplate.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 export default function BarTemplate() {
-    return (_jsxs("div", { class: "ui5-bar-root", "aria-label": this.accInfo.label, role: "toolbar", part: "bar", children: [_jsx("div", { class: "ui5-bar-content-container ui5-bar-startcontent-container", part: "startContent", children: _jsx("slot", { name: "startContent" }) }), _jsx("div", { class: "ui5-bar-content-container ui5-bar-midcontent-container", part: "midContent", children: _jsx("slot", {}) }), _jsx("div", { class: "ui5-bar-content-container ui5-bar-endcontent-container", part: "endContent", children: _jsx("slot", { name: "endContent" }) })] }));
+    return (_jsxs("div", { class: "ui5-bar-root", "aria-label": this.accInfo.role && this.accInfo.label, role: this.accInfo.role, part: "bar", children: [_jsx("div", { class: "ui5-bar-content-container ui5-bar-startcontent-container", part: "startContent", children: _jsx("slot", { name: "startContent" }) }), _jsx("div", { class: "ui5-bar-content-container ui5-bar-midcontent-container", part: "midContent", children: _jsx("slot", {}) }), _jsx("div", { class: "ui5-bar-content-container ui5-bar-endcontent-container", part: "endContent", children: _jsx("slot", { name: "endContent" }) })] }));
 }
 //# sourceMappingURL=BarTemplate.js.map

package/dist/BarTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarTemplate.js","sourceRoot":"","sources":["../src/BarTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,WAAW;IAClC,OAAO,CACN,eACC,KAAK,EAAC,cAAc,gBACR,IAAI,CAAC,OAAO,CAAC,KAAK,EAC9B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,KAAK,aAEV,cAAK,KAAK,EAAC,0DAA0D,EAAC,IAAI,EAAC,cAAc,YACxF,eAAM,IAAI,EAAC,cAAc,GAAQ,GAC5B,EACN,cAAK,KAAK,EAAC,wDAAwD,EAAC,IAAI,EAAC,YAAY,YACpF,gBAAa,GACR,EACN,cAAK,KAAK,EAAC,wDAAwD,EAAC,IAAI,EAAC,YAAY,YACpF,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CAAC,CAAC;AACV,CAAC","sourcesContent":["import type Bar from \"./Bar.js\";\n\nexport default function BarTemplate(this: Bar) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-bar-root\"\n\t\t\taria-label={this.accInfo.label}\n\t\t\trole=\"toolbar\"\n\t\t\tpart=\"bar\"\n\t\t>\n\t\t\t<div class=\"ui5-bar-content-container ui5-bar-startcontent-container\" part=\"startContent\">\n\t\t\t\t<slot name=\"startContent\"></slot>\n\t\t\t</div>\n\t\t\t<div class=\"ui5-bar-content-container ui5-bar-midcontent-container\" part=\"midContent\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t\t<div class=\"ui5-bar-content-container ui5-bar-endcontent-container\" part=\"endContent\">\n\t\t\t\t<slot name=\"endContent\"></slot>\n\t\t\t</div>\n\t\t</div>);\n}\n"]}
+{"version":3,"file":"BarTemplate.js","sourceRoot":"","sources":["../src/BarTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,WAAW;IAClC,OAAO,CACN,eACC,KAAK,EAAC,cAAc,gBACR,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,EACnD,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,EACvB,IAAI,EAAC,KAAK,aAEV,cAAK,KAAK,EAAC,0DAA0D,EAAC,IAAI,EAAC,cAAc,YACxF,eAAM,IAAI,EAAC,cAAc,GAAQ,GAC5B,EACN,cAAK,KAAK,EAAC,wDAAwD,EAAC,IAAI,EAAC,YAAY,YACpF,gBAAa,GACR,EACN,cAAK,KAAK,EAAC,wDAAwD,EAAC,IAAI,EAAC,YAAY,YACpF,eAAM,IAAI,EAAC,YAAY,GAAQ,GAC1B,IACD,CAAC,CAAC;AACV,CAAC","sourcesContent":["import type Bar from \"./Bar.js\";\n\nexport default function BarTemplate(this: Bar) {\n\treturn (\n\t\t<div\n\t\t\tclass=\"ui5-bar-root\"\n\t\t\taria-label={this.accInfo.role && this.accInfo.label}\n\t\t\trole={this.accInfo.role}\n\t\t\tpart=\"bar\"\n\t\t>\n\t\t\t<div class=\"ui5-bar-content-container ui5-bar-startcontent-container\" part=\"startContent\">\n\t\t\t\t<slot name=\"startContent\"></slot>\n\t\t\t</div>\n\t\t\t<div class=\"ui5-bar-content-container ui5-bar-midcontent-container\" part=\"midContent\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t\t<div class=\"ui5-bar-content-container ui5-bar-endcontent-container\" part=\"endContent\">\n\t\t\t\t<slot name=\"endContent\"></slot>\n\t\t\t</div>\n\t\t</div>);\n}\n"]}

package/dist/Breadcrumbs.d.ts

@@ -157,6 +157,11 @@ declare class Breadcrumbs extends UI5Element {
      * Getter for the list of abstract breadcrumb items to be rendered as list-items inside the overflow
      */
     get _overflowItemsData(): BreadcrumbsItem[];
+    /**
+     * Returns all items that should be displayed in the popover on mobile devices
+     * @private
+     */
+    get _mobilePopoverItems(): BreadcrumbsItem[];
     /**
      * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
      */

package/dist/Breadcrumbs.js

@@ -381,6 +381,15 @@ let Breadcrumbs = Breadcrumbs_1 = class Breadcrumbs extends UI5Element {
             .filter(item => this._isItemVisible(item))
             .reverse();
     }
+    /**
+     * Returns all items that should be displayed in the popover on mobile devices
+     * @private
+     */
+    get _mobilePopoverItems() {
+        return this._getItems()
+            .filter(item => this._isItemVisible(item))
+            .reverse();
+    }
     /**
      * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
      */