@sapudex/web-components 2.50.0 → 2.52.0

package/dist/messagebundle_nl.properties

@@ -3,3 +3,129 @@ OVERVIEW=Overzicht
 LOGOUT=Afmelden
 MAIN_LINKS=Belangrijkste links
 BACK_TO_TOP=Terug naar boven
+COUNT=Aantal
+OF=van
+PAGINATION_PAGE=Pagina
+SELECTED=Geselecteerd
+UNSELECTED=Niet geselecteerd
+INDETERMINATE=Onbepaald
+EDIT_BUTTON=Bewerken
+DELETE_BUTTON=Wissen
+BACK_TO_REGION_LIST=Terug naar regiolijst
+BUTTON_ARIA_TYPE_PRIMARY=Primair
+BUTTON_ARIA_TYPE_SECONDARY=Secundair
+BUTTON_ARIA_TYPE_TERTIARY=Tertiair
+BUTTON_ARIA_TYPE_WARNING=Waarschuwing
+BUTTON_ARIA_TYPE_POSITIVE=Positief
+BUTTON_ARIA_TYPE_NEGATIVE=Negatief
+BUTTON_ARIA_EMPHASIZED=Benadrukt
+BUTTON_ARIA_DEFAULT=Standaard
+BUTTON_ARIA_TRANSPARENT=Transparant
+BUTTON_ARIA_ATTENTION=Let op
+DATEPICKER_DATE_DESCRIPTION=Datuminvoer
+TOGGLED=Omgeschakeld
+FIRST_PAGE=Eerste pagina
+LAST_PAGE=Laatste pagina
+PREVIOUS_PAGE=Vorige pagina
+NEXT_PAGE=Volgende pagina
+CURRENT_PAGE=Huidige pagina
+ACTIVATE_PAGE=Paginanummer activeren
+SUGGESTED_TEXT=voorgestelde zoekopdrachten
+ACCESSIBLE_NAME_SEARCH_ICON=Zoeken
+TOOLTIP_VOICE_BUTTON=Spraak
+TOOLTIP_SUBMIT_BUTTON=Verzenden
+LISTENING=Luisteren
+AVAILABLE_VALUES=Beschikbare waarden
+RECOMMENDED_TEXT=Aanbevolen pagina's
+EXPAND_ALL=Alles weergeven
+COLLAPSE_ALL=Alles verbergen
+MORE=Meer
+ATTENTION_BADGE=Notificatiebadge
+READ_MORE=Lees verder
+READ_LESS=Minder lezen
+SHOW_MORE=Meer weergeven
+SHOW_LESS=Minder weergeven
+RATING_INDICATOR_TEXT=Beoordelingsindicator
+RATING_INDICATOR_TOOLTIP_TEXT=Beoordeling
+RATING_INDICATOR_ARIA_DESCRIPTION=Verplicht
+TOTAL=Totaal
+RATING_COUNT_TITLE=Beoordeling
+ARIA_LABEL_LIST_MULTISELECTABLE=Bevat meerdere selecteerbare elementen
+ARIA_LABEL_LIST_SELECTABLE=Bevat selecteerbare elementen
+SHOW_RESULTS=Resultaten weergeven
+RESET=Opnieuw instellen
+MESSAGE_STRIP_CLOSE_BUTTON=Sluitknop statusbalk
+MESSAGE_STRIP_INFORMATION=Informatiebalk
+MESSAGE_STRIP_SUCCESS=Positieve balk
+MESSAGE_STRIP_WARNING=Waarschuwingsbalk
+MESSAGE_STRIP_ERROR=Negatieve balk
+MESSAGE_STRIP_ACTION=Knoppenbalk
+REVIEWS=Beoordelingen
+STARS=Sterren
+SELECT_OPTIONS=Opties selecteren
+SELECT_ALL=Alles selecteren
+TEXTAREA_CHARACTERS_LEFT={0} resterende tekens
+VALUE_STATE_TYPE_ERROR=Veldstatusfout
+VALUE_STATE_TYPE_WARNING=Waarschuwing veldstatus
+VALUE_STATE_TYPE_SUCCESS=Veldstatus geslaagd
+VALUE_STATE_TYPE_STANDARD=Veldstatusstandaard
+CAROUSEL_PREVIOUS_ARROW_TEXT=Vorige pagina
+CAROUSEL_NEXT_ARROW_TEXT=Volgende pagina
+NO_MATCHES_FOUND=Geen overeenkomsten gevonden.
+BREADCRUMBS_ARIA_LABEL=Navigatiepad
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Meer
+STEPINPUT_INC_ICON_TITLE=Hoeveelheid verhogen met
+STEPINPUT_DEC_ICON_TITLE=Hoeveelheid verlagen met
+TABLE_NO_DATA_FOUND=Geen gegevens gevonden
+VALUE_STATE_ERROR=Ongeldige invoer
+VALUE_STATE_WARNING=Waarschuwing afgegeven
+VALUE_STATE_INFORMATION=Informatieve invoer
+VALUE_STATE_SUCCESS=Invoer succesvol gevalideerd
+READ_ONLY=Alleen-lezen
+SWITCH_ACCOUNT=Van account wisselen
+BACK=Terug
+OTHER_IDENTITIES=Overige identiteiten
+ADD_OR_REMOVE_ACCOUNT=Account toevoegen of verwijderen
+COUNTRY_SELECT=Land selecteren
+CART=Winkelwagen
+COUNTRY_SELECTOR=Landenkiezer
+PHONE_NUMBER=Telefoonnummer
+CONTACT_US=Contact opnemen
+EMAIL=E-mail
+CHAT_WITH_US=Chat met ons
+QUICK_LINKS=Snel naar...
+TRENDING=Populair
+ABOUT_SAP=Over SAP
+SITE_INFORMATION=Over deze site
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Kalenderpictogram openen
+LIST_ITEM_EDIT_ICON=Invoer van lijstpositie bewerken
+LIST_ITEM_DELETE_ICON=Invoer van lijstpositie verwijderen
+BACK_BUTTON_LABEL=Knop terug
+STATUS_BADGE_TEXT=Statusbadge
+STATUS_BADGE_EDIT_TITLE=Klik om profiel te bewerken
+STATUS_BADGE_INFORMATION_TITLE=Klik om profielinformatie te openen
+STATUS_BADGE_WARNING_TITLE=Waarschuwing: potentieel risico met het profiel
+STATUS_BADGE_ERROR_TITLE=Er is een probleem met het profiel
+STATUS_BADGE_SUCCESS_TITLE=Profiel succesvol geverifieerd
+PROFILE=Profiel
+OPENS_IN_A_NEW_WINDOW=Opent in een nieuw tabblad
+TEXT_FIELD=Tekstveld
+UPLOADING_FILE_STATUS_TEXT=Bezig met uploaden
+TERMINATED_FILE_STATUS_TEXT=Beëindigd
+REMOVE_FILE_TEXT=Bestand verwijderen
+UPLOAD_BUTTON_LABEL=Bestand uploaden
+COMPLETE_LIST_OF=Volledige lijst van
+CALL_US_TODAY=Bel ons vandaag nog!
+SEARCH=Zoeken
+RESULT_RETURNED=Resultaten geretourneerd
+SOCIAL_MEDIA_BUTTON=Social media-knop
+PROMO_TILE=Promotiekader
+PROMO_TILE_ICON=Pictogram promotiekader
+PLAY_BUTTON_ACCESSIBLE_NAME=Startknop om rotatie van klantlogo's te starten
+PAUSE_BUTTON_ACCESSIBLE_NAME=Pauzeknop om rotatie van klantlogo's te stoppen
+LOCATION=Locatie
+TOAST_CLOSE_ACCESSIBLE_NAME=Afsluiten
+DISABLED=Uitgeschakeld
+EXPAND=Uitvouwen
+COLLAPSE=Verbergen

