@duetds/components 10.1.0 → 10.1.1

package/lib/cjs/{label-DeanNJa0.js → label-Bw-qhJBs.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var index = require('./index-blgG8IJB.js');
+var index = require('./index-CwMzFaC2.js');
 
 const DuetInternalLabel = (props, children) => {
     const { theme = "", margin = "auto", size = "medium", weight = "semi-bold", color = "", id = "" } = props;

package/lib/cjs/{language-utils-DWW8tvkB.js → language-utils-BLi7aaEv.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-blgG8IJB.js');
+require('./index-CwMzFaC2.js');
 var stringUtils = require('./string-utils-B35hEUBv.js');
 
 const localeLookUpTable = {

package/lib/cjs/loader.cjs.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-blgG8IJB.js');
-var appGlobals = require('./app-globals-BtFYkwDf.js');
+var index = require('./index-CwMzFaC2.js');
+var appGlobals = require('./app-globals-BFWJwMVq.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/lib/cjs/{slot-utils-Byx247xX.js → slot-utils-l9-tZvM8.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-blgG8IJB.js');
+require('./index-CwMzFaC2.js');
 
 const getElementsFromNamedSlot = (element, slotName) => {
     const childElements = Array.from(element.querySelectorAll(":scope > *"));

package/lib/cjs/{themeable-component-DcR7DztR.js → themeable-component-DlxAauty.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-blgG8IJB.js');
+require('./index-CwMzFaC2.js');
 
 const inheritGlobalTheme = (component) => {
     var _a, _b;

package/lib/cjs/{token-utils-BJtlJxnJ.js → token-utils-GXq9O-4F.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-var tokens_module = require('./tokens.module-DJt2h4FX.js');
+var tokens_module = require('./tokens.module-Bc3oSOjD.js');
 
 const turva2ColorTokens = {
     "color-turva2-red-600": "rgb(230, 23, 64)",

package/lib/cjs/{tokens-BxWzRxOl.js → tokens-DZMc8s3K.js}

@@ -93,6 +93,7 @@ const color_lt_gray_600 = "rgb(81, 105, 123)";
 const color_lt_gray_700 = "rgb(62, 84, 102)";
 const color_lt_gray_800 = "rgb(45, 64, 81)";
 const color_lt_gray_900 = "rgb(30, 45, 59)";
+const color_partner_brand_s_group = "rgb(0, 170, 70)";
 const color_primary = "rgb(0, 119, 179)";
 const color_primary_dark = "rgb(0, 75, 129)";
 const color_primary_dark_turva = "rgb(126, 2, 35)";
@@ -389,6 +390,7 @@ var tokens = {
 	color_lt_gray_700: color_lt_gray_700,
 	color_lt_gray_800: color_lt_gray_800,
 	color_lt_gray_900: color_lt_gray_900,
+	color_partner_brand_s_group: color_partner_brand_s_group,
 	color_primary: color_primary,
 	color_primary_dark: color_primary_dark,
 	color_primary_dark_turva: color_primary_dark_turva,
@@ -688,6 +690,7 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
   color_lt_gray_700: color_lt_gray_700,
   color_lt_gray_800: color_lt_gray_800,
   color_lt_gray_900: color_lt_gray_900,
+  color_partner_brand_s_group: color_partner_brand_s_group,
   color_primary: color_primary,
   color_primary_dark: color_primary_dark,
   color_primary_dark_turva: color_primary_dark_turva,

package/lib/cjs/{tokens.module-DJt2h4FX.js → tokens.module-Bc3oSOjD.js}

@@ -93,6 +93,7 @@ const colorLtGray600 = "rgb(81, 105, 123)";
 const colorLtGray700 = "rgb(62, 84, 102)";
 const colorLtGray800 = "rgb(45, 64, 81)";
 const colorLtGray900 = "rgb(30, 45, 59)";
+const colorPartnerBrandSGroup = "rgb(0, 170, 70)";
 const colorPrimary = "rgb(0, 119, 179)";
 const colorPrimaryDark = "rgb(0, 75, 129)";
 const colorPrimaryDarkTurva = "rgb(126, 2, 35)";
@@ -391,6 +392,7 @@ var tokens = /*#__PURE__*/Object.freeze({
 	colorLtGray700: colorLtGray700,
 	colorLtGray800: colorLtGray800,
 	colorLtGray900: colorLtGray900,
+	colorPartnerBrandSGroup: colorPartnerBrandSGroup,
 	colorPrimary: colorPrimary,
 	colorPrimaryDark: colorPrimaryDark,
 	colorPrimaryDarkTurva: colorPrimaryDarkTurva,
@@ -615,6 +617,7 @@ exports.fontFamilyText = fontFamilyText;
 exports.fontFamilyTextTurva = fontFamilyTextTurva;
 exports.fontSizeMedium = fontSizeMedium;
 exports.fontWeightSemiBold = fontWeightSemiBold;
+exports.lineHeightMedium = lineHeightMedium;
 exports.lineHeightSmall = lineHeightSmall;
 exports.mediaQueryLarge = mediaQueryLarge;
 exports.mediaQueryMedium = mediaQueryMedium;

package/lib/collection/components/duet-combobox/duet-combobox.css

@@ -25,11 +25,6 @@
   color: rgb(23, 28, 58);
 }
 
-.combobox-menu-container {
-  width: var(--popup-width);
-  max-height: 200px;
-}
-
 :host(.duet-theme-turva2.duet-theme-turva) {
   color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-combobox/duet-combobox.js

@@ -10,6 +10,8 @@ import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLan
 import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { DuetComboBoxSelect } from "./duet-combobox-select";
+import { fontSizeMedium, lineHeightMedium, spaceXSmall } from "@duetds/tokens";
+const POPUP_MENU_SIZE = 5;
 export class DuetCombobox {
     constructor() {
         var _a, _b;
@@ -160,7 +162,7 @@ export class DuetCombobox {
                 return;
             }
             if (isEscapeKey(e) || isTabKey(e)) {
-                if (this.listOpen) {
+                if (isEscapeKey(e) && this.listOpen) {
                     e.preventDefault();
                 }
                 this.updateInputText(true);
@@ -171,18 +173,21 @@ export class DuetCombobox {
             //handle arrow up/down navigation
             let nextActiveItem = this.activeItem;
             if (isArrowUpKey(e)) {
-                e.preventDefault();
                 nextActiveItem = this.activeItem - 1;
             }
-            else if (isArrowDownKey(e)) {
+            if (isArrowDownKey(e)) {
                 if (((_c = (_b = (_a = this.input) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) < this.minCharacters) {
                     return;
                 }
-                e.preventDefault();
                 nextActiveItem = this.listOpen ? this.activeItem + 1 : this.activeItem;
-                this.listOpen = true;
+                this.popupMenuController = this.input.nativeInputElement;
+                // change listOpen on next tick so popup controller is set when open changes
+                setTimeout(() => {
+                    this.listOpen = true;
+                });
             }
             if (isArrowDownKey(e) || isArrowUpKey(e)) {
+                e.preventDefault();
                 if (nextActiveItem < 0 || !nextActiveItem) {
                     nextActiveItem = 0;
                 }
@@ -579,19 +584,35 @@ export class DuetCombobox {
         }
         return items;
     }
+    /**
+     * As the div.combobox-menu-container is inside popup-menu's shadow DOM, external styles don't work
+     */
+    getMenuContainerStyles() {
+        const fontSize = parseInt(fontSizeMedium) * 16; // rem to px
+        const lineHeight = parseFloat(lineHeightMedium) * fontSize;
+        const verticalPadding = 2 * parseInt(spaceXSmall);
+        return {
+            "max-height": `${POPUP_MENU_SIZE * (lineHeight + verticalPadding)}px`,
+            width: "var(--popup-width)",
+        };
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
+        var _a;
         if (Build.isServer) {
             return;
         }
+        // As the popup is anchored to the native input inside duet-input, we need to adjust positioning
+        const horizontalOffset = -1 * ((_a = this.input.nativeInputElement) === null || _a === void 0 ? void 0 : _a.offsetLeft); // need to calculate on every render, as we may have chips
+        const verticalOffset = 2; // focused input has 2px outline
         const selectElements = this.returnFilteredOrNonFiltered();
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, mainAxisOffset: verticalOffset, crossAxisOffset: horizontalOffset, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container", style: this.getMenuContainerStyles() }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -537,7 +537,7 @@
 .duet-theme-turva .duet-date-dialog-mobile-header {
   border-color: rgb(199, 202, 207);
 }
-.duet-date-dialog-mobile-header duet-label {
+.duet-date-dialog-mobile-header label {
   display: inline-block;
   max-width: 84%;
   overflow: hidden;
@@ -545,7 +545,7 @@
   white-space: nowrap;
 }
 @media (min-width: 36em) {
-  .duet-date-dialog-mobile-header duet-label {
+  .duet-date-dialog-mobile-header label {
     display: none;
   }
 }

package/lib/collection/components/duet-fieldset/duet-fieldset.css

@@ -68,20 +68,12 @@ fieldset legend {
 
 .duet-fieldset-label {
   margin-bottom: 12px !important;
+  display: flex;
   margin-top: 8px;
 }
 .duet-legend-has-caption .duet-fieldset-label {
   margin-bottom: 6px !important;
 }
-.duet-legend-has-tooltip .duet-fieldset-label {
-  padding-right: 36px;
-}
-@media (min-width: 48em) {
-  .duet-legend-has-tooltip .duet-fieldset-label {
-    margin-bottom: 3px !important;
-    padding-right: 0;
-  }
-}
 @media (min-width: 48em) {
   .duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label {
     margin-bottom: -3px !important;
@@ -114,15 +106,8 @@ fieldset legend {
 }
 
 ::slotted(duet-tooltip) {
-  position: absolute;
+  position: relative;
   top: 4px;
-  right: 0;
-}
-@media (min-width: 48em) {
-  ::slotted(duet-tooltip) {
-    position: relative;
-    right: auto;
-  }
 }
 
 .duet-legend-hidden {

package/lib/collection/components/duet-footer/duet-footer.js

@@ -137,6 +137,22 @@ export class DuetFooter {
         this.processedItems = parsePossibleJSON(this.items);
         this.processedMenu = parsePossibleJSON(this.menu);
     }
+    getTopItemButtonIcon(item) {
+        var _a, _b;
+        if (item.href && item.external) {
+            return undefined;
+        }
+        if ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:")) {
+            return "form-tel";
+        }
+        if ((_b = item.href) === null || _b === void 0 ? void 0 : _b.startsWith("mailto:")) {
+            return "navigation-message";
+        }
+        return "navigation-arrow-right";
+    }
+    isMessagingLink(href) {
+        return (href === null || href === void 0 ? void 0 : href.startsWith("tel:")) || (href === null || href === void 0 ? void 0 : href.startsWith("mailto:"));
+    }
     /**
      * render() function
      * Always the last one in the class.
@@ -144,25 +160,16 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '374b3e4cf00807da89a9742f3efdc2a4a0bc6b18', class: {
+        return (h("footer", { key: '86aa6cfb85cbc461f27ecfcbd2580c99c6a1d6ea', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c8e124344783908ff121070042054f4d0c7947f5', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '1bbdf39de923762fc2fbe73b6aec50ef7ad9d6f1', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '81286c05a8d63e73d0ca759d74a1697232b3fba9', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '7b0af28113896845cf7dd1e6cb6bd98d30e55e57', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: 'eb1a893372576296ccf12fee8831c525a2632eee', class: "footer-top-logo" }, h("duet-logo", { key: '10de708506297ff9f3318912b81a2e8378c4270d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'dc3946221202b4292f2e4fbc080178dca9ad73b1', class: "footer-top-right-container" }, h("slot", { key: '1ad763eaac02a6c7fbccd51e2236259ba1450b07', name: "info" }), h("div", { key: '54df55c2fc9dfdbaa774c841c3cd86f799684d81', class: "footer-top-items" }, this.processedItems &&
-            this.processedItems.map((item, index) => {
-                var _a, _b, _c, _d, _e, _f;
-                return (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: ((_a = item.href) === null || _a === void 0 ? void 0 : _a.startsWith("tel:"))
-                        ? "form-tel"
-                        : ((_b = item.href) === null || _b === void 0 ? void 0 : _b.startsWith("mailto:"))
-                            ? "navigation-message"
-                            : "navigation-arrow-right", "icon-right": !((_c = item.href) === null || _c === void 0 ? void 0 : _c.startsWith("tel:")) && !((_d = item.href) === null || _d === void 0 ? void 0 : _d.startsWith("mailto:")), "icon-size": ((_e = item.href) === null || _e === void 0 ? void 0 : _e.startsWith("tel:")) || ((_f = item.href) === null || _f === void 0 ? void 0 : _f.startsWith("mailto:"))
-                        ? "medium"
-                        : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)));
-            }))))), h("slot", { key: '361a7bcbb2822507495f9ce3d2cba71c5787ad60', name: "extra" }), h("p", { key: 'd550a699008989e92c8ccb0f856f730a0f0d408a', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'd0382fd0c48916c77ae76340f1797b35edb62863', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '085136a2a21443c434ef94fd8917616c07f764e9', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'df5f48b86ef46c1bfb03cf75e55ef2e402af1479' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '475e550d7b43e8a0ddd78b4ea001c78452b783e1', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: 'bc5396a0f997e44cbaafd087adf00e75f97f8b5a', class: "footer-top-logo" }, h("duet-logo", { key: 'fe1aa7afcc6a06468b216906c1b41cca8dadca15', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '19a7f05c2ee0f6f22e05dc4c4e32ad3a2e7e7e49', class: "footer-top-right-container" }, h("slot", { key: '3d55e517eeb363bc24522186c27c1eb9acd0e08f', name: "info" }), h("div", { key: '2415ecbf3c7128d9d0c39506e8634beb5042d61c', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: 'fe8d1c7d7b75403eacac98614932040adb57d11b', name: "extra" }), h("p", { key: 'dfae59c2992d08e97cb8cacccf7e144e66437b06', class: "duet-footer-menu", part: "menu" }, h("span", { key: '94eca18d1332909865fef8de75238c4af03f384b', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '94ffe16bb9cea453d522865f4c58d7f8c039f142', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'd20feb15e1cf0b7e930f08be329c440d3bfa88b6' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '9c9e03660d7774a3cb604d90d7aceef2177c74a6', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cd699b121a356a4998001457a43186fcc2c75f29', style: {
+        return (h(Host, { key: '4b538b2691f1fe5d57e6d1bbdec0e4278128c0c8', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: 'c5bf503f54cdf776eb9ee3f975d09925f61e0922' })));
+            } }, h("slot", { key: 'dabba4fd818496d5472f9328f3a400ce0dac9bc0' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }
@@ -302,4 +302,5 @@ export class DuetGridItem {
             }
         };
     }
+    static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-hero/duet-hero.css

@@ -1819,6 +1819,7 @@ duet-heading + duet-button {
   }
 }
 :host(.duet-theme-turva2) .duet-hero.duet-hero-campaign .background-area .brand-shape, :host(.duet-theme-turva2) .duet-hero.duet-hero-section .background-area .brand-shape {
+  left: 0;
   background-color: rgb(255, 255, 255);
   border-radius: 24px;
   mask-image: none;

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -406,17 +406,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '3e4fe2a2ca40a34b5b8794f4c11051b48dc03417' }, h("div", { key: 'd9cbfb33282b072af2fef5172e6ff9c4fc3ee003', ref: element => {
+        return (h(Host, { key: '58beaea5db437bb7869478694d5fdb6b4eb998cc', role: this.accessibleRole === "menu" ? "application" : null }, h("div", { key: '82647fefb6470733cff292d168b5237bf7b0aba7', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'f9acbac0a98487efc50dd5a132fe61bb1e411979' }, h("duet-input", { key: 'c3224672751c4a30074ffa79ea873a569706b4fa', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'daf978e63ae05c1396da1ca3cdf84ac138e47e03' }, h("span", { key: '1fdf706c20cd1dda3a6854aad9ee8de26c847721', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'cbe59e5ae684b8d2313d8f0b9d72d3762a20c6bd' }, h("duet-input", { key: '826a31316aa3c5addbcf1660b80c894b385447c9', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '32814c2909aa51e0f31f696b13168ba1282ddd4b' }, h("span", { key: '4fb20c111b73df9eb2b99b6f3ed829c812188107', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: 'fbd2399dbd35a743f2e6df12e03ff896a157dcd4', size: "xx-small" }))), h("slot", { key: 'c8b5480636559d484b8ac47e4987c0d7baa17d0d' }))));
+                `)), h("duet-spacer", { key: '45bfbe61500f66612763f0b8f36473c7f24c34b3', size: "xx-small" }))), h("slot", { key: 'aa8000f54d05ec3f429243b3a9baa9d5011193d7' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }