@ui5/webcomponents 2.27.2 → 2.28.1

package/dist/Avatar.d.ts

@@ -31,9 +31,10 @@ type AvatarAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
  * `import "@ui5/webcomponents/dist/Avatar.js";`
  * @constructor
  * @extends UI5Element
- * @since 1.0.0-rc.6
+ * @since 1.0.0
  * @implements {IAvatarGroupItem}
  * @public
+ * @ui5subcomponent AvatarBadge
  */
 declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     eventDetails: {
@@ -72,7 +73,7 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
      * In that case, the avatar will always be rendered as interactive.
      * @default "Image"
      * @public
-     * @since 2.20
+     * @since 2.20.0
      */
     mode: `${AvatarMode}`;
     /**
@@ -96,8 +97,8 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     /**
      * Defines the name of the fallback icon, which should be displayed in the following cases:
      *
-     * 	- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
-     * 	- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+     * 	- If the initials are not valid (more than 3 letters or empty initials).
+     * 	- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).
      * 	- If the image src is wrong.
      *
      * **Note:** If not set, a default fallback icon "employee" is displayed.
@@ -116,7 +117,12 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
     /**
      * Defines the displayed initials.
      *
-     * Up to three Latin letters can be displayed as initials.
+     * Up to three letters from an alphabetic script can be displayed as initials.
+     * All scripts used in SAP-supported languages are accepted, except logographic and
+     * pure syllabic scripts where the concept of initials does not apply: Han (Chinese,
+     * Japanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.
+     * If the letters do not fit inside the avatar shape at the current size, the fallback
+     * icon is shown instead.
      * @default undefined
      * @public
      */
@@ -150,7 +156,7 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
      * If not provided a default text alternative will be set, if present.
      * @default undefined
      * @public
-     * @since 1.0.0-rc.7
+     * @since 1.0.0
      */
     accessibleName?: string;
     /**
@@ -182,7 +188,7 @@ declare class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem {
      * &nbsp;&nbsp;&nbsp;&nbsp;`visibility: hidden;`<br/>
      * `}`
      * @public
-     * @since 1.0.0-rc.15
+     * @since 1.0.0
      */
     image: DefaultSlot<HTMLElement>;
     /**

package/dist/Avatar.js

@@ -44,9 +44,10 @@ import "@ui5/webcomponents-icons/dist/employee.js";
  * `import "@ui5/webcomponents/dist/Avatar.js";`
  * @constructor
  * @extends UI5Element
- * @since 1.0.0-rc.6
+ * @since 1.0.0
  * @implements {IAvatarGroupItem}
  * @public
+ * @ui5subcomponent AvatarBadge
  */
 let Avatar = Avatar_1 = class Avatar extends UI5Element {
     constructor() {
@@ -84,14 +85,14 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
          * In that case, the avatar will always be rendered as interactive.
          * @default "Image"
          * @public
-         * @since 2.20
+         * @since 2.20.0
          */
         this.mode = "Image";
         /**
          * Defines the name of the fallback icon, which should be displayed in the following cases:
          *
-         * 	- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
-         * 	- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+         * 	- If the initials are not valid (more than 3 letters or empty initials).
+         * 	- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).
          * 	- If the image src is wrong.
          *
          * **Note:** If not set, a default fallback icon "employee" is displayed.
@@ -206,8 +207,11 @@ let Avatar = Avatar_1 = class Avatar extends UI5Element {
         return (this.interactive || this.mode === AvatarMode.Interactive) && !this.disabled;
     }
     get validInitials() {
-        // initials should consist of only 1,2 or 3 latin letters
-        const validInitials = /^[a-zA-Zà-üÀ-Ü]{1,3}$/, areInitialsValid = this.initials && validInitials.test(this.initials);
+        // initials should consist of only 1, 2 or 3 letters from any script where
+        // initials are meaningful. Han (Chinese/Japanese kanji), Hiragana, and Katakana
+        // are excluded because those scripts do not use initials. Korean (Hangul) is
+        // allowed since Korean names can be abbreviated to their syllabic characters.
+        const validInitials = /^\p{L}{1,3}$/u, excludedScripts = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}]/u, areInitialsValid = this.initials && validInitials.test(this.initials) && !excludedScripts.test(this.initials);
         if (areInitialsValid) {
             return this.initials;
         }

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 type { Slot, DefaultSlot } 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-strict.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, AriaRole } 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 {\n\tAVATAR_TOOLTIP,\n\tAVATAR_TYPE_BUTTON,\n\tAVATAR_TYPE_IMAGE,\n} 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 type AvatarBadge from \"./AvatarBadge.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport type AvatarShape from \"./types/AvatarShape.js\";\nimport type AvatarColorScheme from \"./types/AvatarColorScheme.js\";\nimport AvatarMode from \"./types/AvatarMode.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 `mode` is set to `Interactive` or the deprecated `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 * @public\n * @since 2.11.0\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:** When set to `true`, this property takes precedence over the `mode` property,\n\t * and the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\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 * @deprecated Set `mode=\"Interactive\"` instead for the same functionality with proper accessibility.\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the mode of the component.\n\t *\n\t * **Note:**\n\t * - `Image` (default) - renders with role=\"img\"\n\t * - `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n\t * - `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\t *\n\t * **Note:** This property is ignored when the `interactive` property is set to `true`.\n\t * In that case, the avatar will always be rendered as interactive.\n\t * @default \"Image\"\n\t * @public\n\t * @since 2.20\n\t */\n\t@property()\n\tmode: `${AvatarMode}` = \"Image\";\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/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_imageLoadError = 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!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the optional badge that will be used for visual affordance.\n\t *\n\t * **Recommendation:** While badges are supported on all avatars, it is recommended\n\t * to use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\n\t * to provide better user experience and accessibility.\n\t *\n\t * **Note:** While the slot allows for custom badges, to achieve\n\t * the Fiori design, use the `ui5-avatar-badge` component.\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: [\"icon\", \"tooltip\", \"effectiveTooltip\"],\n\t\t\tslots: false,\n\t\t},\n\t})\n\tbadge!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResizeBound: ResizeObserverCallback;\n\t_onImageLoadBound: (e: Event) => void;\n\t_onImageErrorBound: (e: Event) => void;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t\tthis._onImageLoadBound = this._onImageLoad.bind(this);\n\t\tthis._onImageErrorBound = this._onImageError.bind(this);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._attachImageEventHandlers();\n\t\tthis._hasImage = this.hasImage;\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\tif (this._interactive) {\n\t\t\treturn \"button\";\n\t\t}\n\t\tif (this.mode === AvatarMode.Decorative) {\n\t\t\treturn \"presentation\";\n\t\t}\n\t\treturn \"img\";\n\t}\n\n\tget effectiveAriaHidden() {\n\t\t// interactive property takes precedence - never hidden when interactive\n\t\tif (this.interactive) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn this.mode === AvatarMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _ariaHasPopup() {\n\t\treturn this._getAriaHasPopup();\n\t}\n\n\tget _interactive() {\n\t\treturn (this.interactive || this.mode === AvatarMode.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\t/**\n\t * Returns the accessible label for the avatar root element.\n\t * Uses `accessibleName` if provided, otherwise falls back to the default\n\t * \"Avatar\" text appended with `initials` if set.\n\t * The badge's effective tooltip, if present, is always appended at the end\n\t * so screen readers announce the badge state.\n\t */\n\tget accessibleNameText() {\n\t\tconst defaultLabel = Avatar.i18nBundle.getText(AVATAR_TOOLTIP);\n\t\tconst baseLabel = this.accessibleName\n\t\t\t|| (this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel);\n\t\tconst badgeTooltip = (this.badge[0] as AvatarBadge | undefined)?.effectiveTooltip;\n\n\t\treturn badgeTooltip ? `${baseLabel} ${badgeTooltip}` : baseLabel;\n\t}\n\n\tget hasImage() {\n\t\treturn !!this.image.length && !this._imageLoadError;\n\t}\n\n\tget imageEl(): HTMLImageElement | null {\n\t\treturn this.image?.[0] instanceof HTMLImageElement ? this.image[0] : null;\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\n\t\tthis._detachImageEventHandlers();\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\t// aria-haspopup only applies when avatar is interactive\n\t\tif (!this._interactive || !ariaHaspopup) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn ariaHaspopup;\n\t}\n\n\t_attachImageEventHandlers() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\tthis._imageLoadError = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove previous handlers to avoid duplicates\n\t\timgEl.removeEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.removeEventListener(\"error\", this._onImageErrorBound);\n\n\t\t// Attach new handlers\n\t\timgEl.addEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.addEventListener(\"error\", this._onImageErrorBound);\n\n\t\t// Check existing image state\n\t\tthis._checkExistingImageState();\n\t}\n\n\t_checkExistingImageState() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\tthis._imageLoadError = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (imgEl.complete && imgEl.naturalWidth === 0) {\n\t\t\tthis._imageLoadError = true; // Already broken\n\t\t} else if (imgEl.complete && imgEl.naturalWidth > 0) {\n\t\t\tthis._imageLoadError = false; // Already loaded\n\t\t} else {\n\t\t\tthis._imageLoadError = false; // Pending load\n\t\t}\n\t}\n\n\t_detachImageEventHandlers() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\treturn;\n\t\t}\n\n\t\timgEl.removeEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.removeEventListener(\"error\", this._onImageErrorBound);\n\t}\n\n\t_onImageLoad(e: Event) {\n\t\tif (e.target !== this.imageEl) {\n\t\t\t(e.target as HTMLImageElement)?.removeEventListener(\"load\", this._onImageLoadBound);\n\t\t\treturn;\n\t\t}\n\t\tthis._imageLoadError = false;\n\t}\n\n\t_onImageError(e: Event) {\n\t\tif (e.target !== this.imageEl) {\n\t\t\t(e.target as HTMLImageElement)?.removeEventListener(\"error\", this._onImageErrorBound);\n\t\t\treturn;\n\t\t}\n\t\tthis._imageLoadError = true;\n\t}\n\n\tget accessibilityInfo() {\n\t\tif (this.mode === AvatarMode.Decorative) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\trole: this._role as AriaRole,\n\t\t\ttype: this._interactive ? Avatar.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar.i18nBundle.getText(AVATAR_TYPE_IMAGE),\n\t\t\tdescription: this.accessibleNameText,\n\t\t\tdisabled: this.disabled,\n\t\t};\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":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAI/E,OAAO,aAAa,MAAM,wDAAwD,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,wCAAwC,CAAC;AACxE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AAEnE,WAAW;AACX,OAAO,cAAc,MAAM,qBAAqB,CAAC;AAEjD,OAAO,EACN,cAAc,EACd,kBAAkB,EAClB,iBAAiB,GACjB,MAAM,mCAAmC,CAAC;AAE3C,SAAS;AACT,OAAO,SAAS,MAAM,kCAAkC,CAAC;AAIzD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAG/C,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAE/C,OAAO;AACP,OAAO,2CAA2C,CAAC;AAInD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAmBH,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,UAAU;IAuN9B;QACC,KAAK,EAAE,CAAC;QApNT;;;;;;WAMG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;;;;;;;;WAWG;QAEH,gBAAW,GAAG,KAAK,CAAC;QAEpB;;;;;;;;;;;;;WAaG;QAEH,SAAI,GAAoB,OAAO,CAAC;QAsBhC;;;;;;;;;;;;;;;;;;WAkBG;QAEH,iBAAY,GAAG,UAAU,CAAC;QAiB1B;;;;WAIG;QAEH,UAAK,GAAqB,QAAQ,CAAC;QAEnC;;;;WAIG;QAEH,SAAI,GAAoB,GAAG,CAAC;QAE5B;;;;;;WAMG;QAEH,gBAAW,GAA2B,MAAM,CAAC;QAE7C;;WAEG;QAEH,iBAAY,GAA2B,MAAM,CAAC;QAY9C;;;;;;;;;;WAUG;QAEH,4BAAuB,GAAkC,EAAE,CAAC;QAK5D;;WAEG;QAEH,cAAS,GAAG,KAAK,CAAC;QAElB;;WAEG;QAEH,oBAAe,GAAG,KAAK,CAAC;QA8CvB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACjC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IAChC,CAAC;IAED,IAAI,QAAQ;QACX,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,OAAO,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC1C,CAAC;IAED;;;;OAIG;IACH,IAAI,aAAa;QAChB,sFAAsF;QACtF,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAe,IAAI,UAAU,CAAC,CAAC,CAAC;IAChE,CAAC;IAED;;;;OAIG;IACH,IAAI,wBAAwB;QAC3B,kGAAkG;QAClG,OAAO,IAAI,CAAC,YAAY,CAAC,cAAc,CAAsB,IAAI,IAAI,CAAC,YAAY,CAAC;IACpF,CAAC;IAED,IAAI,KAAK;QACR,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,OAAO,QAAQ,CAAC;QACjB,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,UAAU,EAAE,CAAC;YACzC,OAAO,cAAc,CAAC;QACvB,CAAC;QACD,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,mBAAmB;QACtB,wEAAwE;QACxE,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,OAAO,SAAS,CAAC;QAClB,CAAC;QACD,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IACjE,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC;IAED,IAAI,YAAY;QACf,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACrF,CAAC;IAED,IAAI,aAAa;QAChB,0EAA0E;QAC1E,gFAAgF;QAChF,6EAA6E;QAC7E,8EAA8E;QAC9E,MAAM,aAAa,GAAG,eAAe,EACpC,eAAe,GAAG,yDAAyD,EAC3E,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAE/G,IAAI,gBAAgB,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,QAAQ,CAAC;QACtB,CAAC;QAED,OAAO,IAAI,CAAC;IACb,CAAC;IAED;;;;;;OAMG;IACH,IAAI,kBAAkB;QACrB,MAAM,YAAY,GAAG,QAAM,CAAC,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAC/D,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc;eACjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;QAC/E,MAAM,YAAY,GAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAA6B,EAAE,gBAAgB,CAAC;QAElF,OAAO,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,IAAI,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC;IACrD,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,YAAY,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAC3E,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,SAAS,EAAG,CAAC,aAAa,CAAC,2BAA2B,CAAC,CAAC;IACrE,CAAC;IAED,KAAK,CAAC,gBAAgB;QACrB,MAAM,cAAc,EAAE,CAAC;QACvB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;IAED,UAAU;QACT,IAAI,SAAS,EAAE,EAAE,CAAC;YACjB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,iBAAiB,IAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,iBAAiB,EACtE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC3B,CAAC;IAED,SAAS;QACR,IAAI,CAAC,iBAAiB,IAAI,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,iBAAiB,EACxE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAE1B,IAAI,CAAC,yBAAyB,EAAE,CAAC;IAClC,CAAC;IAED,YAAY;QACX,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC;IACF,CAAC;IAED,cAAc;QACb,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAG,CAAC;QACjC,MAAM,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACpE,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,cAAc,IAAI,cAAc,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,CAAC;QAE/G,IAAI,aAAa,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,OAAO;QACR,CAAC;QACD,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,GAAG,CAAC,4BAA4B,CAAC,CAAC;QACpE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC;IAC9E,CAAC;IAED,YAAY;QACX,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC;QACvE,IAAI,CAAC,kBAAkB,EAAE,SAAS,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;IAC3E,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,UAAU,CAAC,CAAgB;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACxB,OAAO;QACR,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAChB,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,oBAAoB;QACzC,CAAC;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,CAAC,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YACpD,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAED,UAAU;QACT,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAED,gBAAgB;QACf,MAAM,YAAY,GAAG,IAAI,CAAC,uBAAuB,CAAC,QAAQ,CAAC;QAE3D,wDAAwD;QACxD,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,EAAE,CAAC;YACzC,OAAO;QACR,CAAC;QAED,OAAO,YAAY,CAAC;IACrB,CAAC;IAED,yBAAyB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,OAAO;QACR,CAAC;QAED,+CAA+C;QAC/C,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC1D,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAE5D,sBAAsB;QACtB,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACvD,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAEzD,6BAA6B;QAC7B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IACjC,CAAC;IAED,wBAAwB;QACvB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,OAAO;QACR,CAAC;QAED,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,KAAK,CAAC,EAAE,CAAC;YAChD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,iBAAiB;QAC/C,CAAC;aAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,GAAG,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,iBAAiB;QAChD,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,CAAC,eAAe;QAC9C,CAAC;IACF,CAAC;IAED,yBAAyB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAC;YACZ,OAAO;QACR,CAAC;QAED,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC1D,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC7D,CAAC;IAED,YAAY,CAAC,CAAQ;QACpB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,CAAC,CAAC,MAA2B,EAAE,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACpF,OAAO;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;IAC9B,CAAC;IAED,aAAa,CAAC,CAAQ;QACrB,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9B,CAAC,CAAC,MAA2B,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACtF,OAAO;QACR,CAAC;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,IAAI,iBAAiB;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,UAAU,EAAE,CAAC;YACzC,OAAO,EAAE,CAAC;QACX,CAAC;QAED,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,KAAiB;YAC5B,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAM,CAAC,UAAU,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,QAAM,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC;YACtH,WAAW,EAAE,IAAI,CAAC,kBAAkB;YACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACvB,CAAC;IACH,CAAC;CACD,CAAA;AAjeA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCACX;AAejB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACR;AAiBpB;IADC,QAAQ,EAAE;oCACqB;AAoBhC;IADC,QAAQ,EAAE;oCACG;AAsBd;IADC,QAAQ,EAAE;4CACe;AAe1B;IADC,QAAQ,EAAE;wCACO;AAQlB;IADC,QAAQ,EAAE;qCACwB;AAQnC;IADC,QAAQ,EAAE;oCACiB;AAU5B;IADC,QAAQ,EAAE;2CACkC;AAM7C;IADC,QAAQ,EAAE;4CACmC;AAU9C;IADC,QAAQ,EAAE;8CACa;AAcxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACiC;AAG5D;IADC,QAAQ,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;8CACR;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACV;AAMlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;+CACvB;AAaxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;qCACZ;AAqBjC;IAPC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,uBAAuB,EAAE;YACxB,UAAU,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,kBAAkB,CAAC;YACnD,KAAK,EAAE,KAAK;SACZ;KACD,CAAC;qCACwB;AAGnB;IADN,IAAI,CAAC,oBAAoB,CAAC;gCACG;AAjNzB,MAAM;IAlBX,aAAa,CAAC;QACd,GAAG,EAAE,YAAY;QACjB,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,cAAc;KACxB,CAAC;IACF;;;;;;;OAOG;;IACF,KAAK,CAAC,OAAO,EAAE;QACf,OAAO,EAAE,IAAI;KACb,CAAC;GACI,MAAM,CA6eX;AAED,MAAM,CAAC,MAAM,EAAE,CAAC;AAEhB,eAAe,MAAM,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot, DefaultSlot } 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-strict.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, AriaRole } 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 {\n\tAVATAR_TOOLTIP,\n\tAVATAR_TYPE_BUTTON,\n\tAVATAR_TYPE_IMAGE,\n} 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 type AvatarBadge from \"./AvatarBadge.js\";\nimport AvatarSize from \"./types/AvatarSize.js\";\nimport type AvatarShape from \"./types/AvatarShape.js\";\nimport type AvatarColorScheme from \"./types/AvatarColorScheme.js\";\nimport AvatarMode from \"./types/AvatarMode.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 `mode` is set to `Interactive` or the deprecated `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\n * @implements {IAvatarGroupItem}\n * @public\n * @ui5subcomponent AvatarBadge\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 * @public\n * @since 2.11.0\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:** When set to `true`, this property takes precedence over the `mode` property,\n\t * and the avatar will be rendered as interactive (role=\"button\", focusable) regardless of the `mode` value.\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 * @deprecated Set `mode=\"Interactive\"` instead for the same functionality with proper accessibility.\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the mode of the component.\n\t *\n\t * **Note:**\n\t * - `Image` (default) - renders with role=\"img\"\n\t * - `Decorative` - renders with role=\"presentation\" and aria-hidden=\"true\", making it purely decorative\n\t * - `Interactive` - renders with role=\"button\", focusable (tabindex=\"0\"), and supports keyboard interaction\n\t *\n\t * **Note:** This property is ignored when the `interactive` property is set to `true`.\n\t * In that case, the avatar will always be rendered as interactive.\n\t * @default \"Image\"\n\t * @public\n\t * @since 2.20.0\n\t */\n\t@property()\n\tmode: `${AvatarMode}` = \"Image\";\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 or empty initials).\n\t * \t- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).\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 letters from an alphabetic script can be displayed as initials.\n\t * All scripts used in SAP-supported languages are accepted, except logographic and\n\t * pure syllabic scripts where the concept of initials does not apply: Han (Chinese,\n\t * Japanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.\n\t * If the letters do not fit inside the avatar shape at the current size, the fallback\n\t * icon is shown instead.\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\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/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_hasImage = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_imageLoadError = 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\n\t */\n\t@slot({ type: HTMLElement, \"default\": true })\n\timage!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t * Defines the optional badge that will be used for visual affordance.\n\t *\n\t * **Recommendation:** While badges are supported on all avatars, it is recommended\n\t * to use them with interactive avatars (via `mode=\"Interactive\"` or `interactive` attribute)\n\t * to provide better user experience and accessibility.\n\t *\n\t * **Note:** While the slot allows for custom badges, to achieve\n\t * the Fiori design, use the `ui5-avatar-badge` component.\n\t * @public\n\t * @since 1.7.0\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: [\"icon\", \"tooltip\", \"effectiveTooltip\"],\n\t\t\tslots: false,\n\t\t},\n\t})\n\tbadge!: Slot<HTMLElement>;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\t_handleResizeBound: ResizeObserverCallback;\n\t_onImageLoadBound: (e: Event) => void;\n\t_onImageErrorBound: (e: Event) => void;\n\n\tconstructor() {\n\t\tsuper();\n\n\t\tthis._handleResizeBound = this.handleResize.bind(this);\n\t\tthis._onImageLoadBound = this._onImageLoad.bind(this);\n\t\tthis._onImageErrorBound = this._onImageError.bind(this);\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._attachImageEventHandlers();\n\t\tthis._hasImage = this.hasImage;\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\tif (this._interactive) {\n\t\t\treturn \"button\";\n\t\t}\n\t\tif (this.mode === AvatarMode.Decorative) {\n\t\t\treturn \"presentation\";\n\t\t}\n\t\treturn \"img\";\n\t}\n\n\tget effectiveAriaHidden() {\n\t\t// interactive property takes precedence - never hidden when interactive\n\t\tif (this.interactive) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn this.mode === AvatarMode.Decorative ? \"true\" : undefined;\n\t}\n\n\tget _ariaHasPopup() {\n\t\treturn this._getAriaHasPopup();\n\t}\n\n\tget _interactive() {\n\t\treturn (this.interactive || this.mode === AvatarMode.Interactive) && !this.disabled;\n\t}\n\n\tget validInitials() {\n\t\t// initials should consist of only 1, 2 or 3 letters from any script where\n\t\t// initials are meaningful. Han (Chinese/Japanese kanji), Hiragana, and Katakana\n\t\t// are excluded because those scripts do not use initials. Korean (Hangul) is\n\t\t// allowed since Korean names can be abbreviated to their syllabic characters.\n\t\tconst validInitials = /^\\p{L}{1,3}$/u,\n\t\t\texcludedScripts = /[\\p{Script=Han}\\p{Script=Hiragana}\\p{Script=Katakana}]/u,\n\t\t\tareInitialsValid = this.initials && validInitials.test(this.initials) && !excludedScripts.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\t/**\n\t * Returns the accessible label for the avatar root element.\n\t * Uses `accessibleName` if provided, otherwise falls back to the default\n\t * \"Avatar\" text appended with `initials` if set.\n\t * The badge's effective tooltip, if present, is always appended at the end\n\t * so screen readers announce the badge state.\n\t */\n\tget accessibleNameText() {\n\t\tconst defaultLabel = Avatar.i18nBundle.getText(AVATAR_TOOLTIP);\n\t\tconst baseLabel = this.accessibleName\n\t\t\t|| (this.initials ? `${defaultLabel} ${this.initials}`.trim() : defaultLabel);\n\t\tconst badgeTooltip = (this.badge[0] as AvatarBadge | undefined)?.effectiveTooltip;\n\n\t\treturn badgeTooltip ? `${baseLabel} ${badgeTooltip}` : baseLabel;\n\t}\n\n\tget hasImage() {\n\t\treturn !!this.image.length && !this._imageLoadError;\n\t}\n\n\tget imageEl(): HTMLImageElement | null {\n\t\treturn this.image?.[0] instanceof HTMLImageElement ? this.image[0] : null;\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\n\t\tthis._detachImageEventHandlers();\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\t// aria-haspopup only applies when avatar is interactive\n\t\tif (!this._interactive || !ariaHaspopup) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn ariaHaspopup;\n\t}\n\n\t_attachImageEventHandlers() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\tthis._imageLoadError = false;\n\t\t\treturn;\n\t\t}\n\n\t\t// Remove previous handlers to avoid duplicates\n\t\timgEl.removeEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.removeEventListener(\"error\", this._onImageErrorBound);\n\n\t\t// Attach new handlers\n\t\timgEl.addEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.addEventListener(\"error\", this._onImageErrorBound);\n\n\t\t// Check existing image state\n\t\tthis._checkExistingImageState();\n\t}\n\n\t_checkExistingImageState() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\tthis._imageLoadError = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif (imgEl.complete && imgEl.naturalWidth === 0) {\n\t\t\tthis._imageLoadError = true; // Already broken\n\t\t} else if (imgEl.complete && imgEl.naturalWidth > 0) {\n\t\t\tthis._imageLoadError = false; // Already loaded\n\t\t} else {\n\t\t\tthis._imageLoadError = false; // Pending load\n\t\t}\n\t}\n\n\t_detachImageEventHandlers() {\n\t\tconst imgEl = this.imageEl;\n\t\tif (!imgEl) {\n\t\t\treturn;\n\t\t}\n\n\t\timgEl.removeEventListener(\"load\", this._onImageLoadBound);\n\t\timgEl.removeEventListener(\"error\", this._onImageErrorBound);\n\t}\n\n\t_onImageLoad(e: Event) {\n\t\tif (e.target !== this.imageEl) {\n\t\t\t(e.target as HTMLImageElement)?.removeEventListener(\"load\", this._onImageLoadBound);\n\t\t\treturn;\n\t\t}\n\t\tthis._imageLoadError = false;\n\t}\n\n\t_onImageError(e: Event) {\n\t\tif (e.target !== this.imageEl) {\n\t\t\t(e.target as HTMLImageElement)?.removeEventListener(\"error\", this._onImageErrorBound);\n\t\t\treturn;\n\t\t}\n\t\tthis._imageLoadError = true;\n\t}\n\n\tget accessibilityInfo() {\n\t\tif (this.mode === AvatarMode.Decorative) {\n\t\t\treturn {};\n\t\t}\n\n\t\treturn {\n\t\t\trole: this._role as AriaRole,\n\t\t\ttype: this._interactive ? Avatar.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar.i18nBundle.getText(AVATAR_TYPE_IMAGE),\n\t\t\tdescription: this.accessibleNameText,\n\t\t\tdisabled: this.disabled,\n\t\t};\n\t}\n}\n\nAvatar.define();\n\nexport default Avatar;\nexport type {\n\tAvatarAccessibilityAttributes,\n};\n"]}

