@duetds/components 8.5.5 → 8.6.1

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

@@ -190,6 +190,9 @@ duet-caption:not(:last-of-type) {
 .duet-input.is-date {
   padding-right: 64px !important;
 }
+.duet-input.after-chip {
+  padding-left: 8px !important;
+}
 .has-error .duet-input {
   border-color: rgb(222, 35, 98) !important;
 }
@@ -446,4 +449,30 @@ duet-caption:not(:last-of-type) {
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error:hover:not(.disabled) .duet-input-relative {
   box-shadow: 0 0 0 1px #e55039;
+}
+
+.duet-input-container.has-chips .duet-input-relative {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  width: auto;
+  border: 1px solid rgb(144, 149, 153);
+  border-radius: 4px;
+  box-shadow: initial;
+  transition: box-shadow 150ms ease, border 150ms ease;
+}
+.duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
+  border-color: rgb(116, 116, 117);
+}
+.duet-input-container.has-chips .duet-input-relative .duet-input {
+  flex-basis: 4rem;
+  flex-grow: 1;
+  border-width: 0 !important;
+}
+.duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {
+  border-width: 0 !important;
+  box-shadow: none !important;
 }

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

@@ -173,6 +173,7 @@ export class DuetInput {
         this.required = false;
         this.type = "text";
         this.variation = "default";
+        this.chips = false;
         this.label = "Label";
         this.labelColor = undefined;
         this.labelWeight = undefined;
@@ -201,7 +202,7 @@ export class DuetInput {
         if (((_a = this === null || this === void 0 ? void 0 : this.nativeInput) === null || _a === void 0 ? void 0 : _a.value) !== this.value) {
             const restoreCursor = resetCursor(this.nativeInput);
             this.nativeInput.value = this.value;
-            // restore selection position after having set value
+            // restore selection position after having set valuea
             // (in webkit based browsers settings value trigger cursor position and will set it to EndOfText)
             restoreCursor();
         }
@@ -271,6 +272,39 @@ export class DuetInput {
             this.value = "";
         }
     }
+    getAllChips() {
+        return Array.from(this.element.querySelectorAll(".duet-input-relative duet-chip"));
+    }
+    /**
+     * @internal
+     * Add a chip to the input
+     */
+    async addChip(chip) {
+        const container = this.element.querySelector(".duet-input-relative");
+        const input = container.querySelector("input");
+        container.insertBefore(chip, input);
+    }
+    /**
+     * @internal
+     * Does the input have a chip with the given value and text
+     */
+    async hasChip({ value, text }) {
+        return this.getAllChips().some(chip => chip.value === value && chip.textContent === text);
+    }
+    /**
+     * @internal
+     * Get all chips from the input
+     */
+    async getChips() {
+        return this.getAllChips();
+    }
+    /**
+     * @internal
+     * Remove all chips from the input
+     */
+    async clearChips() {
+        this.getAllChips().forEach(chip => chip.remove());
+    }
     /**
      * render() function
      * Always the last one in the class.
@@ -317,6 +351,7 @@ export class DuetInput {
                     (!!this.icon ||
                         (this.type !== "text" && this.type !== "tel" && this.type !== "password" && this.type !== "time")),
                 "has-error": !!this.error,
+                "has-chips": this.chips,
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
@@ -325,6 +360,7 @@ export class DuetInput {
                 disabled: this.disabled,
                 "is-number": this.component === "number",
                 "is-date": this.component === "date",
+                "after-chip": this.getAllChips().length > 0,
             }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
@@ -781,6 +817,27 @@ export class DuetInput {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
+            "chips": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Render a container for chips"
+                        }],
+                    "text": ""
+                },
+                "attribute": "chips",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "label": {
                 "type": "string",
                 "mutable": true,
@@ -995,8 +1052,11 @@ export class DuetInput {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Used internally in Duet to adjust whether this component acts as e.g. number input."
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Used internally in Duet to adjust whether this component acts as e.g. number input."
+                        }],
+                    "text": ""
                 },
                 "attribute": "component",
                 "reflect": false,
@@ -1314,6 +1374,102 @@ export class DuetInput {
                     "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
                     "tags": []
                 }
+            },
+            "addChip": {
+                "complexType": {
+                    "signature": "(chip: HTMLDuetChipElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "chip",
+                            "type": "HTMLDuetChipElement",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDuetChipElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetChipElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Add a chip to the input"
+                        }]
+                }
+            },
+            "hasChip": {
+                "complexType": {
+                    "signature": "({ value, text }: { value: string; text: string; }) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ value: string; text: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Does the input have a chip with the given value and text"
+                        }]
+                }
+            },
+            "getChips": {
+                "complexType": {
+                    "signature": "() => Promise<HTMLDuetChipElement[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLDuetChipElement": {
+                            "location": "global",
+                            "id": "global::HTMLDuetChipElement"
+                        }
+                    },
+                    "return": "Promise<HTMLDuetChipElement[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Get all chips from the input"
+                        }]
+                }
+            },
+            "clearChips": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Remove all chips from the input"
+                        }]
+                }
             }
         };
     }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -45,6 +45,16 @@
 .duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-menu-bar-button .menu-bar-button-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-button .menu-bar-button-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
 .duet-menu-bar-button.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.js

@@ -1,22 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarButton {
     constructor() {
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
-        this.iconSize = "x-small";
         this.accessibleLabel = undefined;
         this.accessibleControls = undefined;
         this.accessiblePopup = "false";
@@ -37,26 +25,6 @@ export class DuetMenuBarButton {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     /**
      * Sets focus on underlying button element.
      */
@@ -73,7 +41,7 @@ export class DuetMenuBarButton {
         return (h(Host, { role: "listitem", onfocus: () => this.setFocus() }, h("button", { ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
+            }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { class: "menu-bar-button-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
     }
     static get is() { return "duet-menu-bar-button"; }
     static get encapsulation() { return "shadow"; }
@@ -324,11 +292,6 @@ export class DuetMenuBarButton {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -103,6 +103,16 @@
 .duet-theme-turva .duet-menu-bar-dropdown button.active::after {
   background: rgb(198, 12, 48);
 }
+.duet-menu-bar-dropdown .menu-bar-dropdown-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-dropdown .menu-bar-dropdown-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
 .duet-menu-bar-dropdown .items {
   position: absolute;
   top: 70%;

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js

@@ -1,25 +1,11 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetMenuBarDropdown {
     constructor() {
-        /**
-         * Own Properties.
-         */
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
         this.onClick = () => {
             this.open = !this.open;
         };
@@ -34,7 +20,6 @@ export class DuetMenuBarDropdown {
                     return "right";
             }
         };
-        this.iconSize = "x-small";
         this.accessibleLabel = undefined;
         this.theme = "";
         this.open = false;
@@ -52,26 +37,6 @@ export class DuetMenuBarDropdown {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     handleEscape(e) {
         if (isEscapeKey(e)) {
             this.open = false;
@@ -96,7 +61,7 @@ export class DuetMenuBarDropdown {
                 [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
             } }, h("button", { ref: element => (this.button = element), "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { class: "menu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
             } }, h("slot", null)))));
@@ -194,11 +159,6 @@ export class DuetMenuBarDropdown {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get methods() {
         return {
             "setFocus": {

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

@@ -44,6 +44,16 @@
 .duet-theme-turva .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-menu-bar-link .menu-bar-link-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-link .menu-bar-link-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
 .duet-menu-bar-link.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }

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

@@ -1,25 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetMenuBarLink {
     constructor() {
-        /**
-         * Own Properties.
-         */
-        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
-        this.boundMqlFunctions = [];
-        this.changeIconSize = () => {
-            if (this.mql[0].matches) {
-                this.iconSize = "x-small";
-            }
-            else {
-                this.iconSize = "small";
-            }
-        };
-        this.iconSize = "x-small";
         this.theme = "";
         this.active = false;
         this.href = "#";
@@ -32,26 +17,6 @@ export class DuetMenuBarLink {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
-    connectedCallback() {
-        this.changeIconSize();
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].addEventListener) {
-                const bound = this.changeIconSize.bind(this);
-                this.mql[i].addEventListener("change", bound);
-                this.boundMqlFunctions[i] = bound;
-            }
-        }
-    }
-    disconnectedCallback() {
-        for (let i = 0; i < this.mql.length; i++) {
-            // removeEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
-            }
-        }
-        this.boundMqlFunctions = [];
-    }
     /**
      * render() function
      * Always the last one in the class.
@@ -61,7 +26,7 @@ export class DuetMenuBarLink {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { class: "menu-bar-link-icon", theme: this.theme, size: "auto", name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
     }
     static get is() { return "duet-menu-bar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -174,10 +139,5 @@ export class DuetMenuBarLink {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.css

@@ -139,6 +139,16 @@
     background: rgb(198, 12, 48);
   }
 }
+.duet-submenu-bar-dropdown .submenu-bar-dropdown-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar-dropdown .submenu-bar-dropdown-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
 .duet-submenu-bar-dropdown .items {
   display: flex;
   flex-direction: column;

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js

@@ -15,11 +15,9 @@ export class DuetSubmenuBarDropdown {
         this.checkIsDesktop = () => {
             if (this.mql[0].matches) {
                 this.isDesktop = true;
-                this.iconSize = "x-small";
             }
             else {
                 this.isDesktop = false;
-                this.iconSize = "small";
             }
         };
         this.onClick = () => {
@@ -38,7 +36,6 @@ export class DuetSubmenuBarDropdown {
             }
         };
         this.isDesktop = false;
-        this.iconSize = "small";
         this.theme = "";
         this.active = false;
         this.open = false;
@@ -107,7 +104,7 @@ export class DuetSubmenuBarDropdown {
             } }, h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("span", { class: "label-text" }, h("slot", { name: "label" })), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
             } }, h("slot", null)))));
@@ -208,8 +205,7 @@ export class DuetSubmenuBarDropdown {
     }
     static get states() {
         return {
-            "isDesktop": {},
-            "iconSize": {}
+            "isDesktop": {}
         };
     }
     static get methods() {

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

@@ -52,6 +52,16 @@
 .duet-theme-turva .duet-submenu-bar-link:focus, .duet-submenu-bar-link:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-submenu-bar-link .submenu-bar-link-icon {
+  width: 20px;
+  height: 20px;
+}
+@media (min-width: 62em) {
+  .duet-submenu-bar-link .submenu-bar-link-icon {
+    width: 16px;
+    height: 16px;
+  }
+}
 @media (min-width: 62em) {
   .duet-submenu-bar-link {
     flex-direction: column;