@duetds/components 8.6.0 → 8.6.2

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;

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

@@ -1,26 +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 DuetSubmenuBarLink {
     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 = "small";
         this.theme = "";
         this.active = false;
         this.href = "#";
@@ -32,26 +17,6 @@ export class DuetSubmenuBarLink {
     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)) {
             const dropdown = this.element.closest("duet-submenu-bar");
@@ -64,7 +29,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("span", { class: "label" }, h("slot", null)))));
+        return (h(Host, null, h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { class: "label" }, h("slot", null)))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -160,10 +125,5 @@ export class DuetSubmenuBarLink {
             }
         };
     }
-    static get states() {
-        return {
-            "iconSize": {}
-        };
-    }
     static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-upload-aria-status/duet-upload-aria-status.js

@@ -2,6 +2,10 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+/**
+ * @internal
+ * This component is for internal use.
+ */
 export class DuetUploadAriaStatus {
     constructor() {
         /**

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

@@ -6,6 +6,10 @@ import { inheritGlobalTheme } from "../../common";
 import { getLocaleString } from "../../utils/language-utils";
 import { getI18nError } from "../duet-upload/errorcodes.utils";
 import { formatBytes } from "../duet-upload/upload.helpers";
+/**
+ * @internal
+ * This component is for internal use.
+ */
 export class DuetUploadItem {
     constructor() {
         this.fileUploadingInfo = {

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-03152b20.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-f4ac6968.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -17,14 +17,14 @@ const DuetPicture = ({ img, sources }) => {
         h("img", Object.assign({}, img))));
 };
 
-const duetBannerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:36px !important;margin-bottom:36px !important;display:flex;justify-content:center;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;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}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;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}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .content .description{hyphens:auto}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;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.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .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}";
+const duetBannerCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  margin-right: 36px !important;\n  margin-bottom: 36px !important;\n  display: flex;\n  justify-content: center;\n  width: auto;\n  container: duet-banner-container;\n  container-type: inline-size;\n}\n:host:last-child, :host:last-of-type {\n  margin-right: 0 !important;\n}\n\n:host(.duet-m-0) {\n  margin: 0 !important;\n}\n\n.duet-banner {\n  display: grid;\n  grid-template-rows: min-content 1fr;\n  width: 100%;\n  height: 100%;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  text-align: left;\n  border-radius: 16px;\n  /* stylelint-disable */\n  /* stylelint-disable */\n  /* stylelint-disable */\n}\n.duet-banner.duet-p-0 {\n  padding: 0 !important;\n}\n.duet-banner.duet-m-0 {\n  margin: 0 !important;\n}\n.duet-banner .visual {\n  position: relative;\n  display: none;\n  overflow: hidden;\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 0px) {\n  .duet-banner .visual {\n    /* stylelint-enable */\n    display: block;\n  }\n}\n.duet-banner .visual .image-container {\n  position: relative;\n  aspect-ratio: 2/1;\n  overflow: hidden;\n}\n.duet-banner .visual .image {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n.duet-banner .visual .icon {\n  position: absolute;\n}\n.duet-banner .visual .brand-shape {\n  position: absolute;\n  top: 0;\n  left: 72%;\n  display: none;\n  width: 100%;\n  height: 100%;\n  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\");\n}\n.duet-banner .content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 20px 28px;\n}\n.duet-banner .content .description {\n  hyphens: auto;\n}\n.duet-banner .action {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-top: 16px;\n}\n.duet-banner .visual {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n.duet-banner .visual .image-container {\n  width: 100%;\n  height: auto;\n  border-radius: 0;\n}\n.duet-banner .visual .icon {\n  bottom: 30px;\n  left: 15px;\n}\n.duet-banner.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-banner.duet-theme-turva .visual .brand-shape {\n  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\");\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner {\n    /* stylelint-enable */\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner .visual {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner .visual .icon {\n    top: 36px;\n    left: 168px;\n  }\n  .duet-banner .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 28px 28px 28px 0;\n  }\n  .duet-banner .action {\n    flex-grow: 0;\n  }\n}\n@container duet-banner-container (min-width: 586px) {\n  .duet-banner {\n    /* stylelint-enable */\n  }\n  .duet-banner .visual .brand-shape {\n    left: 80%;\n  }\n}\n@container duet-banner-container (min-width: 900px) {\n  .duet-banner {\n    /* stylelint-enable */\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner .visual {\n    border-top-left-radius: 16px;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner .visual .icon {\n    top: 40px;\n    bottom: auto;\n    left: 335px;\n  }\n  .duet-banner .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 48px 48px 48px 0;\n  }\n  .duet-banner .action {\n    flex-grow: 0;\n  }\n}";
 
 const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.checkBannerSize = () => {
+        this.checkCurrentSize = () => {
             const elementSize = this.element.clientWidth;
             if (elementSize < 500 || this.size === "small") {
                 this.currentSize = "small";
@@ -41,12 +41,15 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
          * 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";
+                    }
                 }
             }
         };
@@ -75,13 +78,13 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
         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
@@ -102,7 +105,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
-            }, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h$1("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$1("div", { class: "content" }, this.hasHeadingSlot && (h$1("div", { class: "heading" }, h$1("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h$1("span", null, h$1("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { class: "description", style: { color } }, h$1("slot", { name: "description" }))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("slot", { name: "action" })))))));
+            }, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))), 1 > 2  , h$1("div", { class: "brand-shape" })), h$1("div", { class: "content" }, this.hasHeadingSlot && (h$1("div", { class: "heading" }, h$1("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h$1("span", null, h$1("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { class: "description", style: { color } }, h$1("slot", { name: "description" }))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("slot", { name: "action" })))))));
     }
     get element() { return this; }
     static get style() { return duetBannerCss; }

package/lib/dist-custom-elements/duet-choice-group.js

@@ -83,6 +83,13 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
             this.initialValue = this.value;
         }
     }
+    /**
+     * @internal
+     * Get initial value
+     */
+    async getInitialValue() {
+        return this.initialValue;
+    }
     /**
      * Local methods
      */
@@ -155,7 +162,8 @@ const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup
         "value": [1537],
         "disabled": [4],
         "required": [4],
-        "accessibleLiveError": [1, "accessible-live-error"]
+        "accessibleLiveError": [1, "accessible-live-error"],
+        "getInitialValue": [64]
     }, undefined, {
         "value": ["setInitialValue", "updateChoices"],
         "disabled": ["updateChoices"],

package/lib/dist-custom-elements/duet-contact-card.js

@@ -7,7 +7,7 @@ import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLa
 import { d as defineCustomElement$8 } from './p-83231ea8.js';
 import { d as defineCustomElement$7 } from './p-a167e2a0.js';
 import { d as defineCustomElement$6 } from './p-667579b0.js';
-import { d as defineCustomElement$5 } from './p-68ba7bf1.js';
+import { d as defineCustomElement$5 } from './p-2f410810.js';
 import { d as defineCustomElement$4 } from './p-17ed32c8.js';
 import { d as defineCustomElement$3 } from './p-63954651.js';
 import { d as defineCustomElement$2 } from './p-d1815d2a.js';

package/lib/dist-custom-elements/duet-date-picker.js

@@ -8,7 +8,7 @@ import { F as FocusGuard } from './p-4bd749d9.js';
 import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-2e36d5bf.js';
 import { c as checkNamedSlotElement } from './p-06e608ae.js';
 import { h } from './p-33937fd7.js';
-import { d as defineCustomElement$d } from './p-03152b20.js';
+import { d as defineCustomElement$d } from './p-f4ac6968.js';
 import { d as defineCustomElement$c } from './p-83231ea8.js';
 import { d as defineCustomElement$b } from './p-b6322d8d.js';
 import { d as defineCustomElement$a } from './p-667579b0.js';

package/lib/dist-custom-elements/duet-editable-table.js

@@ -7,7 +7,7 @@ import { f as fieldSorter } from './p-9e371678.js';
 import { i as isKeyboardClick } from './p-785686e3.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
 import { h } from './p-33937fd7.js';
-import { d as defineCustomElement$7 } from './p-03152b20.js';
+import { d as defineCustomElement$7 } from './p-f4ac6968.js';
 import { d as defineCustomElement$6 } from './p-83231ea8.js';
 import { d as defineCustomElement$5 } from './p-667579b0.js';
 import { d as defineCustomElement$4 } from './p-63954651.js';

package/lib/dist-custom-elements/duet-link.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetLink$1, d as defineCustomElement$1 } from './p-68ba7bf1.js';
+import { D as DuetLink$1, d as defineCustomElement$1 } from './p-2f410810.js';
 
 const DuetLink = DuetLink$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-menu-bar-button.js

@@ -2,28 +2,16 @@
  * Built with Duet Design System
  */
 import { p as proxyCustomElement, H, h, d as Host } from './p-e98f9bb0.js';
-import { a as media_query_large } from './p-f9a8d356.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { d as defineCustomElement$2 } from './p-667579b0.js';
 
-const duetMenuBarButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-menu-bar-button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;color:inherit;text-align:center;text-decoration:none;cursor:pointer}.duet-menu-bar-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.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.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\"}@media (min-width: 62em){.duet-menu-bar-button{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-button{padding:0 28px}}@media (min-width: 62em){.duet-menu-bar-button:hover{color:rgb(0, 119, 179)}.duet-menu-bar-button:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
+const duetMenuBarButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-menu-bar-button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:inherit;color:inherit;text-align:center;text-decoration:none;cursor:pointer}.duet-menu-bar-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.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\"}@media (min-width: 62em){.duet-menu-bar-button{padding:0 16px}}@media (min-width: 76.25em){.duet-menu-bar-button{padding:0 28px}}@media (min-width: 62em){.duet-menu-bar-button:hover{color:rgb(0, 119, 179)}.duet-menu-bar-button:hover.duet-theme-turva{color:rgb(198, 12, 48)}}";
 
 const DuetMenuBarButton$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarButton extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        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";
@@ -44,26 +32,6 @@ const DuetMenuBarButton$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarBu
     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.
      */
@@ -80,7 +48,7 @@ const DuetMenuBarButton$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarBu
         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))));
     }
     get element() { return this; }
     static get style() { return duetMenuBarButtonCss; }
@@ -98,7 +66,6 @@ const DuetMenuBarButton$1 = /*@__PURE__*/ proxyCustomElement(class DuetMenuBarBu
         "accessiblePressed": [4, "accessible-pressed"],
         "theme": [1025],
         "icon": [1537],
-        "iconSize": [32],
         "setFocus": [64]
     }]);
 function defineCustomElement$1() {