package/dist/types/MessageStrip.d.ts

@@ -3,10 +3,31 @@ export declare enum UDExMessageStripDesign {
     Positive = "Positive",
     Negative = "Negative",
     Warning = "Warning",
-    Action = "Action"
+    /** @deprecated Use `Neutral` instead. */
+    Action = "Action",
+    Neutral = "Neutral",
+    GreyLight = "GreyLight",
+    GreyDark = "GreyDark",
+    RedLight = "RedLight",
+    RedDark = "RedDark",
+    MangoLight = "MangoLight",
+    MangoDark = "MangoDark",
+    GreenLight = "GreenLight",
+    GreenDark = "GreenDark",
+    TealLight = "TealLight",
+    TealDark = "TealDark",
+    BlueLight = "BlueLight",
+    BlueDark = "BlueDark",
+    IndigoLight = "IndigoLight",
+    IndigoDark = "IndigoDark",
+    PinkLight = "PinkLight",
+    PinkDark = "PinkDark",
+    RaspberryLight = "RaspberryLight",
+    RaspberryDark = "RaspberryDark"
 }
 export declare enum UDExMessageStripStatusType {
     Icon = "Icon",
+    /** @deprecated Use `Icon` instead. */
     Text = "Text",
     None = "None"
 }

package/dist/types/MessageStrip.js

@@ -4,11 +4,32 @@ export var UDExMessageStripDesign;
     UDExMessageStripDesign["Positive"] = "Positive";
     UDExMessageStripDesign["Negative"] = "Negative";
     UDExMessageStripDesign["Warning"] = "Warning";
+    /** @deprecated Use `Neutral` instead. */
     UDExMessageStripDesign["Action"] = "Action";
+    UDExMessageStripDesign["Neutral"] = "Neutral";
+    UDExMessageStripDesign["GreyLight"] = "GreyLight";
+    UDExMessageStripDesign["GreyDark"] = "GreyDark";
+    UDExMessageStripDesign["RedLight"] = "RedLight";
+    UDExMessageStripDesign["RedDark"] = "RedDark";
+    UDExMessageStripDesign["MangoLight"] = "MangoLight";
+    UDExMessageStripDesign["MangoDark"] = "MangoDark";
+    UDExMessageStripDesign["GreenLight"] = "GreenLight";
+    UDExMessageStripDesign["GreenDark"] = "GreenDark";
+    UDExMessageStripDesign["TealLight"] = "TealLight";
+    UDExMessageStripDesign["TealDark"] = "TealDark";
+    UDExMessageStripDesign["BlueLight"] = "BlueLight";
+    UDExMessageStripDesign["BlueDark"] = "BlueDark";
+    UDExMessageStripDesign["IndigoLight"] = "IndigoLight";
+    UDExMessageStripDesign["IndigoDark"] = "IndigoDark";
+    UDExMessageStripDesign["PinkLight"] = "PinkLight";
+    UDExMessageStripDesign["PinkDark"] = "PinkDark";
+    UDExMessageStripDesign["RaspberryLight"] = "RaspberryLight";
+    UDExMessageStripDesign["RaspberryDark"] = "RaspberryDark";
 })(UDExMessageStripDesign || (UDExMessageStripDesign = {}));
 export var UDExMessageStripStatusType;
 (function (UDExMessageStripStatusType) {
     UDExMessageStripStatusType["Icon"] = "Icon";
+    /** @deprecated Use `Icon` instead. */
     UDExMessageStripStatusType["Text"] = "Text";
     UDExMessageStripStatusType["None"] = "None";
 })(UDExMessageStripStatusType || (UDExMessageStripStatusType = {}));