package/dist/AvatarGroup.d.ts

@@ -83,7 +83,7 @@ type AvatarGroupClickEventDetail = {
  * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  * @constructor
  * @extends UI5Element
- * @since 1.0.0-rc.11
+ * @since 1.0.0
  * @public
  */
 declare class AvatarGroup extends UI5Element {
@@ -150,7 +150,7 @@ declare class AvatarGroup extends UI5Element {
      *
      * **Note:** If this slot is not used, the component will display the built-in overflow button.
      * @public
-     * @since 1.0.0-rc.13
+     * @since 1.0.0
      */
     overflowButton: Slot<IButton>;
     static i18nBundle: I18nBundle;

package/dist/AvatarGroup.js

@@ -108,7 +108,7 @@ const offsets = {
  * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
  * @constructor
  * @extends UI5Element
- * @since 1.0.0-rc.11
+ * @since 1.0.0
  * @public
  */
 let AvatarGroup = AvatarGroup_1 = class AvatarGroup extends UI5Element {
@@ -454,7 +454,7 @@ AvatarGroup = AvatarGroup_1 = __decorate([
      * @param {HTMLElement} targetRef The DOM ref of the clicked item.
      * @param {boolean} overflowButtonClicked indicates if the overflow button is clicked
      * @public
-     * @since 1.0.0-rc.11
+     * @since 1.0.0
      */
     ,
     event("click")
@@ -462,7 +462,7 @@ AvatarGroup = AvatarGroup_1 = __decorate([
      * Fired when the count of visible `ui5-avatar` elements in the
      * component has changed
      * @public
-     * @since 1.0.0-rc.13
+     * @since 1.0.0
      */
     ,
     event("overflow")

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 type { DefaultSlot, Slot } 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-strict.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\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.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\n\tslotDetails!: {\n\t\toverflowButton: IButton;\n\t\titems: IAvatarGroupItem;\n\t}\n\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 accessible name of the AvatarGroup.\n \t* When provided, this will override the default aria-label text.\n \t* @default undefined\n \t* @public\n \t* @since 2.12.0\n \t*/\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n \t* Receives id(s) of the elements that describe the AvatarGroup.\n \t* When provided, this will be used as aria-labelledby instead of aria-label.\n \t* @default undefined\n \t* @public\n \t* @since 2.12.0\n \t*/\n\t@property()\n\taccessibleNameRef?: 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!: DefaultSlot<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!: Slot<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\t/**\n\t * Returns the actual avatar items, handling transitive slotting.\n\t * @private\n\t */\n\tget _slottedItems(): IAvatarGroupItem[] {\n\t\treturn this.getSlottedNodes<IAvatarGroupItem>(\"items\");\n\t}\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._slottedItems.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._slottedItems.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._slottedItems.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\tif (this.accessibleName || this.accessibleNameRef) {\n\t\t\treturn getEffectiveAriaLabelText(this);\n\t\t}\n\t\t// Fallback to existing default behavior\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._slottedItems.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._slottedItems[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._slottedItems[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._slottedItems.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\t// In Group mode: avatars are not individually interactive, but visual states are applied at group level\n\t\t\t// In Individual mode: each avatar is interactive\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\tgetFocusDomRef() {\n\t\treturn this._itemNavigation._getCurrentItem();\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._slottedItems.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._slottedItems[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._slottedItems.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 type { DefaultSlot, Slot } 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-strict.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\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.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\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\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\n */\n@event(\"overflow\")\nclass AvatarGroup extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": AvatarGroupClickEventDetail\n\t\t\"overflow\": void\n\t}\n\n\tslotDetails!: {\n\t\toverflowButton: IButton;\n\t\titems: IAvatarGroupItem;\n\t}\n\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 accessible name of the AvatarGroup.\n \t* When provided, this will override the default aria-label text.\n \t* @default undefined\n \t* @public\n \t* @since 2.12.0\n \t*/\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n \t* Receives id(s) of the elements that describe the AvatarGroup.\n \t* When provided, this will be used as aria-labelledby instead of aria-label.\n \t* @default undefined\n \t* @public\n \t* @since 2.12.0\n \t*/\n\t@property()\n\taccessibleNameRef?: 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!: DefaultSlot<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\n\t */\n\t@slot()\n\toverflowButton!: Slot<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\t/**\n\t * Returns the actual avatar items, handling transitive slotting.\n\t * @private\n\t */\n\tget _slottedItems(): IAvatarGroupItem[] {\n\t\treturn this.getSlottedNodes<IAvatarGroupItem>(\"items\");\n\t}\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._slottedItems.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._slottedItems.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._slottedItems.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\tif (this.accessibleName || this.accessibleNameRef) {\n\t\t\treturn getEffectiveAriaLabelText(this);\n\t\t}\n\t\t// Fallback to existing default behavior\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._slottedItems.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._slottedItems[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._slottedItems[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._slottedItems.forEach((avatar, index) => {\n\t\t\tconst colorIndex = this._getNextBackgroundColor();\n\t\t\t// In Group mode: avatars are not individually interactive, but visual states are applied at group level\n\t\t\t// In Individual mode: each avatar is interactive\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\tgetFocusDomRef() {\n\t\treturn this._itemNavigation._getCurrentItem();\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._slottedItems.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._slottedItems[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._slottedItems.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/Bar.d.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type BarDesign from "./types/BarDesign.js";
 import type BarAccessibleRole from "./types/BarAccessibleRole.js";
+import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 /**
  * @class
  *
@@ -16,6 +17,8 @@ import type BarAccessibleRole from "./types/BarAccessibleRole.js";
  *
  * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
  *
+ * **Note:** The Bar is a structural layout component for organizing page areas (header, footer, subheader) and not an action-oriented toolbar. To group action controls with full keyboard navigation support, use the Toolbar component instead.
+ *
  * ### Responsive Behavior
  * The default slot will be centered in the available space between the startContent and the endContent areas,
  * therefore it might not always be centered in the entire bar.
@@ -37,7 +40,7 @@ import type BarAccessibleRole from "./types/BarAccessibleRole.js";
  * @constructor
  * @extends UI5Element
  * @public
- * @since 1.0.0-rc.11
+ * @since 1.0.0
  */
 declare class Bar extends UI5Element {
     /**
@@ -49,16 +52,16 @@ declare class Bar extends UI5Element {
     /**
      * Specifies the ARIA role applied to the component for accessibility purposes.
      *
-     * **Note:**
-     *
-     * - By default, accessibleRole is set to "Toolbar", which renders the ARIA role "toolbar".
-     *
-     * - Use the default accessibleRole value "Toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+     * **Note:** By default, no ARIA role is applied ("None"). The Bar derives its semantics
+     * from the container it is placed in, such as a page header or footer.
      *
-     * - If there is only one or no active element, set accessibleRole to "None" to avoid rendering the ARIA role "toolbar", as that role implies a grouping of multiple interactive controls.
+     * **Note:** The "Toolbar" value is deprecated. The Bar is a structural layout container and does not
+     * support toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more
+     * interactive elements are needed, use the `ui5-toolbar` component instead, which provides the correct
+     * toolbar role and arrow-key navigation between components.
      *
      * @public
-     * @default "Toolbar"
+     * @default "None"
      * @since 2.10.0
      *
      */
@@ -102,6 +105,6 @@ declare class Bar extends UI5Element {
     handleResize(): void;
     onEnterDOM(): void;
     onExitDOM(): void;
-    get effectiveRole(): import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.AriaRole | undefined;
+    get effectiveRole(): AriaRole | undefined;
 }
 export default Bar;

package/dist/Bar.js

@@ -29,6 +29,8 @@ import BarCss from "./generated/themes/Bar.css.js";
  *
  * **Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.
  *
+ * **Note:** The Bar is a structural layout component for organizing page areas (header, footer, subheader) and not an action-oriented toolbar. To group action controls with full keyboard navigation support, use the Toolbar component instead.
+ *
  * ### Responsive Behavior
  * The default slot will be centered in the available space between the startContent and the endContent areas,
  * therefore it might not always be centered in the entire bar.
@@ -50,7 +52,7 @@ import BarCss from "./generated/themes/Bar.css.js";
  * @constructor
  * @extends UI5Element
  * @public
- * @since 1.0.0-rc.11
+ * @since 1.0.0
  */
 let Bar = class Bar extends UI5Element {
     get accInfo() {
@@ -76,20 +78,20 @@ let Bar = class Bar extends UI5Element {
         /**
          * Specifies the ARIA role applied to the component for accessibility purposes.
          *
-         * **Note:**
-         *
-         * - By default, accessibleRole is set to "Toolbar", which renders the ARIA role "toolbar".
-         *
-         * - Use the default accessibleRole value "Toolbar" only when the component contains two or more active, interactive elements (such as buttons, links, or input fields) within the bar.
+         * **Note:** By default, no ARIA role is applied ("None"). The Bar derives its semantics
+         * from the container it is placed in, such as a page header or footer.
          *
-         * - If there is only one or no active element, set accessibleRole to "None" to avoid rendering the ARIA role "toolbar", as that role implies a grouping of multiple interactive controls.
+         * **Note:** The "Toolbar" value is deprecated. The Bar is a structural layout container and does not
+         * support toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more
+         * interactive elements are needed, use the `ui5-toolbar` component instead, which provides the correct
+         * toolbar role and arrow-key navigation between components.
          *
          * @public
-         * @default "Toolbar"
+         * @default "None"
          * @since 2.10.0
          *
          */
-        this.accessibleRole = "Toolbar";
+        this.accessibleRole = "None";
         this._handleResizeBound = this.handleResize.bind(this);
     }
     handleResize() {
@@ -113,7 +115,7 @@ let Bar = class Bar extends UI5Element {
         }, this);
     }
     get effectiveRole() {
-        return this.accessibleRole.toLowerCase() === "toolbar" ? "toolbar" : undefined;
+        return this.accessibleRole === "Toolbar" ? "toolbar" : undefined;
     }
 };
 __decorate([

package/dist/Bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.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 * - By default, accessibleRole is set to \"Toolbar\", which renders the ARIA role \"toolbar\".\n\t *\n\t * - Use the default accessibleRole value \"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, set accessibleRole to \"None\" to avoid rendering the ARIA role \"toolbar\", as that role 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 accessible ARIA name of the component.\n\t * @default undefined\n\t * @since 2.16.0\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the bar.\n\t * @default undefined\n\t * @since 2.16.0\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t* Defines the content at the start of the bar.\n\t* @public\n\t*/\n\t@slot()\n\tstartContent!: Slot<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!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t* Defines the content at the end of the bar.\n\t* @public\n\t*/\n\t@slot()\n\tendContent!: Slot<HTMLElement>;\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.ariaLabelText,\n\t\t\t\"role\": this.effectiveRole,\n\t\t};\n\t}\n\n\tget ariaLabelText(): string | undefined {\n\t\tif (this.accessibleName || this.accessibleNameRef) {\n\t\t\treturn getEffectiveAriaLabelText(this);\n\t\t}\n\n\t\treturn this.design;\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"]}
+{"version":3,"file":"Bar.js","sourceRoot":"","sources":["../src/Bar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } 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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { getEffectiveAriaLabelText } from \"@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.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 * **Note:** The Bar is a structural layout component for organizing page areas (header, footer, subheader) and not an action-oriented toolbar. To group action controls with full keyboard navigation support, use the Toolbar component instead.\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\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:** By default, no ARIA role is applied (\"None\"). The Bar derives its semantics\n\t * from the container it is placed in, such as a page header or footer.\n\t *\n\t * **Note:** The \"Toolbar\" value is deprecated. The Bar is a structural layout container and does not\n\t * support toolbar keyboard interactions (such as arrow-key navigation between components). When 3 or more\n\t * interactive elements are needed, use the `ui5-toolbar` component instead, which provides the correct\n\t * toolbar role and arrow-key navigation between components.\n\t *\n\t * @public\n\t * @default \"None\"\n\t * @since 2.10.0\n\t *\n\t */\n\t@property()\n\taccessibleRole: `${BarAccessibleRole}` = \"None\";\n\n\t/**\n\t * Defines the accessible ARIA name of the component.\n\t * @default undefined\n\t * @since 2.16.0\n\t * @public\n\t */\n\t@property()\n\taccessibleName?: string;\n\n\t/**\n\t * Receives id(or many ids) of the elements that label the bar.\n\t * @default undefined\n\t * @since 2.16.0\n\t * @public\n\t */\n\t@property()\n\taccessibleNameRef?: string;\n\n\t/**\n\t* Defines the content at the start of the bar.\n\t* @public\n\t*/\n\t@slot()\n\tstartContent!: Slot<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!: DefaultSlot<HTMLElement>;\n\n\t/**\n\t* Defines the content at the end of the bar.\n\t* @public\n\t*/\n\t@slot()\n\tendContent!: Slot<HTMLElement>;\n\n\t_handleResizeBound: () => void;\n\n\tget accInfo() {\n\t\treturn {\n\t\t\t\"label\": this.ariaLabelText,\n\t\t\t\"role\": this.effectiveRole,\n\t\t};\n\t}\n\n\tget ariaLabelText(): string | undefined {\n\t\tif (this.accessibleName || this.accessibleNameRef) {\n\t\t\treturn getEffectiveAriaLabelText(this);\n\t\t}\n\n\t\treturn this.design;\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(): AriaRole | undefined {\n\t\treturn this.accessibleRole === \"Toolbar\" ? \"toolbar\" : undefined;\n\t }\n}\n\nBar.define();\n\nexport default Bar;\n"]}

package/dist/Breadcrumbs.d.ts

@@ -54,7 +54,8 @@ type FocusAdaptor = ITabbable & {
  * @extends UI5Element
  * @implements {IToolbarItemContent}
  * @public
- * @since 1.0.0-rc.15
+ * @since 1.0.0
+ * @ui5subcomponent BreadcrumbsItem
  */
 declare class Breadcrumbs extends UI5Element implements IToolbarItemContent {
     eventDetails: {