@duetds/components 9.2.4 → 9.2.6

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

@@ -54,6 +54,7 @@ export class DuetCombobox {
             this.listOpen = String(newValue).length >= this.minCharacters && ((_a = this.getFilteredItems()) === null || _a === void 0 ? void 0 : _a.length) > 0;
         };
         this.onKeyDown = (e) => {
+            var _a, _b, _c;
             //if selection is made, close the list and update internal and external values
             const listItems = this.returnFilteredOrNonFiltered();
             const listItemsSuggestions = listItems.filter(i => !this.selectedItems.has(i.id));
@@ -62,7 +63,10 @@ export class DuetCombobox {
             this.input.accessibleActiveDescendant = undefined;
             if (isEnterKey(e)) {
                 e.preventDefault();
-                if (this.listOpen && this.activeItem !== undefined && listItems[this.activeItem]) {
+                if (this.listOpen &&
+                    this.activeItem !== undefined &&
+                    listItems[this.activeItem] &&
+                    !this.selectedItems.has(listItems[this.activeItem].id)) {
                     if (this.multiple) {
                         this.addSelectedItem(listItems[this.activeItem].id, true);
                     }
@@ -96,6 +100,9 @@ export class DuetCombobox {
                 nextActiveItem = this.activeItem - 1;
             }
             else 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;
@@ -146,7 +153,7 @@ export class DuetCombobox {
         this.items = undefined;
         this.formatter = (item) => item && item.name ? item.name : "";
         this.value = undefined;
-        this.minCharacters = 1;
+        this.minCharacters = 0;
         this.openListOnClick = false;
         this.filterType = "startsWith";
     }
@@ -161,6 +168,15 @@ export class DuetCombobox {
     activeItemHandler(state) {
         this.input.accessibleActiveDescendant = this.listOpen && (state || state === 0) ? this.activeDescendantId : "";
     }
+    inputValueHandler() {
+        setTimeout(async () => {
+            const label = await this.getSelectedItemLabel();
+            if (this.input.value == "" && label) {
+                this.input.value = "";
+                this.value = undefined;
+            }
+        }, 200);
+    }
     handleDocumentClick(e) {
         //we want to remove all user text if they have NOT selected from the dropdown
         const path = e.composedPath();
@@ -300,7 +316,11 @@ export class DuetCombobox {
      * Helper function that checks inputs in the field, compares it with the item list and returns true when inputvalue matches selectedItem id
      */
     shouldListBeFiltered() {
-        if (!this.multiple && this.selectedItems.size && this.input.value === this.inputValue) {
+        var _a;
+        if (!this.multiple &&
+            this.selectedItems.size &&
+            this.input.value === this.inputValue &&
+            ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) < this.minCharacters) {
             const item = this.processedItems.find(item => this.selectedItems.has(item.id));
             return !(this.formatter(item).toLowerCase() === this.input.value.toLowerCase());
         }
@@ -363,17 +383,9 @@ export class DuetCombobox {
      * Updates the selected item based on the item id. Used only when multiple is false.
      */
     async updateSelectedItem(id, emitEvent) {
-        if (this.selectedItems.has(id)) {
-            this.selectedItems.delete(id);
-            this.value = undefined;
-            this.input.value = "";
-            await this.input.setFocus();
-        }
-        else {
-            this.selectedItems.clear();
-            this.selectedItems.add(id);
-            this.value = this.processedItems.find(item => item.id === id).value;
-        }
+        this.selectedItems.clear();
+        this.selectedItems.add(id);
+        this.value = this.processedItems.find(item => item.id === id).value;
         if (emitEvent) {
             this.emitChangeEvent(this.value && id);
         }
@@ -460,7 +472,7 @@ export class DuetCombobox {
     }
     //function that scrolls to the li element with the class "active"
     scrollToActive() {
-        const activeElement = document.getElementById(`${this.activeDescendantId}`); // this is undefined on 1st keydown, make it be valid to fix the issue
+        const activeElement = document.getElementById(`${this.activeDescendantId}`);
         if (activeElement) {
             activeElement.scrollIntoView({
                 behavior: "smooth",
@@ -795,7 +807,7 @@ export class DuetCombobox {
                 "setter": false,
                 "attribute": "min-characters",
                 "reflect": false,
-                "defaultValue": "1"
+                "defaultValue": "0"
             },
             "openListOnClick": {
                 "type": "boolean",
@@ -913,6 +925,9 @@ export class DuetCombobox {
             }, {
                 "propName": "activeItem",
                 "methodName": "activeItemHandler"
+            }, {
+                "propName": "inputValue",
+                "methodName": "inputValueHandler"
             }, {
                 "propName": "items",
                 "methodName": "processItems"

package/lib/collection/components/duet-date-picker/date-picker-input.js

@@ -11,5 +11,5 @@ export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value,
         "duet-date-input": true,
         "duet-date-input-has-focus": hasFocus,
     };
-    return (h("div", { class: classes }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption, variation: "button" }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+    return (h("div", { class: classes }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption, variation: "button" }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden, "input-error": !!error }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

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

@@ -133,6 +133,12 @@
   box-shadow: 0 0 0 2px #171c3a !important;
 }
 
+.input-error {
+  border-top-color: rgb(214, 28, 82);
+  border-right-color: rgb(214, 28, 82);
+  border-bottom-color: rgb(214, 28, 82);
+}
+
 .duet-date-dialog {
   position: absolute;
   top: 100%;

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

@@ -31,12 +31,12 @@ export class DuetDatePicker {
             },
             rangeUnderflow: {
                 en: "Date too early",
-                fi: "Päivämäärä liian aikainen",
+                fi: "Liian aikainen päivämäärä",
                 sv: "Datum för tidigt",
             },
             rangeOverflow: {
                 en: "Date too late",
-                fi: "Päivämäärä liian aikainen",
+                fi: "Liian myöhäinen päivämäärä",
                 sv: "Datum för sent",
             },
         };

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

@@ -79,20 +79,20 @@ button {
   cursor: pointer;
 }
 
-.duet-link-is-external.duet-link:not(.block, .button),
-.duet-link-is-download.duet-link:not(.block, .button) {
+.duet-link-is-external.duet-link:not(.block, .button, .card),
+.duet-link-is-download.duet-link:not(.block, .button, .card) {
   text-decoration: none;
 }
-.duet-link-is-external.duet-link:not(.block, .button) .duet-link-content,
-.duet-link-is-download.duet-link:not(.block, .button) .duet-link-content {
+.duet-link-is-external.duet-link:not(.block, .button, .card) .duet-link-content,
+.duet-link-is-download.duet-link:not(.block, .button, .card) .duet-link-content {
   text-decoration: underline;
 }
-.duet-link-is-external.duet-link:not(.block, .button):hover > .duet-link-content,
-.duet-link-is-download.duet-link:not(.block, .button):hover > .duet-link-content {
+.duet-link-is-external.duet-link:not(.block, .button, .card):hover > .duet-link-content,
+.duet-link-is-download.duet-link:not(.block, .button, .card):hover > .duet-link-content {
   text-decoration: none;
 }
-.duet-link-is-external.duet-link:not(.block, .button) .duet-link-icon-tail,
-.duet-link-is-download.duet-link:not(.block, .button) .duet-link-icon-tail {
+.duet-link-is-external.duet-link:not(.block, .button, .card) .duet-link-icon-tail,
+.duet-link-is-download.duet-link:not(.block, .button, .card) .duet-link-icon-tail {
   text-decoration: none;
   white-space: nowrap;
 }
@@ -167,7 +167,8 @@ button {
   transform: translateX(4px);
 }
 
-.duet-link.button {
+.duet-link.button,
+.duet-link.card {
   display: flex;
   gap: 12px;
   align-items: center;
@@ -183,10 +184,12 @@ button {
   outline-offset: -2px;
   transition: all 300ms ease;
 }
-.duet-link.button > * {
+.duet-link.button > *,
+.duet-link.card > * {
   flex-shrink: 0;
 }
-.duet-link.button .duet-link-content {
+.duet-link.button .duet-link-content,
+.duet-link.card .duet-link-content {
   flex-grow: 1;
   flex-shrink: 1;
   font-size: 1rem;
@@ -194,57 +197,119 @@ button {
   color: rgb(8, 42, 77);
   text-align: left;
 }
-.duet-link.button .icon-wrap {
+.duet-link.button .icon-wrap,
+.duet-link.card .icon-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.duet-link.button.duet-link-has-icon-background {
+.duet-link.button.duet-link-has-icon-background,
+.duet-link.card.duet-link-has-icon-background {
   min-height: 60px;
   padding: 12px;
   padding-right: 20px;
   line-height: 1.5;
 }
-.duet-link.button.duet-link-has-icon-background .icon-wrap {
+.duet-link.button.duet-link-has-icon-background .icon-wrap,
+.duet-link.card.duet-link-has-icon-background .icon-wrap {
   width: 36px;
   height: 36px;
   border-radius: 8px;
 }
-.duet-link.button:hover {
+.duet-link.button:hover,
+.duet-link.card:hover {
   border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
 }
 @media (min-width: 48em) {
-  .duet-link.button {
+  .duet-link.button,
+  .duet-link.card {
     min-height: 50px;
   }
-  .duet-link.button.duet-link-has-icon-background {
+  .duet-link.button.duet-link-has-icon-background,
+  .duet-link.card.duet-link-has-icon-background {
     gap: 16px;
     min-height: 72px;
     border-radius: 16px;
   }
-  .duet-link.button.duet-link-has-icon-background .icon-wrap {
+  .duet-link.button.duet-link-has-icon-background .icon-wrap,
+  .duet-link.card.duet-link-has-icon-background .icon-wrap {
     width: 48px;
     height: 48px;
     border-radius: 12px;
   }
-  .duet-link.button.duet-link-has-icon-background .duet-link-content {
+  .duet-link.button.duet-link-has-icon-background .duet-link-content,
+  .duet-link.card.duet-link-has-icon-background .duet-link-content {
     font-size: 1.1rem;
   }
 }
-.duet-link.button.duet-theme-turva {
+.duet-link.button.duet-theme-turva,
+.duet-link.card.duet-theme-turva {
   border-color: rgb(199, 202, 207);
 }
-.duet-link.button.duet-theme-turva .duet-link-content {
+.duet-link.button.duet-theme-turva .duet-link-content,
+.duet-link.card.duet-theme-turva .duet-link-content {
   color: rgb(23, 28, 58);
 }
-.duet-link.button.duet-theme-turva:hover {
+.duet-link.button.duet-theme-turva:hover,
+.duet-link.card.duet-theme-turva:hover {
   border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
 }
-.duet-link.button .block__chevron-icon {
+.duet-link.button .block__chevron-icon,
+.duet-link.card .block__chevron-icon {
   transition: 300ms ease;
 }
-.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon {
+.duet-link.button:not(.duet-link-is-external):hover .block__chevron-icon,
+.duet-link.card:not(.duet-link-is-external):hover .block__chevron-icon {
   transform: translateX(4px);
+}
+
+.duet-link.card {
+  border-color: rgb(228, 236, 239);
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
+}
+.duet-link.card.duet-theme-turva {
+  border-color: rgb(234, 235, 239);
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13);
+}
+.duet-link.card:not(.duet-link-has-icon) {
+  gap: 12px;
+  padding: 16px;
+}
+.duet-link.card .chevron-wrap {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.duet-link.card.duet-link-has-icon {
+  gap: 12px;
+  align-items: flex-start;
+  padding: 16px;
+}
+.duet-link.card.duet-link-has-icon .icon-wrap {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+}
+.duet-link.card.duet-link-has-icon .chevron-wrap {
+  height: 48px;
+}
+@media (min-width: 48em) {
+  .duet-link.card:not(.duet-link-has-icon) {
+    gap: 20px;
+    padding: 24px;
+  }
+  .duet-link.card.duet-link-has-icon {
+    gap: 20px;
+    padding: 24px;
+  }
+  .duet-link.card.duet-link-has-icon .icon-wrap {
+    width: 62px;
+    height: 62px;
+    border-radius: 16px;
+  }
+  .duet-link.card.duet-link-has-icon .chevron-wrap {
+    height: 62px;
+  }
 }

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

@@ -79,6 +79,7 @@ export class DuetLink {
         this.mediaQuerySmall = window.matchMedia(breakpointToToken["xx-small"]);
         this.mediaQueryMedium = window.matchMedia(breakpointToToken["medium"]);
         this.isSmallScreen = this.mediaQuerySmall.matches;
+        this.isMediumScreen = this.mediaQueryMedium.matches;
         this.mediaQuerySmall.addEventListener("change", this.screenTestBound);
         this.mediaQueryMedium.addEventListener("change", this.screenTestBound);
     }
@@ -95,6 +96,7 @@ export class DuetLink {
     }
     screenTest(event) {
         this.isSmallScreen = event.matches;
+        this.isMediumScreen = event.matches;
     }
     resolveDownload() {
         if (this.download === "") {
@@ -110,11 +112,17 @@ export class DuetLink {
     renderBlockContent() {
         return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
-    renderButtonContent() {
+    renderButtonCardContent() {
         const iconWrapStyle = {
             "background-color": getColorByName(this.iconBackground, this.theme),
         };
-        return (h(Fragment, null, h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: !this.iconBackground || this.isMediumScreen ? "small" : "medium", name: this.icon, margin: "none", color: this.iconColor })), h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" })));
+        const iconSize = () => {
+            if (this.variation === "button") {
+                return this.iconBackground && this.isMediumScreen ? "medium" : "small";
+            }
+            return this.isMediumScreen ? "large" : "medium";
+        };
+        return (h(Fragment, null, this.icon && (h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: iconSize(), name: this.icon, margin: "none", color: this.iconColor }))), h("div", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("span", { class: "chevron-wrap" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
     }
     renderContent() {
         switch (this.variation) {
@@ -123,7 +131,8 @@ export class DuetLink {
             case "block":
                 return this.renderBlockContent();
             case "button":
-                return this.renderButtonContent();
+            case "card":
+                return this.renderButtonCardContent();
         }
     }
     /**
@@ -133,10 +142,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'aad1a5cfaf3fb8d502c12de032a4fed3069f3927', class: {
+        return (h(Host, { key: '2025edd3774d559f0d6877498e0a806532fb310c', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'c4dc2d9716f29769b6aa60d07788ab96b4946f15', href: this.url, class: {
+            } }, h(Tag, { key: 'ee013e25058fdfe22cf04784e06162181b9ff5a2', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -169,7 +178,7 @@ export class DuetLink {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"button\" | \"default\"",
+                    "resolved": "\"block\" | \"button\" | \"card\" | \"default\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",

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

@@ -32,6 +32,7 @@
 .duet-notification {
   display: block;
   padding: 16px;
+  padding-bottom: 0;
   cursor: pointer;
 }
 :host(:first-of-type) .duet-notification {
@@ -78,6 +79,7 @@
 .duet-notification-container {
   position: relative;
   display: flex;
+  padding-bottom: 16px;
   border-bottom: 1px solid rgb(212, 223, 229);
 }
 
@@ -131,6 +133,7 @@
     opacity: 1;
   }
   .duet-notification {
+    padding: 16px;
     border-bottom: 1px solid rgb(212, 223, 229);
   }
   .duet-notification:hover {
@@ -141,6 +144,7 @@
     background: rgb(240, 247, 250);
   }
   .duet-notification-container {
+    padding-bottom: 0;
     border-bottom-style: none;
   }
 }

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -31,7 +31,7 @@ export class DuetNumberInput {
                 this.subtract(ev);
             }
             else if (isBackspaceKey(ev)) {
-                this.clearValue();
+                this.clearValue(ev);
             }
         };
         this.handleChange = (ev) => {
@@ -53,6 +53,9 @@ export class DuetNumberInput {
                     });
                 }
                 catch (e) {
+                    if (input.value !== "-") {
+                        this.clearValue(ev);
+                    }
                     this.duetInput.emit({
                         component: "duet-number-input",
                         originalEvent: ev,
@@ -266,9 +269,12 @@ export class DuetNumberInput {
         const currentValue = SafeParseFloat(this.value, this.locale);
         return this.value === undefined || this.value === null || isNaN(currentValue) ? null : currentValue;
     }
-    clearValue() {
-        this.value = null;
+    clearValue(ev) {
         this.duetInputElement.value = "";
+        if (this.value !== null) {
+            this.value = null;
+            this.emitNull(ev);
+        }
     }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;

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

@@ -50,6 +50,10 @@
 .duet-popup-menu-list.fixed {
   position: fixed;
 }
+.duet-popup-menu-list.scroll-visible {
+  overflow-y: scroll;
+  scroll-margin: 20px;
+}
 .duet-popup-menu-list.duet-theme-turva {
   color: rgb(23, 28, 58) !important;
   background: rgb(255, 255, 255);

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import { spaceXSmall } from "@duetds/tokens";
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
@@ -58,6 +59,7 @@ export class DuetPopupMenu {
         this.mainAxisOffset = 0;
         this.crossAxisOffset = 0;
         this.controllerIcon = "action-arrow-down-small";
+        this.scrollLimit = undefined;
     }
     /**
      * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
@@ -67,9 +69,10 @@ export class DuetPopupMenu {
         return this._controller;
     }
     set controller(value) {
-        if (this.controller === value) {
+        if (this._controller === value) {
             return;
         }
+        this._controller = value;
         if (typeof value === "string") {
             this.setOpenButton(document.getElementById(value));
             if (this.openButton) {
@@ -129,7 +132,6 @@ export class DuetPopupMenu {
         if (this.open) {
             // When Esc is pressed the menu should be closed
             if (isEscapeKey(evt)) {
-                this.focusOpenButton();
                 this.hide();
             }
         }
@@ -237,7 +239,7 @@ export class DuetPopupMenu {
             }
             setTimeout(() => {
                 if (this.accessibleRole === "menu") {
-                    this.focusOpenButton();
+                    focusElement(this.openButton);
                 }
                 this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
                 if (this.accessibleRole !== "listbox") {
@@ -246,14 +248,18 @@ export class DuetPopupMenu {
             }, 200);
         }
     }
-    focusOpenButton() {
-        if (this.open) {
-            focusElement(this.openButton);
-        }
-    }
     get itemElements() {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
+    get popupMenuStyleHeight() {
+        if (this.itemElements.length > 0 && this.scrollLimit) {
+            const paddings = Number(spaceXSmall.replace("px", "")) * 2;
+            return `${this.itemElements[0].offsetHeight * this.scrollLimit + paddings}px`;
+        }
+        else {
+            return "auto";
+        }
+    }
     async getFocusedItemIndex() {
         const items = this.itemElements;
         for (let i = 0; i < items.length; i++) {
@@ -269,10 +275,16 @@ export class DuetPopupMenu {
             left: `${this.menuX}px`,
             position: this.position,
             overflowY: "auto",
+            height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '1573445d7c27f2e19d2ce614aba54a6af305ff86' }, h("div", { key: '15d45b18fb7164b94698327e601076a3f51b1216', ref: element => {
+        return (h(Host, { key: '4754c8522cdd93a4e90398840cb321821636b489' }, h("div", { key: '45ceb31093aa93bf21e61daed2c77c4ba816556f', ref: element => {
                 this.menuElement = element;
-            }, style: styles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", { key: 'ea1ea99244036c122bb61dff60cb09c0b4393979' }))));
+            }, 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 }, h("slot", { key: '88dde9607c352adc70eb6a27b5fab917585cef1e' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -590,6 +602,25 @@ export class DuetPopupMenu {
                 "attribute": "controller-icon",
                 "reflect": false,
                 "defaultValue": "\"action-arrow-down-small\""
+            },
+            "scrollLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Limit the amount of visible items in Popup Menu before showing a scroll bar."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "scroll-limit",
+                "reflect": false
             }
         };
     }

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

@@ -66,11 +66,11 @@ export class DuetPopupMenuItem {
             "duet-theme-turva": this.theme === "turva",
             "active-descendant": this.activeDescendant,
         };
-        return (h(Host, { key: '02e7a087e9f8df28e015c45b2182ab19167c39a2', role: this.accessibleRole }, h(TagName, { key: 'aafbfd9c8bd9cab5f2b2ba259efc8c31964bad10', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" || "option" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '571151b958d0ef9af6f52cda7785555978c9d942', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '99b4a1e46f824fdc684531dfe55b7bc66e06370c', class: "duet-popup-menu-item-label" }, h("slot", { key: 'f76853aa6c7b441dcca9193dd8e73a117a49916f' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'c0a0f628bec874ca8d2d1fe9f1a0992703cfd1c2', name: this.url && this.external
+        return (h(Host, { key: '02e7a087e9f8df28e015c45b2182ab19167c39a2', role: this.accessibleRole }, h(TagName, { key: 'ac6c8e523bb7dbd6ce78dfb8e5ba1a34c765f538', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '003f72c807601366ce44ba41c92d01cc3867a995', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '5936e48916d5c665070e490074e5310b52ad0cd9', class: "duet-popup-menu-item-label" }, h("slot", { key: '4f365167fa1ae20a9a26f91352791b8b94007088' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '52e54059ac3b56ad022ed42085029a58b7010806', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'f4287b3ef8b66ce1512254aa8e6383907650283d', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '16fb5260a8d79c5b20bc7dcbb0d6fb078d41f0d5', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }