@duetds/components 8.6.0 → 8.6.2

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

@@ -25,6 +25,8 @@
   display: flex;
   justify-content: center;
   width: auto;
+  container: duet-banner-container;
+  container-type: inline-size;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
@@ -36,12 +38,16 @@
 
 .duet-banner {
   display: grid;
+  grid-template-rows: min-content 1fr;
   width: 100%;
   height: 100%;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-style: normal;
   text-align: left;
-  border-radius: 24px;
+  border-radius: 16px;
+  /* stylelint-disable */
+  /* stylelint-disable */
+  /* stylelint-disable */
 }
 .duet-banner.duet-p-0 {
   padding: 0 !important;
@@ -51,34 +57,45 @@
 }
 .duet-banner .visual {
   position: relative;
+  display: none;
   overflow: hidden;
-  border-top-left-radius: 24px;
-  border-top-right-radius: 24px;
+  /* stylelint-disable */
+}
+@container duet-banner-container (min-width: 0px) {
+  .duet-banner .visual {
+    /* stylelint-enable */
+    display: block;
+  }
 }
 .duet-banner .visual .image-container {
   position: relative;
-  width: 400px;
-  height: 400px;
+  aspect-ratio: 2/1;
   overflow: hidden;
-  border-radius: 20%;
-  transform: rotate(7deg);
 }
 .duet-banner .visual .image {
   position: relative;
-  top: 20px;
   width: 100%;
   height: 100%;
-  transform: rotate(-7deg);
   object-fit: cover;
+  object-position: center;
 }
 .duet-banner .visual .icon {
   position: absolute;
 }
+.duet-banner .visual .brand-shape {
+  position: absolute;
+  top: 0;
+  left: 72%;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background: url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
+}
 .duet-banner .content {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  padding: 0 20px 36px;
+  padding: 16px 20px 28px;
 }
 .duet-banner .content .description {
   hyphens: auto;
@@ -91,135 +108,98 @@
   justify-content: flex-end;
   padding-top: 16px;
 }
-.duet-banner.small {
-  grid-template-rows: 335px 1fr;
-  max-width: 335px;
-}
-.duet-banner.small .visual {
-  border-top-left-radius: 24px;
-  border-top-right-radius: 24px;
+.duet-banner .visual {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
 }
-.duet-banner.small .visual .image-container {
-  top: -130px;
-  left: -40px;
+.duet-banner .visual .image-container {
+  width: 100%;
+  height: auto;
+  border-radius: 0;
 }
-.duet-banner.small .visual .icon {
+.duet-banner .visual .icon {
   bottom: 30px;
   left: 15px;
 }
-.duet-banner.medium {
-  grid-template-rows: none;
-  grid-template-columns: 50% 50%;
-  max-width: 542px;
-  height: 288px;
-}
-.duet-banner.medium .visual {
-  border-top-left-radius: 24px;
-  border-bottom-left-radius: 24px;
-}
-.duet-banner.medium .visual .image-container {
-  position: absolute;
-  bottom: -72px;
-  left: -178px;
-}
-.duet-banner.medium .visual .image {
-  width: auto;
-  height: auto;
-}
-.duet-banner.medium .visual .icon {
-  top: 36px;
-  left: 168px;
-}
-.duet-banner.medium .content {
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0 72px 0 0;
-}
-.duet-banner.medium .action {
-  flex-grow: 0;
-}
-.duet-banner.large {
-  grid-template-rows: none;
-  grid-template-columns: 50% 50%;
-  max-width: 1112px;
-  height: 320px;
-  max-height: none;
-}
-.duet-banner.large .visual {
-  border-top-left-radius: 24px;
-  border-bottom-left-radius: 24px;
-}
-.duet-banner.large .visual .image-container {
-  position: relative;
-  top: -30px;
-  left: -30px;
-}
-.duet-banner.large .visual .image {
-  top: -15px;
-  left: 30px;
-  width: 100%;
-  height: 100%;
-}
-.duet-banner.large .visual .icon {
-  top: 40px;
-  bottom: auto;
-  left: 335px;
-}
-.duet-banner.large .content {
-  align-items: flex-start;
-  justify-content: center;
-  padding: 0 72px 0 0;
-}
-.duet-banner.large .action {
-  flex-grow: 0;
-}
 .duet-banner.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";
 }
-.duet-banner.duet-theme-turva .visual .image-container {
-  width: 526px;
-  height: 456px;
-  transform: none;
-  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  -webkit-mask-repeat: no-repeat;
-  mask-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
-  mask-repeat: no-repeat;
-}
-.duet-banner.duet-theme-turva .visual .image {
-  transform: none;
-}
-.duet-banner.duet-theme-turva.small .visual .image-container {
-  top: -164px;
-  left: -147px;
-}
-.duet-banner.duet-theme-turva.small .visual .image {
-  top: 0;
-  left: 0;
-}
-.duet-banner.duet-theme-turva.small .visual .icon {
-  bottom: 15px;
-}
-.duet-banner.duet-theme-turva.medium .visual .image-container {
-  top: -54.923px;
-  left: -185px;
-  width: 410px;
-  height: 422px;
-}
-.duet-banner.duet-theme-turva.medium .visual .image {
-  top: 0;
-  left: 0;
-}
-.duet-banner.duet-theme-turva.large .visual .image-container {
-  top: -54.923px;
-  left: -147px;
-  width: 526px;
-  height: 456px;
-}
-.duet-banner.duet-theme-turva.large .visual .image {
-  top: 0;
-  left: 0;
-}
-.duet-banner.duet-theme-turva.large .visual .icon {
-  bottom: auto;
-  left: 295px;
+.duet-banner.duet-theme-turva .visual .brand-shape {
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+}
+@container duet-banner-container (min-width: 486px) {
+  .duet-banner {
+    /* stylelint-enable */
+    grid-template-rows: none;
+    grid-template-columns: 50% 50%;
+  }
+  .duet-banner .visual {
+    border-top-left-radius: 16px;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 16px;
+  }
+  .duet-banner .visual .image-container {
+    height: 100%;
+  }
+  .duet-banner .visual .image {
+    width: 100%;
+    height: 100%;
+  }
+  .duet-banner .visual .icon {
+    top: 36px;
+    left: 168px;
+  }
+  .duet-banner .visual .brand-shape {
+    display: block;
+  }
+  .duet-banner .content {
+    align-items: flex-start;
+    justify-content: center;
+    padding: 28px 28px 28px 0;
+  }
+  .duet-banner .action {
+    flex-grow: 0;
+  }
+}
+@container duet-banner-container (min-width: 586px) {
+  .duet-banner {
+    /* stylelint-enable */
+  }
+  .duet-banner .visual .brand-shape {
+    left: 80%;
+  }
+}
+@container duet-banner-container (min-width: 900px) {
+  .duet-banner {
+    /* stylelint-enable */
+    grid-template-rows: none;
+    grid-template-columns: 50% 50%;
+  }
+  .duet-banner .visual {
+    border-top-left-radius: 16px;
+    border-bottom-left-radius: 16px;
+  }
+  .duet-banner .visual .image-container {
+    height: 100%;
+  }
+  .duet-banner .visual .image {
+    width: 100%;
+    height: 100%;
+  }
+  .duet-banner .visual .icon {
+    top: 40px;
+    bottom: auto;
+    left: 335px;
+  }
+  .duet-banner .visual .brand-shape {
+    display: block;
+  }
+  .duet-banner .content {
+    align-items: flex-start;
+    justify-content: center;
+    padding: 48px 48px 48px 0;
+  }
+  .duet-banner .action {
+    flex-grow: 0;
+  }
 }

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

@@ -14,7 +14,7 @@ import { getColorByName } from "../../utils/token-utils";
  */
 export class DuetBanner {
     constructor() {
-        this.checkBannerSize = () => {
+        this.checkCurrentSize = () => {
             const elementSize = this.element.clientWidth;
             if (elementSize < 500 || this.size === "small") {
                 this.currentSize = "small";
@@ -31,12 +31,15 @@ export class DuetBanner {
          * Default to smaller button size for small and medium banners.
          */
         this.setButtonSize = () => {
-            if (this.hasActionSlot) {
+            if (this.hasActionSlot && this.currentSize) {
                 const buttons = this.element.querySelectorAll("[slot='action'] duet-button, duet-button[slot='action']");
                 for (const button of buttons) {
                     if (button && button.getAttribute("size") === null && this.currentSize !== "large") {
                         button.size = "small";
                     }
+                    else if (button && button.getAttribute("size") === null && this.currentSize === "large") {
+                        button.size = "medium";
+                    }
                 }
             }
         };
@@ -65,13 +68,13 @@ export class DuetBanner {
         this.setButtonSize();
     }
     connectedCallback() {
-        window.addEventListener("resize", this.checkBannerSize);
+        window.addEventListener("resize", this.checkCurrentSize);
     }
     disconnectedCallback() {
-        window.removeEventListener("resize", this.checkBannerSize);
+        window.removeEventListener("resize", this.checkCurrentSize);
     }
     componentDidRender() {
-        this.checkBannerSize();
+        this.checkCurrentSize();
     }
     /**
      * render() function
@@ -92,7 +95,7 @@ export class DuetBanner {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
-            }, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, this.image && h(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description", style: { color } }, h("slot", { name: "description" }))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
+            }, style: bannerStyles }, h("div", { class: "visual" }, h("div", { class: "image-container" }, this.image && h(DuetPicture, Object.assign({}, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { class: "brand-shape" })), h("div", { class: "content" }, this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description", style: { color } }, h("slot", { name: "description" }))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-choice-group/duet-choice-group.e2e.js

@@ -84,4 +84,19 @@ describe("duet-choice-group", () => {
         const value = await choiceGroup.getProperty("value");
         expect(value).toBe("svenska");
     });
+    it("Should correctly update initial value if it's undefined", async () => {
+        const page = await createPage(`
+      <duet-choice-group label="This choice group has a tooltip" tooltip="Hello, I'm a tooltip!.">
+        <duet-choice label="Elainvakuutus" type="radio" value="one" expand></duet-choice>
+        <duet-choice label="Autovakuutus" type="radio" value="two" expand></duet-choice>
+      </duet-choice-group>
+    `);
+        const component = await page.find("duet-choice-group");
+        const initialValue = await component.callMethod("getInitialValue");
+        expect(initialValue).toBeUndefined();
+        component.setProperty("value", "one");
+        await page.waitForTimeout(100);
+        const initialValueAfterSet = await component.callMethod("getInitialValue");
+        expect(initialValueAfterSet).toBe("one");
+    });
 });

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -80,6 +80,13 @@ export class DuetChoiceGroup {
             this.initialValue = this.value;
         }
     }
+    /**
+     * @internal
+     * Get initial value
+     */
+    async getInitialValue() {
+        return this.initialValue;
+    }
     /**
      * Local methods
      */
@@ -461,6 +468,30 @@ export class DuetChoiceGroup {
             }
         };
     }
+    static get methods() {
+        return {
+            "getInitialValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Get initial value"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

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

@@ -150,6 +150,9 @@ button {
 .block.duet-link.none {
   padding: 0;
 }
+.block .block__icon {
+  display: flex;
+}
 .block .block__content {
   position: relative;
   bottom: 2px;

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

@@ -24,6 +24,8 @@ export class DuetLink {
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
         this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
         this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
+        this.accessibleExpanded = undefined;
+        this.accessiblePopup = "false";
         this.identifier = undefined;
         this.theme = "";
         this.url = "#";
@@ -141,6 +143,7 @@ export class DuetLink {
      */
     render() {
         const Tag = !this.url ? "button" : "a";
+        const isButton = Tag === "button";
         return (h(Host, { class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
@@ -155,7 +158,7 @@ export class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }
@@ -339,6 +342,41 @@ export class DuetLink {
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelDownloadDefaults)"
             },
+            "accessibleExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content.\nOnly works with empty url."
+                },
+                "attribute": "accessible-expanded",
+                "reflect": true
+            },
+            "accessiblePopup": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-haspopup attribute to a button. Only works with empty url."
+                },
+                "attribute": "accessible-popup",
+                "reflect": true,
+                "defaultValue": "\"false\""
+            },
             "identifier": {
                 "type": "string",
                 "mutable": false,

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%;