package/dist/types/MessageStrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStrip.js","sourceRoot":"","sources":["../../src/types/MessageStrip.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,sBAMX;AAND,WAAY,sBAAsB;IAChC,qDAA2B,CAAA;IAC3B,+CAAqB,CAAA;IACrB,+CAAqB,CAAA;IACrB,6CAAmB,CAAA;IACnB,2CAAiB,CAAA;AACnB,CAAC,EANW,sBAAsB,KAAtB,sBAAsB,QAMjC;AAED,MAAM,CAAN,IAAY,0BAIX;AAJD,WAAY,0BAA0B;IACpC,2CAAa,CAAA;IACb,2CAAa,CAAA;IACb,2CAAa,CAAA;AACf,CAAC,EAJW,0BAA0B,KAA1B,0BAA0B,QAIrC","sourcesContent":["export enum UDExMessageStripDesign {\n  Information = \"Information\",\n  Positive = \"Positive\",\n  Negative = \"Negative\",\n  Warning = \"Warning\",\n  Action = \"Action\",\n}\n\nexport enum UDExMessageStripStatusType {\n  Icon = \"Icon\",\n  Text = \"Text\",\n  None = \"None\",\n}\n"]}
+{"version":3,"file":"MessageStrip.js","sourceRoot":"","sources":["../../src/types/MessageStrip.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,sBA0BX;AA1BD,WAAY,sBAAsB;IAChC,qDAA2B,CAAA;IAC3B,+CAAqB,CAAA;IACrB,+CAAqB,CAAA;IACrB,6CAAmB,CAAA;IACnB,yCAAyC;IACzC,2CAAiB,CAAA;IACjB,6CAAmB,CAAA;IACnB,iDAAuB,CAAA;IACvB,+CAAqB,CAAA;IACrB,+CAAqB,CAAA;IACrB,6CAAmB,CAAA;IACnB,mDAAyB,CAAA;IACzB,iDAAuB,CAAA;IACvB,mDAAyB,CAAA;IACzB,iDAAuB,CAAA;IACvB,iDAAuB,CAAA;IACvB,+CAAqB,CAAA;IACrB,iDAAuB,CAAA;IACvB,+CAAqB,CAAA;IACrB,qDAA2B,CAAA;IAC3B,mDAAyB,CAAA;IACzB,iDAAuB,CAAA;IACvB,+CAAqB,CAAA;IACrB,2DAAiC,CAAA;IACjC,yDAA+B,CAAA;AACjC,CAAC,EA1BW,sBAAsB,KAAtB,sBAAsB,QA0BjC;AAED,MAAM,CAAN,IAAY,0BAKX;AALD,WAAY,0BAA0B;IACpC,2CAAa,CAAA;IACb,sCAAsC;IACtC,2CAAa,CAAA;IACb,2CAAa,CAAA;AACf,CAAC,EALW,0BAA0B,KAA1B,0BAA0B,QAKrC","sourcesContent":["export enum UDExMessageStripDesign {\n  Information = \"Information\",\n  Positive = \"Positive\",\n  Negative = \"Negative\",\n  Warning = \"Warning\",\n  /** @deprecated Use `Neutral` instead. */\n  Action = \"Action\",\n  Neutral = \"Neutral\",\n  GreyLight = \"GreyLight\",\n  GreyDark = \"GreyDark\",\n  RedLight = \"RedLight\",\n  RedDark = \"RedDark\",\n  MangoLight = \"MangoLight\",\n  MangoDark = \"MangoDark\",\n  GreenLight = \"GreenLight\",\n  GreenDark = \"GreenDark\",\n  TealLight = \"TealLight\",\n  TealDark = \"TealDark\",\n  BlueLight = \"BlueLight\",\n  BlueDark = \"BlueDark\",\n  IndigoLight = \"IndigoLight\",\n  IndigoDark = \"IndigoDark\",\n  PinkLight = \"PinkLight\",\n  PinkDark = \"PinkDark\",\n  RaspberryLight = \"RaspberryLight\",\n  RaspberryDark = \"RaspberryDark\",\n}\n\nexport enum UDExMessageStripStatusType {\n  Icon = \"Icon\",\n  /** @deprecated Use `Icon` instead. */\n  Text = \"Text\",\n  None = \"None\",\n}\n"]}

package/dist/vscode.html-custom-data.json

@@ -2891,11 +2891,22 @@
           "name": "design",
           "description": "Defines the component type.",
           "values": [
+            { "name": "Neutral" },
             { "name": "Negative" },
             { "name": "Information" },
             { "name": "Positive" },
             { "name": "Warning" },
-            { "name": "Action" }
+            { "name": "Action" },
+            { "name": "GreyLight" },
+            { "name": "GreyDark" },
+            { "name": "RedLight" },
+            { "name": "RedDark" },
+            { "name": "MangoLight" },
+            { "name": "MangoDark" },
+            { "name": "GreenLight" },
+            { "name": "GreenDark" },
+            { "name": "... 9 more ..." },
+            { "name": "RaspberryDark" }
           ]
         },
         {
@@ -2920,7 +2931,7 @@
         },
         {
           "name": "status-type",
-          "description": "Defines the component Status Type.",
+          "description": "Defines the component Status Type.\n\n`Text` value is DEPRECATED! Use `Icon` instead.",
           "values": [{ "name": "Text" }, { "name": "None" }, { "name": "Icon" }]
         },
         {

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.50.0",
+  "version": "2.52.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -6297,7 +6297,7 @@
               "name": "design",
               "description": "Defines the component type.",
               "value": {
-                "type": "\"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\""
+                "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\" | \"GreyLight\" | \"GreyDark\" | \"RedLight\" | \"RedDark\" | \"MangoLight\" | \"MangoDark\" | \"GreenLight\" | \"GreenDark\" | ... 9 more ... | \"RaspberryDark\""
               }
             },
             {
@@ -6322,7 +6322,7 @@
             },
             {
               "name": "status-type",
-              "description": "Defines the component Status Type.",
+              "description": "Defines the component Status Type.\n\n`Text` value is DEPRECATED! Use `Icon` instead.",
               "value": { "type": "\"Text\" | \"None\" | \"Icon\"" }
             },
             {
@@ -6354,7 +6354,7 @@
                 "name": "design",
                 "description": "Defines the component type.",
                 "value": {
-                  "type": "\"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\""
+                  "type": "\"Neutral\" | \"Negative\" | \"Information\" | \"Positive\" | \"Warning\" | \"Action\" | \"GreyLight\" | \"GreyDark\" | \"RedLight\" | \"RedDark\" | \"MangoLight\" | \"MangoDark\" | \"GreenLight\" | \"GreenDark\" | ... 9 more ... | \"RaspberryDark\""
                 }
               },
               {
@@ -6379,7 +6379,7 @@
               },
               {
                 "name": "status-type",
-                "description": "Defines the component Status Type.",
+                "description": "Defines the component Status Type.\n\n`Text` value is DEPRECATED! Use `Icon` instead.",
                 "value": { "type": "\"Text\" | \"None\" | \"Icon\"" }
               },
               {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.50.0",
+  "version": "2.52.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -37,19 +37,19 @@
   "dependencies": {
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.2",
-    "@ui5/webcomponents": "2.23.3",
-    "@ui5/webcomponents-base": "2.23.3",
-    "@ui5/webcomponents-fiori": "2.23.3",
-    "@ui5/webcomponents-icons": "2.23.3",
-    "@ui5/webcomponents-localization": "2.23.3",
-    "@ui5/webcomponents-theming": "2.23.2",
+    "@ui5/webcomponents": "2.25.0",
+    "@ui5/webcomponents-base": "2.25.0",
+    "@ui5/webcomponents-fiori": "2.25.0",
+    "@ui5/webcomponents-icons": "2.25.0",
+    "@ui5/webcomponents-localization": "2.25.0",
+    "@ui5/webcomponents-theming": "2.25.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "^8.23.6"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.14.5",
     "@ui5/cypress-ct-ui5-webc": "^0.0.4",
-    "@ui5/webcomponents-tools": "2.23.3",
+    "@ui5/webcomponents-tools": "2.25.0",
     "chromedriver": "149.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^14.3.3",

package/src/CountrySelector.ts

@@ -154,6 +154,7 @@ class UDExCountrySelector extends UDExSelectBase {
   }
 
   handleDropdownClose(): void {
+    this._setActiveDescendant(null);
     this._open = false;
     this.fireEventDropdownClose();
   }

package/src/List.hbs

@@ -11,8 +11,9 @@
             <div
                 id="udex-list"
                 class="udex-list"
-                role="{{accessibleRole}}"
+                role="{{effectiveAccessibleRole}}"
                 aria-labelledby="{{ariaLabelledBy}}"
+                aria-multiselectable="{{_listAriaMultiSelectable}}"
                 aria-busy="{{ariaBusy}}">
                 <slot></slot>
             </div>

package/src/List.ts

@@ -478,12 +478,29 @@ class UDExList extends UI5Element {
   }
 
   prepareListItemsMode(): void {
+    const treeMode = this._hasCollapsibleGroups;
     this.getItemsFromList().forEach((item, index) => {
       item.mode = this.mode;
       item.controlled = this.controlled;
       item.type = this.type;
       item._icon = this.itemIcon;
       item._tabIndex = this.getTabIndex(index, item);
+      if (item.isGroup) {
+        // Only upgrade _treeMode to true; never force it to false, since
+        // SearchableListBaseTemplate may have set _tree-mode=true externally.
+        if (treeMode) {
+          item._treeMode = true;
+        }
+      } else if (treeMode) {
+        // Set accessibleRole for standalone List tree mode.
+        // Never overwrite a value already set by an external template (e.g. FilterMenu
+        // sets accessible-role="treeitem" on children via SearchableListBaseTemplate).
+        item.accessibleRole = "treeitem";
+        item.setAttribute("_list-managed-role", "");
+      } else if (item.getAttribute("_list-managed-role") !== null) {
+        item.accessibleRole = "";
+        item.removeAttribute("_list-managed-role");
+      }
     });
   }
 
@@ -566,6 +583,25 @@ class UDExList extends UI5Element {
   get holderHeight(): string {
     return this.height ? this.height : "auto";
   }
+
+  /** True when at least one slotted group header has the collapsible attribute. */
+  get _hasCollapsibleGroups(): boolean {
+    return this.getItems().some(item => item.isGroup && item.hasAttribute("collapsible"));
+  }
+
+  /**
+   * The effective ARIA role for the inner list div.
+   * When the list has collapsible group headers it uses the tree pattern so that
+   * JAWS enters application mode and delivers arrow-key events to the component.
+   */
+  get effectiveAccessibleRole(): string {
+    return this._hasCollapsibleGroups ? "tree" : this.accessibleRole;
+  }
+
+  /** aria-multiselectable exposed only for MultiSelect tree (collapsible groups). */
+  get _listAriaMultiSelectable(): string | undefined {
+    return (this._hasCollapsibleGroups && this.modeMultiSelect) ? "true" : undefined;
+  }
 }
 
 UDExList.define();

package/src/ListGroupHeaderBase.ts

@@ -219,6 +219,9 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
   }
 
   get groupWrapperRole(): string {
+    if (this._useHostAriaRole) {
+      return "presentation";
+    }
     return this._treeMode ? "none" : "group";
   }
 

package/src/ListItem.ts

@@ -366,11 +366,20 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get roleItem(): string {
+    // When the host element carries the role (aria-activedescendant mode), the
+    // inner [part=item] div must be presentational to avoid a duplicate ARIA node.
+    if (this._useHostAriaRole) {
+      return "presentation";
+    }
+    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
+  }
+
+  get effectiveRole(): string {
     return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
   }
 
   get ariaCheckedValue(): "true" | "false" | "mixed" | undefined {
-    if (this.roleItem !== "treeitem") {
+    if (this.effectiveRole !== "treeitem") {
       return undefined;
     }
     // Only MultiSelect treeitems expose aria-checked; SingleSelect uses aria-selected.
@@ -384,7 +393,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get ariaSelectedValue(): "true" | "false" | undefined {
-    if (this.roleItem !== "treeitem") {
+    if (this.effectiveRole !== "treeitem") {
       return undefined;
     }
     // Only SingleSelect treeitems expose aria-selected; MultiSelect uses aria-checked.
@@ -402,7 +411,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get checkboxAriaHidden(): boolean {
-    return this.roleItem === "treeitem";
+    return this.effectiveRole === "treeitem";
   }
 
   get _ariaDisabled(): boolean | undefined {

package/src/ListItemBase.ts

@@ -229,6 +229,17 @@ class UDExListItemBase extends UI5Element {
   @property({ type: Boolean })
     _filtered!: boolean;
 
+  /**
+   * When true, the host element carries role + ARIA state attributes directly
+   * (set by the outer template) so that aria-activedescendant works across shadow DOM.
+   * The inner [part=item] div is then rendered as role="presentation".
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _useHostAriaRole: boolean = false;
+
   /**
    * Defines the tab index of the component.
    *

package/src/ListSelectAll.ts

@@ -104,7 +104,7 @@ class UDExListSelectAll extends UDExListGroupHeaderBase {
   }
 
   get groupListClassName(): string {
-    return `${groupListClass} ${this._additionalClassName}`;
+    return groupListClass;
   }
 }
 

package/src/MessageStrip.ts

@@ -46,11 +46,13 @@ class UDExMessageStrip extends MessageStrip {
    */
   @property()
   /** @ts-expect-error */
-    design!: `${UDExMessageStripDesign}` = UDExMessageStripDesign.Action;
+    design!: `${UDExMessageStripDesign}` = UDExMessageStripDesign.Neutral;
 
   /**
    * Defines the component Status Type.
    *
+   * `Text` value is DEPRECATED! Use `Icon` instead.
+   *
    * @public
    */
   @property()
@@ -127,7 +129,7 @@ class UDExMessageStrip extends MessageStrip {
   static i18nBundle: I18nBundle;
 
   onBeforeRendering() {
-    if (this.isDesignActionOrIsNotIconType) {
+    if (this.isNotIconStatusType || (this.isDecorativeDesign && this.icon.length === 0)) {
       this.hideIcon = true;
     }
   }
@@ -143,11 +145,38 @@ class UDExMessageStrip extends MessageStrip {
       [UDExMessageStripDesign.Negative]: this.statusErrorText || this.getTranslation(MESSAGE_STRIP_ERROR),
       [UDExMessageStripDesign.Warning]: this.statusWarningText || this.getTranslation(MESSAGE_STRIP_WARNING),
       [UDExMessageStripDesign.Action]: this.getTranslation(MESSAGE_STRIP_ACTION),
+      [UDExMessageStripDesign.Neutral]: this.getTranslation(MESSAGE_STRIP_ACTION),
     };
   }
 
   isDesignAction(): boolean {
-    return this.design === UDExMessageStripDesign.Action;
+    return this.design === UDExMessageStripDesign.Action || this.design === UDExMessageStripDesign.Neutral;
+  }
+
+  get isDecorativeDesign(): boolean {
+    const decorativeDesigns: string[] = [
+      UDExMessageStripDesign.Action,
+      UDExMessageStripDesign.Neutral,
+      UDExMessageStripDesign.GreyLight,
+      UDExMessageStripDesign.GreyDark,
+      UDExMessageStripDesign.RedLight,
+      UDExMessageStripDesign.RedDark,
+      UDExMessageStripDesign.MangoLight,
+      UDExMessageStripDesign.MangoDark,
+      UDExMessageStripDesign.GreenLight,
+      UDExMessageStripDesign.GreenDark,
+      UDExMessageStripDesign.TealLight,
+      UDExMessageStripDesign.TealDark,
+      UDExMessageStripDesign.BlueLight,
+      UDExMessageStripDesign.BlueDark,
+      UDExMessageStripDesign.IndigoLight,
+      UDExMessageStripDesign.IndigoDark,
+      UDExMessageStripDesign.PinkLight,
+      UDExMessageStripDesign.PinkDark,
+      UDExMessageStripDesign.RaspberryLight,
+      UDExMessageStripDesign.RaspberryDark,
+    ];
+    return decorativeDesigns.includes(this.design);
   }
 
   get isDesignWarning(): boolean {
@@ -159,19 +188,21 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get shouldHideIcon(): boolean {
-    if (this.isDesignActionOrIsNotIconType) {
+    if (this.isDecorativeDesign) {
+      return this.icon.length === 0;
+    }
+    if (this.isNotIconStatusType) {
       return this.hideIcon || this.icon.length === 0;
     }
-
     return this.hideIcon;
   }
 
   get hideTextStatus(): boolean {
-    return this.statusType !== UDExMessageStripStatusType.Text || this.isDesignAction();
+    return this.statusType !== UDExMessageStripStatusType.Text || this.isDecorativeDesign;
   }
 
   get textStatus(): string | undefined {
-    if (this.design !== UDExMessageStripDesign.Action) {
+    if (!this.isDecorativeDesign) {
       return this.textStatusTypeMapping()[this.design];
     }
   }
@@ -189,11 +220,12 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get isDesignActionOrIsNotIconType(): boolean {
-    return this.isDesignAction() || this.isNotIconStatusType;
+    return this.isDecorativeDesign || this.isNotIconStatusType;
   }
 
   get hiddenText(): string {
-    return `${this.textStatusTypeMapping()[this.design]} ${this.hideCloseButton ? "" : this._closableText}`;
+    const statusText = this.isDecorativeDesign ? (this.textStatusTypeMapping()[this.design] ?? "") : this.textStatusTypeMapping()[this.design];
+    return `${statusText} ${this.hideCloseButton ? "" : this._closableText}`.trim();
   }
 }
 

package/src/Modal.ts

@@ -49,6 +49,14 @@ class UDExModal extends Dialog {
   */
   @property()
     type: `${UDExModalType}` = UDExModalType.default;
+
+  onAfterRendering() {
+    const content = this.shadowRoot?.querySelector<HTMLElement>(".ui5-popup-content");
+    if (content) {
+      const gutterWidth = content.offsetWidth - content.clientWidth;
+      this.style.setProperty("--udex-modal-scrollbar-width", `${gutterWidth}px`);
+    }
+  }
 }
 
 UDExModal.define();

package/src/SearchableListBase.ts

@@ -268,6 +268,7 @@ class UDExSearchableListBase extends UI5Element {
   _shouldFilterItems?: boolean;
   _accSearchResultInfo?: string;
   _groupCollapseStateBeforeSearch: Map<string, boolean>;
+  _pendingHeightReset: boolean = false;
 
   constructor() {
     super();
@@ -282,6 +283,19 @@ class UDExSearchableListBase extends UI5Element {
     }
   }
 
+  onAfterRendering() {
+    if (this._pendingHeightReset) {
+      this._pendingHeightReset = false;
+      this.shadowRoot?.querySelectorAll<HTMLElement & { setContentHeight(): void }>("[udex-list-group-header]")
+        .forEach(header => {
+          if (header.hasAttribute("collapsible")) {
+            header.style.removeProperty("--udex-list-content-max-height");
+            header.setContentHeight();
+          }
+        });
+    }
+  }
+
   onItemPress(e:CustomEvent) {
     const dropdownItemId: string = this.getDataTokenId(e.detail.item as UDExListItemBase);
     this.handleDropdownItemPress(dropdownItemId);
@@ -484,21 +498,19 @@ class UDExSearchableListBase extends UI5Element {
   }
 
   restoreGroupCollapseState(): void {
-    if (!this._groupCollapseStateBeforeSearch.size) {
-      return;
-    }
-
     this.items.forEach(item => {
       if (item.isGroup) {
-        const collapsed = this._groupCollapseStateBeforeSearch.get(item._id);
-
-        if (collapsed !== undefined) {
-          item.collapsed = collapsed;
+        if (this._groupCollapseStateBeforeSearch.size) {
+          const collapsed = this._groupCollapseStateBeforeSearch.get(item._id);
+          if (collapsed !== undefined) {
+            item.collapsed = collapsed;
+          }
         }
       }
     });
 
     this._groupCollapseStateBeforeSearch.clear();
+    this._pendingHeightReset = true;
   }
 
   getSlottedItems(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<UDExListItemBase | UDExListGroupHeaderBase> {
@@ -732,6 +744,17 @@ class UDExSearchableListBase extends UI5Element {
     return false;
   }
 
+  /**
+   * Whether items are navigated via aria-activedescendant (focus stays on the
+   * combobox input) rather than via DOM focus on each item.  When true,
+   * SearchableListBaseTemplate places role + ARIA state attrs on the host
+   * element of each list-item so that screen readers can read them through the
+   * aria-activedescendant pointer.
+   */
+  get _activeDescendantMode(): boolean {
+    return false;
+  }
+
   get additionalClassName(): string {
     return `udex-searchable-list__header`;
   }