@sapudex/web-components 0.192.4 → 0.224.0

package/src/ControlButton.ts

@@ -5,12 +5,7 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-
-export enum ControlButtonSize {
-  Small = "Small",
-  Medium = "Medium",
-  Large = "Large",
-}
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -23,7 +18,7 @@ export enum ControlButtonSize {
  * For the <code>udex-control-button</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/ControlButton.js";</code>
+ * <code>import "@sapudex/web-components/dist/ControlButton.js";</code>
  *
  * @constructor
  * @extends Button
@@ -34,6 +29,7 @@ export enum ControlButtonSize {
   renderer: litRender,
   styles: [Button.styles, ControlButtonCss],
 })
+
 class UDExControlButton extends Button {
   /**
    * Defines the size of the button.
@@ -41,8 +37,8 @@ class UDExControlButton extends Button {
    * @default "Medium"
    * @public
    */
-  @property({ type: ControlButtonSize, defaultValue: ControlButtonSize.Medium })
-    size!: `${ControlButtonSize}`;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
 
   /**
    * Determines whether the component is displayed as read-only.
@@ -51,6 +47,31 @@ class UDExControlButton extends Button {
    */
   @property({ type: Boolean })
     readonly!: boolean;
+
+  /**
+   * Determines Combobox role for the button.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isComboboxRole?: boolean;
+
+  async onBeforeRendering() {
+    await super.onBeforeRendering();
+    if (this.readonly) {
+      this.nonInteractive = true;
+    }
+  }
+
+  onAfterRendering() {
+    if (this._isComboboxRole) {
+      this.setComboboxRole();
+    }
+  }
+
+  setComboboxRole(): void {
+    this.shadowRoot?.querySelector(".ui5-button-root")?.setAttribute("role", "combobox");
+  }
 }
 
 UDExControlButton.define();

package/src/CountrySelector.hbs

@@ -8,7 +8,6 @@
         @ui5-after-open="{{_dropdownAfterOpen}}"
         @ui5-before-close="{{_dropdownBeforeClose}}"
         @ui5-after-close="{{_dropdownAfterClose}}"
-        @click-trigger="{{handleTriggerClick}}"
         @ui5-submit-search-value="{{handleSubmitSearch}}"
         @ui5-handle-value-search="{{handleValueSearch}}"
         @ui5-handle-value-reset="{{handleResetSearch}}"
@@ -56,7 +55,7 @@
             ?disabled="{{disabled}}"
             ?readonly="{{readonly}}"
             ?displayonly="{{displayonly}}"
-            @click-trigger="{{handleKeyDown}}"
+            @click="{{handleTriggerClick}}"
             @mousedown="{{handleInputMouseDown}}"
             icon="{{triggerIcon}}"
             accessible-icon-name="{{effectiveAriaLabel}}"

package/src/CountrySelector.ts

@@ -5,7 +5,6 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
-  isEnter, isSpace, isBackSpace, isDelete,
   isEscape,
   isTabPrevious,
   isTabNext,
@@ -31,7 +30,6 @@ import { Country, CountryListDB } from "./data/CountryListISO3166.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import isLetterKey from "./utils/isLetterKeyPressed.js";
 
 /**
  * @class
@@ -44,7 +42,7 @@ import isLetterKey from "./utils/isLetterKeyPressed.js";
  * For the <code>udex-country-selector</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/CountrySelector.js";</code>
+ * <code>import "@sapudex/web-components/dist/CountrySelector.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -132,7 +130,7 @@ import isLetterKey from "./utils/isLetterKeyPressed.js";
   },
 })
 
-class CountrySelector extends UDExSearchableListBase {
+class UDExCountrySelector extends UDExSearchableListBase {
   /**
    * Defines label text for the input field.
    *
@@ -278,7 +276,7 @@ class CountrySelector extends UDExSearchableListBase {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    CountrySelector.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExCountrySelector.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   constructor() {
@@ -343,7 +341,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get searchableList() {
-    return executeTemplate(CountrySelector.searchableListBaseTemplate, this);
+    return executeTemplate(UDExCountrySelector.searchableListBaseTemplate, this);
   }
 
   static get searchableListBaseTemplate() {
@@ -420,6 +418,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
+    this.dropdownClose();
     this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
@@ -428,38 +427,7 @@ class CountrySelector extends UDExSearchableListBase {
     const target = e.target as HTMLElement;
     const item: any = this.getItemFromList(target?.getAttribute("data-token-id") as string);
     this.selectedCountry = this.countryList.find(country => country.iso === item._id);
-    this.dropDownClose();
-  }
-
-  handleKeyDown(e: KeyboardEvent) {
-    if (this.disabled || this.readonly || this.displayonly) {
-      return;
-    }
-
-    const key = e.key;
-
-    const isTabNextPress = isTabNext(e) && !this._search;
-    const isTabPrevPress = isTabPrevious(e) && !this._search;
-    const isEscPress = isEscape(e) && !this._search;
-
-    if (isEnter(e) || isSpace(e)) {
-      if (this._dropdown.open) {
-        this.dropDownClose();
-      } else {
-        this._dropdown.onTriggerClick();
-      }
-    }
-    if (isTabNextPress || isTabPrevPress || isEscPress) {
-      this._dropdown.open = false;
-    }
-    if (isBackSpace(e) || isDelete(e)) {
-      this.selectedCountry = undefined;
-      this._render();
-    }
-    if (isLetterKey(key)) {
-      e.preventDefault();
-      this.handleKeyPress(e);
-    }
+    this.dropdownClose();
   }
 
   handleKeyPress(keyEvent: KeyboardEvent) {
@@ -481,9 +449,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleTriggerClick() {
-    if (this._dropdown.open) {
-      this.dropDownClose();
-    }
+    this._dropdown.open = !this._dropdown.open;
   }
 
   handleValueSearch(e:CustomEvent) {
@@ -498,7 +464,7 @@ class CountrySelector extends UDExSearchableListBase {
     const keyEvent = e.detail as KeyboardEvent;
 
     if (isTabPrevious(keyEvent)) {
-      this.dropDownClose();
+      this.dropdownClose();
     }
     if (isEscape(keyEvent)) {
       keyEvent.preventDefault();
@@ -508,11 +474,11 @@ class CountrySelector extends UDExSearchableListBase {
 
   handleKeyDownDropdown(e: KeyboardEvent) {
     if ((isTabNext(e) && (e.target !== this._search || this.isListEmpty))) {
-      this.dropDownClose();
+      this.dropdownClose();
     }
   }
 
-  dropDownClose(): void {
+  dropdownClose(): void {
     this.getDropdownPopover()?.close(false, false, true);
   }
 
@@ -550,10 +516,10 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get effectiveAriaLabel(): string {
-    return this.label || this.accessibleName || CountrySelector.i18nBundle.getText(COUNTRY_SELECT);
+    return this.label || this.accessibleName || UDExCountrySelector.i18nBundle.getText(COUNTRY_SELECT);
   }
 }
 
-CountrySelector.define();
+UDExCountrySelector.define();
 
-export default CountrySelector;
+export default UDExCountrySelector;

package/src/DatePicker.ts

@@ -46,7 +46,7 @@ export type DatePickerSelectionChangeEventDetail = {
  * For the <code>udex-date-picker</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/DatePicker.js";</code>
+ * <code>import "@sapudex/web-components/dist/DatePicker.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -211,7 +211,7 @@ class UDExDatePicker extends DateComponentBase {
   private _prevDelimiter!: string | null;
 
   static async onDefine(): Promise<void> {
-    UDExDatePicker.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExDatePicker.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   async _getResponsePopover(): Promise<UDExDropdown> {
@@ -510,7 +510,11 @@ class UDExDatePicker extends DateComponentBase {
       return;
     }
 
-    this.showCalendar();
+    if (this.responsivePopover?.open) {
+      this.hideCalendar();
+    } else {
+      this.showCalendar();
+    }
   }
 
   /**

package/src/Dropdown.hbs

@@ -23,10 +23,10 @@
         horizontal-align="{{horizontalAlign}}"
         accessible-name="{{accessibleName}}"
         accessible-role="{{accessibleRole}}"
-        @ui5-after-open={{afterDropdownOpen}}
-        @ui5-before-open={{beforeDropdownOpen}}
-        @ui5-after-close={{afterDropdownClose}}
-        @ui5-before-close={{beforeDropdownClose}}>
+        @ui5-after-open="{{afterDropdownOpen}}"
+        @ui5-before-open="{{beforeDropdownOpen}}"
+        @ui5-after-close="{{afterDropdownClose}}"
+        @ui5-before-close="{{beforeDropdownClose}}">
         {{#if hasHeaderSlot}}
             <slot slot="header" name="header"></slot>
         {{/if}}

package/src/Dropdown.ts

@@ -27,7 +27,7 @@ import DropdownCss from "./generated/themes/Dropdown.css";
  * For the <code>udex-dropdown</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Dropdown.js";</code>
+ * <code>import "@sapudex/web-components/dist/Dropdown.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -203,7 +203,7 @@ class UDExDropdown extends UI5Element {
   _breakpointSizeXS = 640;
 
   static async onDefine(): Promise<void> {
-    UDExDropdown.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExDropdown.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   onAfterRendering() {

package/src/FilterMenu.ts

@@ -11,6 +11,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
 import Popover from "@ui5/webcomponents/dist/Popover.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
@@ -46,7 +47,7 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
  * For the <code>udex-filter-menu</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/UDExFilterMenu.js";</code>
+ * <code>import "@sapudex/web-components/dist/UDExFilterMenu.js";</code>
  *
  * @constructor
  * @extends UDExSearchableListBase
@@ -61,6 +62,7 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
   dependencies: [
     Popover,
     Icon,
+    BusyIndicator,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,

package/src/FilterMenuGroupHeader.ts

@@ -15,7 +15,7 @@ import UDExFilterMenuItem from "./FilterMenuItem.js";
  * For the <code>udex-filter-menu-group-header</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/FilterMenuGroupHeader.js";</code>
+ * <code>import "@sapudex/web-components/dist/FilterMenuGroupHeader.js";</code>
  *
  * @constructor
  * @extends UDExListGroupHeaderBase

package/src/FilterMenuItem.ts

@@ -13,7 +13,7 @@ import UDExListItemBase from "./ListItemBase.js";
  * For the <code>udex-filter-menu-item</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/FilterMenuItem.js";</code>
+ * <code>import "@sapudex/web-components/dist/FilterMenuItem.js";</code>
  *
  * @constructor
  * @extends UDExListItemBase

package/src/FilterMenuSelectAll.ts

@@ -13,7 +13,7 @@ import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
  * For the <code>udex-filter-menu-select-all</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/FilterMenuSelectAll.js";</code>
+ * <code>import "@sapudex/web-components/dist/FilterMenuSelectAll.js";</code>
  *
  * @constructor
  * @extends UDExListGroupHeaderBase

package/src/Footer.hbs

@@ -34,9 +34,13 @@
                 {{#if localCountryNumbersLink}}
                   <p class="udex-footer__remark">
                     {{completeListTitle}}
-                    <a href="{{this.localCountryNumbersLink}}" @click="{{_onContactPhoneLocalNumbersClick}}">
+                    <udex-link
+                      class="udex-footer__remark-link"
+                      @click="{{_onContactPhoneLocalNumbersClick}}"
+                      href="{{this.localCountryNumbersLink}}"
+                      design="Subtle">
                       {{localCountryTitle}}.
-                    </a>
+                    </udex-link>
                   </p>
                 {{/if}}
               </div>

package/src/Footer.ts

@@ -18,7 +18,10 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
+import UDExLink from "./Link.js";
 import UDExDivider from "./Divider.js";
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
@@ -42,16 +45,8 @@ import {
   ICP_NUMBER,
 } from "./generated/i18n/i18n-defaults.js";
 
-const BreakpointSizeS: number = 979;
 export const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
 export type FooterLink = {
   title: string;
   url: string;
@@ -106,7 +101,7 @@ export const FooterDetailedEvent = {
  * For the <code>udex-footer</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Footer.js";</code>
+ * <code>import "@sapudex/web-components/dist/Footer.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -120,7 +115,7 @@ export const FooterDetailedEvent = {
   renderer: litRender,
   styles: [FooterCss],
   template: FooterTemplate,
-  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider],
+  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider, UDExLink],
 })
 /**
  * Triggered on click interaction with logo in footer
@@ -367,7 +362,7 @@ class UDExFooter extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
-    UDExFooter.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExFooter.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   _handleResizeBound: ResizeObserverCallback;
@@ -494,7 +489,7 @@ class UDExFooter extends UI5Element {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth <= BreakpointSizeS;
+    return BreakpointUtils.isAtMost("S");
   }
 
   get isChineseLang(): boolean {

package/src/HeroBanner.hbs

@@ -1,6 +1,6 @@
-<div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}">
+<div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}; {{wrapperBackgroundImage}}">
   {{#if hasBackgroundVideo}}
-    <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown={{_handleKeydown}} >
+    <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="{{_handleKeydown}}">
         <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
             <source src="{{backgroundVideo}}" type="video/mp4" />
         </video>
@@ -14,8 +14,8 @@
             <slot id="udex-hero-banner__content" name="content" part="content"></slot>
             <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
         </div>
-        <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click={{_toggleMediaButton}}>
-            <ui5-icon name={{mediaButtonIconName}}></ui5-icon>
+        <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="{{_toggleMediaButton}}">
+            <ui5-icon name="{{mediaButtonIconName}}"></ui5-icon>
         </button>
     </div>
     {{else}}

package/src/HeroBanner.ts

@@ -89,7 +89,18 @@ class UDExHeroBanner extends UI5Element {
    * @public
    */
   @property({ type: String })
-    backgroundColor?: string;
+  backgroundColor?: string;
+
+  /**
+   * Allows control over the background-image to set css gradient.
+   * Value provided should be compatible with standard CSS linear-gradient rendering, e.g:
+   *  linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
+   *  linear-gradient(to bottom, var(--udexColorBlue2) 0%,var(--udexColorBlue4) 100%);
+   *
+   * @public
+   */
+  @property({ type: String })
+    backgroundGradient?: string;
 
   @property({ type: Boolean, noAttribute: true })
     _isVideoRunning?: boolean;
@@ -121,16 +132,20 @@ class UDExHeroBanner extends UI5Element {
   @slot()
     backgroundPicture?: Array<HTMLElement>;
 
-  get hasBackgroundImage() {
+  get hasBackgroundImage(): boolean {
     return !!this.backgroundImage;
   }
-  get hasBackgroundVideo() {
+  get hasBackgroundVideo(): boolean {
     return !!this.backgroundVideo;
   }
-  get wrapperBackgroundColor() {
+  get wrapperBackgroundColor(): string {
     return this.backgroundColor ? this.backgroundColor : "transparent";
   }
 
+  get wrapperBackgroundImage(): string {
+    return this.backgroundGradient ? `background-image:${this.backgroundGradient}` : "";
+  }
+
   /**
    * Determines if the video should autoplay based on the user's global preference.
    */

package/src/InputGroup.ts

@@ -41,7 +41,7 @@ export enum Orientation {
  * For the <code>udex-input-group</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/InputGroup.js";</code>
+ * <code>import "@sapudex/web-components/dist/InputGroup.js";</code>
  *
  * @constructor
  * @extends UI5Element
@@ -104,7 +104,7 @@ class UDExInputGroup extends UI5Element {
   static i18nBundle: I18nBundle;
 
   static async onDefine() {
-    UDExInputGroup.i18nBundle = await getI18nBundle("@udex/web-components");
+    UDExInputGroup.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
   get _items() {

package/src/Link.hbs

@@ -10,18 +10,18 @@
 	aria-label="{{ariaLabelText}}"
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
-	@focusin={{_onfocusin}}
-	@focusout={{_onfocusout}}
-	@click={{_onclick}}
-	@keydown={{_onkeydown}}
-	@keyup={{_onkeyup}}>
-    {{#if startIcon}}
+	@focusin="{{_onfocusin}}"
+	@focusout="{{_onfocusout}}"
+	@click="{{_onclick}}"
+	@keydown="{{_onkeydown}}"
+	@keyup="{{_onkeyup}}">
+    {{#if hasStartIcon}}
         <ui5-icon class="udex-link__icon udex-link__icon--icon-start" name="{{icon}}"></ui5-icon>
     {{/if}}
     <span class="udex-link__content">
         <slot></slot>
     </span>
-    {{#if endIcon}}
+    {{#if hasEndIcon}}
         <ui5-icon class="udex-link__icon udex-link__icon--icon-end" name="{{icon}}"></ui5-icon>
     {{/if}}
     {{#if hasLinkType}}

package/src/Link.ts

@@ -11,6 +11,11 @@ import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
 import LinkCss from "./generated/themes/Link.css.js";
 import IconPlacement from "./types/IconPlacement.js";
 
+export type AttributeValuePair = {
+  attribute: string,
+  value: string
+};
+
 /**
  * @class
  *
@@ -22,7 +27,7 @@ import IconPlacement from "./types/IconPlacement.js";
  * For the <code>udex-link</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import "@udex/web-components/dist/Link.js";</code>
+ * <code>import "@sapudex/web-components/dist/Link.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -56,15 +61,22 @@ class UDExLink extends Link {
     @property({ type: IconPlacement, defaultValue: IconPlacement.End })
       iconPlacement?: `${IconPlacement}`;
 
-    get startIcon() {
-      return this.icon && this.iconPlacement === IconPlacement.Start;
+    _setCustomAttributes(attributes: AttributeValuePair[]): void {
+      if (attributes) {
+        const link = this.shadowRoot!.querySelector("a")!;
+        attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));
+      }
+    }
+
+    get hasStartIcon(): boolean {
+      return !!this.icon && this.iconPlacement === IconPlacement.Start;
     }
 
-    get endIcon() {
-      return this.icon && this.iconPlacement === IconPlacement.End;
+    get hasEndIcon(): boolean {
+      return !!this.icon && this.iconPlacement === IconPlacement.End;
     }
 
-    get linkClass() {
+    get linkClass(): string {
       return this.icon ? "udex-link udex-link--with-icon" : "udex-link";
     }
 }

package/src/List.hbs

@@ -13,7 +13,8 @@
                 class="udex-list"
                 role="{{accessibleRole}}"
                 aria-labelledby="{{ariaLabelledBy}}"
-                aria-label="{{accessibleName}}">
+                aria-label="{{accessibleName}}"
+                aria-busy="{{ariaBusy}}">
                 <slot></slot>
             </ul>
         </div>
@@ -26,7 +27,8 @@
         class="udex-list"
         role="{{accessibleRole}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}">
+        aria-label="{{accessibleName}}"
+        aria-busy="{{ariaBusy}}">
         <slot></slot>
     </ul>
 {{/if}}