npm - @duetds/components - Versions diffs - 10.0.0-alpha.25 → 10.0.0-alpha.27 - Mend

@duetds/components 10.0.0-alpha.25 → 10.0.0-alpha.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (446) hide show

package/lib/cjs/duet-slideout-panel-dropdown.cjs.entry.js CHANGED Viewed

@@ -3,10 +3,10 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var index = require('./index-CgbT-GDe.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
-const duetSlideoutPanelDropdownCss = "*,*::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;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:#e61740}:host(.duet-theme-turva2) slot{color:#172a3b}";
+const duetSlideoutPanelDropdownCss = "*,*::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;width:100%;height:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 36px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-theme-turva2) .duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:#e61740}:host(.duet-theme-turva2) slot{color:#172a3b}";
 const DuetSlideoutPanelDropdown = class {
     constructor(hostRef) {
@@ -58,16 +58,16 @@ const DuetSlideoutPanelDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'f96919a68190339dfad3a02b63943bc7c944a1e7' }, index.h("div", { key: '109f23c80ed885b60278b261eca318bde1ec47eb', class: {
+        return (index.h(index.Host, { key: '74023ff3094ea4e1867ae58690abaa3f338053e7' }, index.h("div", { key: '0a0de8be47b2d48bc9f0c1564d458af29ee2e05f', class: {
                 "duet-slideout-panel-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: 'b40332159750123f2564b18834426c09a7a69bf0', 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: {
+            } }, index.h("button", { key: '06d4e99fe87e549a17af9dc8100528b349ff51ba', 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: {
                 active: this.active,
-            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: '885d1ef770aa91efc19169c8084d8fb60f6ae314', name: this.icon, size: "medium", margin: "none", color: "secondary" }), index.h("span", { key: 'bafa2159d2892a908ed6ce49c13d4d1beaa674c1', class: "label" }, index.h("slot", { key: '96fa1309813257aeb3acff36894828563331b43d', name: "label" }), index.h("duet-icon", { key: 'fbad64614399ece9b86750e3851336a523944951', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: '2869b77624970b590f37909f10ee2a2b9d252a64', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick }, this.icon && index.h("duet-icon", { key: '0822390f41e67611f8e441bea52420840e010f9e', name: this.icon, size: "small", margin: "none", color: "secondary" }), index.h("span", { key: '379e21cd716611030dc29ddf1caf36aa44ea722d', class: "label" }, index.h("slot", { key: '9f4235a7e7c71766070591db1fb2186cf11e395f', name: "label" }), index.h("duet-icon", { key: 'e138b8d3f0d3218d3585d463a5ee7202647ef623', class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small", color: "secondary" }))), index.h("div", { key: '64cb95df7ee047d6de44a0f4187beec77fd25770', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: 'a76b88dbcbb32ce8c0d96f807da0623a6cb8fc1f' })))));
+            } }, index.h("slot", { key: '83cd9c5df8e8e8399f10f4b709fcbb08bcabb919' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-slideout-panel.cjs.entry.js CHANGED Viewed

@@ -3,17 +3,17 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var index = require('./index-CgbT-GDe.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 var bodyScroll = require('./body-scroll-FWPe3_T_.js');
-var focusUtils = require('./focus-utils-Dh4b8BiX.js');
-var languageUtils = require('./language-utils-CMK9eR4Q.js');
-var slotUtils = require('./slot-utils-BIdgEejh.js');
+var focusUtils = require('./focus-utils-2MQWj2yf.js');
+var languageUtils = require('./language-utils-DjVt82-o.js');
+var slotUtils = require('./slot-utils-mZWWDERy.js');
 var tokenUtils = require('./token-utils-DsVwGXGM.js');
 require('./string-utils-B35hEUBv.js');
 require('./tokens.module-7opSZfop.js');
-const duetSlideoutPanelCss = "*,*::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%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}.duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{position:absolute;top:0;left:16px;display:inline-block;width:6px;height:6px;background:rgb(247, 178, 40);border-radius:50%;box-shadow:0 0 0 1px #c18b1f}.duet-theme-turva .duet-slideout-panel .link .duet-slideout-icon .duet-slideout-badge{background:rgb(247, 178, 40)}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1.25rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.5rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;left:0;z-index:600;width:100%;height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{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:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:rgb(8, 42, 77)}.duet-slideout-panel.duet-theme-turva .link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:#e61740}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:#fdf7f2}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span{color:#172a3b}:host(.duet-theme-turva2) slot:not([name=label]){color:#172a3b}";
+const duetSlideoutPanelCss = "*,*::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%}:host slot:not([name=label])::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 0;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:1.5rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .duet-slideout-icon{position:relative;display:inline-flex;font-size:0;line-height:normal;vertical-align:baseline}@media (min-width: 62em){.duet-slideout-panel .link .duet-slideout-icon{margin-right:8px}}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link .label-text.small{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.medium{font-size:1rem;font-weight:600}.duet-slideout-panel .link .label-text.large{font-size:1.25rem;font-weight:800}.duet-slideout-panel .link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text.small::after{height:1px;transform:translateY(1px)}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:rgb(0, 119, 179);transform:translateY(2px)}.duet-slideout-panel .dialog{position:fixed;top:0;right:0;z-index:600;width:min(450px, 100%);height:100%;overflow-y:auto;visibility:visible}.duet-slideout-panel .dialog.hidden{visibility:hidden}.duet-slideout-panel .dialog.hidden .top .back,.duet-slideout-panel .dialog.hidden .top span{opacity:0}.duet-slideout-panel .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout-panel .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout-panel .top-container.has-sticky-header-slot .sticky-header{display:block;padding:0 16px}.duet-slideout-panel .top{display:flex;align-items:center;justify-content:space-between;padding:4px}.duet-slideout-panel .top .back{opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .top .back:focus,.duet-slideout-panel .top .close:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel .top duet-icon{padding:16px}.duet-slideout-panel .top span{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:1.1rem;font-weight:700;line-height:1.5;color:rgb(8, 42, 77);opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 20px;overflow-y:auto;color:rgb(8, 42, 77)}@media (min-width: 36em){.duet-slideout-panel .items{padding:16px 28px}}.duet-slideout-panel duet-indicator{top:4px}.duet-slideout-panel.duet-theme-turva .link{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout-panel.duet-theme-turva .link:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:rgb(198, 12, 48)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout-panel.duet-theme-turva .top .back:focus,.duet-slideout-panel.duet-theme-turva .top .close:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel.duet-theme-turva .top span{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}slot:not([name=label]){--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:600;color:rgb(8, 42, 77)}.duet-theme-turva slot:not([name=label]){color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:#e61740}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .top{background:#fdf7f2}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .has-sticky-header-slot .sticky-header{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) .duet-slideout-panel.duet-theme-turva .top span{color:#172a3b}:host(.duet-theme-turva2) slot:not([name=label]){color:#172a3b}";
 const DuetSlideoutPanel = class {
     constructor(hostRef) {
@@ -54,7 +54,7 @@ const DuetSlideoutPanel = class {
         /**
          * Background color. Use one of the color tokens.
          */
-        this.backgroundColor = "primary-lightest";
+        this.backgroundColor = "gray-lightest";
         /**
          * Show a badge that indicates something has changed.
          */
@@ -171,33 +171,28 @@ const DuetSlideoutPanel = class {
      * Always the last one in the class.
      */
     render() {
-        const defaultBackgroundColor = this.backgroundColor === "primary-lightest"
-            ? this.theme === "turva"
-                ? "gray-lighter"
-                : this.backgroundColor
-            : this.backgroundColor;
         const styles = {
-            background: tokenUtils.getColorByName(defaultBackgroundColor, this.theme),
+            background: tokenUtils.getColorByName(this.backgroundColor, this.theme),
         };
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
         const backTranslation = languageUtils.getLocaleString(this.backLangObject);
-        return (index.h(index.Host, { key: '942391bf280f263cbbb12ff47d5e19e64677ce59' }, index.h("div", { key: '5150a8a4f51a6518de50432847b7a4be7f52a8f7', class: {
+        return (index.h(index.Host, { key: '91e1bfb50346e6f0b7d7b93f6d9cb16e84df9297' }, index.h("div", { key: '80891454e08a69f87d42ca5879c85a7e1eab6d5c', class: {
                 "duet-slideout-panel": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,
-            } }, index.h("button", { key: '2fa4949a7380687952d41bec65b982162f4b1369', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, this.badge && index.h("duet-indicator", { key: '2dc9f2f3b5eebbc44158f9c7795ee2e9dadbfeef', variation: "change" }), index.h("button", { key: 'fe2d4c0f8dc01d791946a720592101e83dc016ea', ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 link: true,
                 active: this.active,
-            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: '239abf831224e505471d4faa690c4fb9eec39657', class: "duet-slideout-icon" }, index.h("duet-icon", { key: '91d352ae3154e830d2ea6e07be749a301f959dd7', name: this.icon, size: "medium", margin: "none", color: "secondary" }), this.badge && index.h("div", { key: '048f8d6339aa0fac808cb8539aec7fc39dc69e22', class: "duet-slideout-badge" }))), index.h("span", { key: '78c8194b03f576175deb05836ee62db4909ff2ae', class: "label" }, index.h("span", { key: '698881982e56840d20105c0859d433f057d0e8c2', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: '52990bf8fd3f928746ee83d5b84570ca6324b2bd', name: "label" })), index.h("duet-icon", { key: '8b11c870487c41351035fd29a0379ff022f86676', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: '420fc600c08d2636b7ee91ef2378cd073822ffc7', ref: element => (this.dialog = element), class: {
+            }, onClick: this.onClick, inert: this.open }, this.icon && (index.h("div", { key: 'b38f6287ae32328d38478369c11fcf53af075731', class: "duet-slideout-icon" }, index.h("duet-icon", { key: '7b8e0204a8a23daf0ece9b96b981921dd7dc6e84', name: this.icon, size: "small", margin: "none", color: "secondary" }))), index.h("span", { key: '15944b22ad22f757436034fb8ef1465d19caca6d', class: "label" }, index.h("span", { key: '7bed6412b760df7878162e7a683488ccf91b01e9', class: { "label-text": true, [this.labelSize]: true } }, index.h("slot", { key: '4700d12f643dd979d5c90a1bf193f9ef55e5e584', name: "label" })), index.h("duet-icon", { key: '99c0ce44ec6a8abec00a1379a3bbd695c728e873', class: "caret", name: "action-arrow-right", margin: "none", size: "x-small", color: "secondary" }))), index.h("div", { key: 'ea37489cb1f9476b74c7e14311011293002791ef', ref: element => (this.dialog = element), class: {
                 dialog: true,
                 hidden: !this.open,
-            }, style: styles }, index.h(focusUtils.FocusGuard, { key: '53c5dd886930895a4b98a215d12c26a1da4e33c0', moveFocusTo: this.closeButton }), index.h("div", { key: '4be2ad3519e0e43f9bdf7d9db5cfab397f5a2f48', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'e10cd953dccb8a456545bc58e374e53361016759', class: "top" }, index.h("button", { key: '0fdc986a24b858871aebe4431fc5a02ee73d42bf', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
+            }, style: styles }, index.h(focusUtils.FocusGuard, { key: 'f936fd64a01150ec06f4007872e38ed39f2d13a3', moveFocusTo: this.closeButton }), index.h("div", { key: '12af8aafbb83a7470bdf6d43def68492ea0b950d', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: '71ee6b6d138c1dfc009f41460f43676ba7ee405b', class: "top" }, index.h("button", { key: '8b1170da102425174dfe9ec6a12996cb3d1fa123', ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-label": `${backTranslation}`, type: "button", class: {
                 back: true,
-            }, onClick: this.onClick }, index.h("duet-icon", { key: '40b07857257d0e150e40cd506c53ee743d1323fa', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: 'f1c04199ddd3f93c079edea3666879483e003c9e' }, this.label.innerHTML), index.h("button", { key: 'fe8dafe02a327c652b4815013aeae50ab2ffa40d', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: 'aa9cdab26dfe54f286a9586716285b7400d78ea3', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: 'c046cb5cef75c8932a338db3a4e7056f489c3bd4', class: "sticky-header" }, index.h("slot", { key: '08fe11beec9d0a01519ca21a00cc11298c17facb', name: "sticky-header" }))), index.h("div", { key: '34b482569c730fe07ec6b4899f7d8fb0b371190c', tabindex: "-1", role: "menu",
+            }, onClick: this.onClick }, index.h("duet-icon", { key: '99d2cf1b6a7b2584460187cce27f9f9f0713f58e', class: "caret", name: "action-arrow-left", margin: "none", size: "small", color: "secondary" })), index.h("span", { key: '7c41e4f0d2f3c71cfaf03f3a0350f9d390b3e0ec' }, this.label.innerHTML), index.h("button", { key: '96024d91d7946d05f62fc2c7f051bfce152e07f7', class: "close", type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { key: '89b82c6c543718835c92fcf8ed4c4b9882eea0fe', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '3665563f52fa7947c426394d637447ae157e7a83', class: "sticky-header" }, index.h("slot", { key: '2db3b51deffa106264a66fddb59d2e614a7f1691', name: "sticky-header" }))), index.h("div", { key: 'e2e29f223e33babd0c6186802383f2f4578b5063', tabindex: "-1", role: "menu",
             //TODO: slideout menu fades out, needs to be instant
             id: "menu", "aria-labelledby": "button", class: {
                 items: true,
-            } }, index.h("slot", { key: '2b87c3b4d7ab96fe8b069d023e7b07f27910cf07' })), index.h(focusUtils.FocusGuard, { key: '158e38e0df98000f097952a14da74a4195b4515b', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: 'ebdc8c4f45b0670a30806ce49c1dbf812e47ec14' })), index.h(focusUtils.FocusGuard, { key: 'db918af81f016c137a0551589daf1b2848239817', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-slideout.cjs.entry.js CHANGED Viewed

@@ -3,19 +3,19 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var index = require('./index-CgbT-GDe.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 var bodyScroll = require('./body-scroll-FWPe3_T_.js');
-var focusUtils = require('./focus-utils-Dh4b8BiX.js');
+var focusUtils = require('./focus-utils-2MQWj2yf.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-CMK9eR4Q.js');
-var slotUtils = require('./slot-utils-BIdgEejh.js');
+var languageUtils = require('./language-utils-DjVt82-o.js');
+var slotUtils = require('./slot-utils-mZWWDERy.js');
 var teleport = require('./teleport-D5NDbuu0.js');
 var tokenUtils = require('./token-utils-DsVwGXGM.js');
 require('./string-utils-B35hEUBv.js');
 require('./tokens.module-7opSZfop.js');
-const duetSlideoutCss = "*,*::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;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;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-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77)}.duet-slideout.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\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:600;width:100%;height:100%;padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}@media (min-width: 62em){.duet-slideout .dialog{right:0;left:auto;width:500px;padding-bottom:0;transition:right 300ms ease;transition-delay:0s}}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:0 1.5rem}.duet-slideout .dialog.hidden{pointer-events:none;visibility:hidden}@media (min-width: 62em){.duet-slideout .dialog.hidden{right:-500px;transition:300ms ease}}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva{color:#172a3b}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg{background:#172a3b}}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active{color:#e61740}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after{background:#e61740}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:#fdf7f2}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) slot{color:#172a3b}";
+const duetSlideoutCss = "*,*::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;position:absolute;height:100%}::slotted(*){position:relative;width:100%;visibility:hidden;opacity:0;transition:opacity 300ms ease;transition-delay:300ms}:host([open]:not([open=false])) ::slotted(*){visibility:visible;opacity:1}:host(:not([open])) ::slotted(duet-slideout-panel){display:none}.duet-slideout{display:flex;align-items:center;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-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77)}.duet-slideout.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\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-slideout.duet-theme-turva .desktop-bg{background:rgb(23, 28, 58)}}.duet-slideout .dialog{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:600;width:min(450px, 100%);padding-bottom:75px;overflow-y:auto;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;transition:bottom 300ms ease;transition-delay:0s}.duet-slideout .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout .dialog .top-container.has-sticky-header-slot{position:sticky;top:0;z-index:200}.duet-slideout .dialog .top-container.has-sticky-header-slot .top{background:rgb(240, 247, 250)}.duet-slideout .dialog .top-container.has-sticky-header-slot .sticky-header{display:block}.duet-slideout .dialog .top{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;padding:4px;opacity:1;transition:opacity 300ms ease}.duet-slideout .dialog .top button{cursor:pointer}.duet-slideout .dialog .top button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout .dialog .top duet-icon{padding:16px}.duet-slideout .dialog .sticky-header{display:none;width:100%;padding:0 1.5rem;margin-bottom:20px;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229)}.duet-slideout .dialog .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;padding:12px 20px;opacity:1;transition:padding 600ms ease, opacity 300ms ease;transition-delay:300ms}@media (min-width: 36em){.duet-slideout .dialog .items{padding:16px 28px}}.duet-slideout .dialog.hidden{bottom:100vh;pointer-events:none;visibility:hidden;transition:300ms ease}.duet-slideout .dialog.hidden .items{padding-top:28px;opacity:0}.duet-slideout .dialog.hidden .top{opacity:0}.duet-slideout.duet-theme-turva .dialog{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1) inset}.duet-slideout.duet-theme-turva .dialog:not(.modal){box-shadow:0 2px 20px 0 rgba(0, 0, 0, 0.2)}.duet-slideout.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-slideout.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout.duet-theme-turva button.active{color:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva button.active::after{background:rgb(198, 12, 48)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:rgb(245, 247, 250)}.duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-slideout.duet-theme-turva .dialog .top button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}slot{color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva{color:#172a3b}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg{background:#172a3b}}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button{color:#172a3b}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active{color:#e61740}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after{background:#e61740}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top{background:#fdf7f2}:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) slot{color:#172a3b}";
 const DuetSlideout = class {
     constructor(hostRef) {
@@ -297,16 +297,16 @@ const DuetSlideout = class {
         };
         const topLevelOpenMenuBarTranslation = languageUtils.getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
-        return (index.h(index.Host, { key: '80fe71cba1f67117359472cbc3d59ec80910cca2' }, index.h("div", { key: 'b4611be3d11b74e906804f32fa54f09ef03c9319', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && index.h("duet-overlay", { key: '72729044a85b3915f914f9b37efc503601681aed', visible: this.open, "display-device": "large", zIndex: "600" }), index.h("div", { key: 'dd793703df1c6412ba02021f6ee26232180db120', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (index.h(index.Host, { key: 'ad0060e5e7d7b09eda9fe1c00d917a24cd72425e' }, index.h("div", { key: 'ffe49d23661b5297b214ce27e88defba216f840e', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && index.h("duet-overlay", { key: 'ed8951a46a9e18802724ca812ad1c0248d7ba334', visible: this.open, zIndex: "600" }), index.h("div", { key: '1fdbc5b634dc380494c1b389514c4bb24c3867e5', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, index.h(focusUtils.FocusGuard, { key: '7217cb29c43fcab1a4d7a0ab2bc25516d5a3db86', moveFocusTo: this.closeButton }), index.h("div", { key: 'f660e3d4126342062aeef72abb440bfd8c638b26', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: '05ed9fae1dd41c76c8af9e31ec907cc58f83d3d5', class: "top" }, index.h("button", { key: '65d0a9c2feb22186f337961c6967021d9dbc97f4', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, index.h(focusUtils.FocusGuard, { key: '0dc00c309bd543a23e1ea874cb6398c2c39e1411', moveFocusTo: this.closeButton }), index.h("div", { key: '8d2adfc16b01db12ca6f7c47810cdee6021e5460', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, index.h("div", { key: 'e389d21af73e9d8163ca89a167f0bbd596ba3450', class: "top" }, index.h("button", { key: '2bd8df761d9064e5ef73c4ebc98485e1754afe2e', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, index.h("duet-icon", { key: 'db5c0e81b4fdb700e9cd790249abcc7be8ddb93d', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: '3056bf2ec202421d6314e9bbec1176990dac8d7d', class: "sticky-header" }, index.h("slot", { key: 'c9c7e39ec4d453a110ad37ba6e273bcb50cfe8a8', name: "sticky-header" }))), index.h("div", { key: 'a051d32697cb79fdf3dddcc5c28c5f6e1e11afb3', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, index.h("duet-icon", { key: 'cb4da32359194cfa8c1cea2d09f5ebdfae3d1537', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), index.h("div", { key: 'ede6365d0ba52b6794916367a4e42535a3666b98', class: "sticky-header" }, index.h("slot", { key: '58a33822c3e852ebd1e69fdc6f4be40f76e3c8a8', name: "sticky-header" }))), index.h("div", { key: '216d18823ac4376220aa985f5043ff3aa293fd40', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, index.h("slot", { key: 'b552c7adcb64a48b13ae808a26037b0c6ba34021' })), index.h(focusUtils.FocusGuard, { key: 'eb6637a6a2c879f6bcab0f798f8f13639d2fdc68', moveFocusTo: this.closeButton })))));
+            } }, index.h("slot", { key: '495d7d363e0b0697b0733bec84c57cd234cdfcc9' })), index.h(focusUtils.FocusGuard, { key: 'a74db283e802ea746bf2777ffb4bd36f35412886', moveFocusTo: this.closeButton })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-status-icon.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
+var index = require('./index-CgbT-GDe.js');
 var tokens = require('./tokens-D7zqZKjQ.js');
 const DuetStatusIcon = class {
@@ -89,10 +89,10 @@ const DuetStatusIcon = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd35995f352a518b4933f82071bba491062afa0e6', class: {
+        return (index.h(index.Host, { key: '7f80e70111b54c6828f96f9b4701ed969e592e0e', class: {
                 [`duet-status-icon-${this.getVariation()}`]: true,
                 "duet-strong-bg": this.strong,
-            } }, index.h("duet-icon", { key: '67a2d52e3cc7e6d2685de643130654f8031f643a', icon: this.getIcon(), size: this.size, margin: this.margin })));
+            } }, index.h("duet-icon", { key: '8a5d1ee9135d47f515b8e74bbbaea58d7e6815b6', icon: this.getIcon(), size: this.size, margin: this.margin })));
     }
 };

package/lib/cjs/duet-step_2.cjs.entry.js CHANGED Viewed

@@ -3,13 +3,13 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
+var index = require('./index-CgbT-GDe.js');
 var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 var createId = require('./create-id-DtslnIOq.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var commonStrings = require('./common-strings-DQ3xONmA.js');
-var languageUtils = require('./language-utils-CMK9eR4Q.js');
+var commonStrings = require('./common-strings-CSqtNIxt.js');
+var languageUtils = require('./language-utils-DjVt82-o.js');
 require('./string-utils-B35hEUBv.js');
 var actionEdit2;
@@ -112,13 +112,13 @@ const DuetStep = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h("div", { key: '3204237f7f65d0f7e40d171da59beae2438d0b73', class: {
+        return (index.h("div", { key: '369f656f742589a178915ed4e72365d3dda7b907', class: {
                 "duet-step": true,
                 [`is-${this.state}`]: true,
                 "rounded-top": this.roundedTop,
                 "rounded-bottom": this.roundedBottom,
                 "duet-theme-turva": this.theme === "turva",
-            } }, index.h("div", { key: '144dc2c4f67e3ab88437ba11dbe665d8d938e998', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, index.h("div", { key: '3a16cbf1b403adb015eafda7d8768e17eae7fb40', "aria-hidden": "true" }, index.h("div", { key: '8ee2d9f18fcef2d1cdb2ad43cf8a41c5615b4765', class: "duet-step-counter" }, this.renderStepCounter())), index.h("duet-spacer", { key: '0dd226292f09ae93ba5ca9bde08511982771fe15', direction: "horizontal", size: "large", breakpoint: "small" }), index.h("duet-spacer", { key: 'd2fea319dfc6db59b1aaba216a913c3a8e9e81e8', direction: "horizontal", size: "medium", breakpoint: "x-small" }), index.h("div", { key: '7c3dee5bf9df62db35cbe5896551062c482d8b3e' }, index.h("duet-heading", { key: '27d4325d36f4f0621af0bf633fe3de821822d4bc', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), index.h("duet-spacer", { key: 'f0e367883df25339d1882ebe17ff56c3555d4cd1', direction: "horizontal", size: "large" }), index.h("div", { key: 'f4313eed84ca3fe24272ce59a59b711169c4c0a8', class: "duet-step-heading-slot" }, index.h("slot", { key: 'a06a67c70d672288b7ef3f76149561fe5200ed99', name: "heading-content" }))), index.h("div", { key: '62b81bf1127a74bd5fb1cec4b0aa1e9c706d2038', class: "duet-step-content-wrapper" }, index.h("div", { key: 'c46f37355b38f10b1dc182108cae7f444025246d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, index.h("slot", { key: 'f08a916f605a7227add9fdb0bd4f6ede0719ec02' })))));
+            } }, index.h("div", { key: '486a6f5b91cd3a6435bd02202b2191077469044d', class: "duet-step-heading", id: this.buttonId, role: this.state !== "current" ? "button" : "region", "aria-current": this.state === "current" ? "step" : undefined, tabindex: this.state !== "current" ? "0" : undefined, "aria-disabled": this.isClickDisabled().toString(), "aria-expanded": (this.state === "current").toString(), "aria-controls": this.contentId, "aria-selected": (this.state === "current").toString(), onClick: this.handleClick, onKeyDown: this.handleKeyDown, ref: element => (this.buttonElement = element) }, index.h("div", { key: '80895fe6a9d2581b54ddeb9095f50ab2ae2c40ec', "aria-hidden": "true" }, index.h("div", { key: '8b38a04e831e7feb20bfbccaf56a017b0c52260d', class: "duet-step-counter" }, this.renderStepCounter())), index.h("duet-spacer", { key: '2220531e141df3a5cd47dbcecdf5992265af1fff', direction: "horizontal", size: "large", breakpoint: "small" }), index.h("duet-spacer", { key: '80ba3be5b395b09c02a15ddabc70319bdb710ec2', direction: "horizontal", size: "medium", breakpoint: "x-small" }), index.h("div", { key: '7426ac138a49a07b9d914c7b92b24dde89fd2220' }, index.h("duet-heading", { key: '2cf9505b640081b6bc33bf726aa95fb8b49a100e', theme: this.theme, level: this.headingLevel, visualLevel: "h4", color: this.headingColor(), margin: "none" }, this.heading)), index.h("duet-spacer", { key: '8888b2e5b45f4bc049454ef6166b97af508a09b6', direction: "horizontal", size: "large" }), index.h("div", { key: '2931ae9df30278381ee5634a45d3bb934ae34215', class: "duet-step-heading-slot" }, index.h("slot", { key: '0f4314f52c16ef8f3929cea2bf0b5e405168593e', name: "heading-content" }))), index.h("div", { key: '43264d21b4cb69938551d3e81d4378369c4b23b3', class: "duet-step-content-wrapper" }, index.h("div", { key: '4913f58605148bb81539d7a24b29b288210f2f3d', class: "duet-step-content", role: "region", "aria-labelledby": this.buttonId, id: this.contentId }, index.h("slot", { key: '7e7ce320adcd8b1dd456fdb63249c983b03a829e' })))));
     }
     get element() { return index.getElement(this); }
 };
@@ -252,7 +252,7 @@ const DuetStepper = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'f135a9f1ddcc6eaa86acdcdc9d11def0ec489b81', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: 'd68ff41042b6582c21d555e3131054278e9eaf1f', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, index.h("duet-visually-hidden", { key: '21d8af2f8896f0e5f893f041a2f3010ada1e74c9', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), index.h("slot", { key: 'efe281a3ddce9364e69c5131e7e59e3a9c2bb9d5' }))));
+        return (index.h(index.Host, { key: 'df89f1e452d33048371e02ceb399b3392e370b00', class: { "duet-m-0": this.margin === "none" } }, index.h("div", { key: '41faad40942a4fbc0bfec56801d76f6972f87eb4', class: { "duet-stepper": true, "duet-theme-turva": this.theme === "turva" } }, index.h("duet-visually-hidden", { key: '225714f663a988bfcca3ae1ff3846bf9bafa12fb', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement()), index.h("slot", { key: 'e24151a3887c08c59be65fb9b9ab14be52db5fa7' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

package/lib/cjs/duet-submenu-bar-dropdown-link.cjs.entry.js CHANGED Viewed

@@ -3,8 +3,8 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var index = require('./index-CgbT-GDe.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 const duetSubmenuBarDropdownLinkCss = "*,*::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;width:100%;height:100%}.duet-submenu-bar-dropdown-link{display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:flex-start;height:100%;padding:8px 20px 8px 60px;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:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:left;text-decoration:none}.duet-submenu-bar-dropdown-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-dropdown-link:focus,.duet-submenu-bar-dropdown-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-dropdown-link .label-container{display:flex;flex:1;gap:12px;align-items:center;justify-content:flex-start}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.5rem 8px;font-size:1rem;line-height:1.5}}.duet-submenu-bar-dropdown-link.active .label{position:relative}.duet-submenu-bar-dropdown-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}.duet-submenu-bar-dropdown-link.active .active-check{display:none}.duet-submenu-bar-dropdown-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\";color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown-link.active{background:rgb(240, 247, 250)}.duet-submenu-bar-dropdown-link.active .label::after{display:none}.duet-submenu-bar-dropdown-link.active .active-check{display:block}.duet-submenu-bar-dropdown-link.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-submenu-bar-dropdown-link:hover{background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown-link.highlight{color:rgb(0, 119, 179)}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:rgb(126, 2, 35)}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva{color:#172a3b}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active .label::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.active{background:#fdf7f2}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva:hover{background:#fbe1d1}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown-link.duet-theme-turva.highlight{color:#e61740}";
@@ -55,12 +55,12 @@ const DuetSubmenuBarDropdownLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '634468684f5ca0645aca55e4755a6f778d4aeaf1' }, index.h("a", { key: 'df84408330d4e171054f96de10b761d9c6435800', class: {
+        return (index.h(index.Host, { key: '206adf55a559a97afad7c5bc107b46f6a099d8c0' }, index.h("a", { key: 'a61437b76e1ecd5c7d61b773b0b97fe43c457bc5', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && index.h("duet-icon", { key: '70f8d741e10aaf9e6492e47b3bf2ffe2d488b0dc', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: '9ec616e8c8b512f0731e90441bf1d20b485f503a', class: "label-container" }, index.h("span", { key: '41825ec964adb07f1d6262d995de497b5bf597c8', class: "label" }, index.h("slot", { key: '16e2e05e0662ee3cbb59ee5ceb371b57b2b3ddcd' })), this.caret && index.h("duet-icon", { key: '97aa221937f2099cd478aad6745d8b1fc93fdb22', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: '1b281ba9300b07c9b8e15688b7383e27195b1ce2', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && index.h("duet-icon", { key: '50c64c74c7f21aebcb34252b9a5fbf75c391c0d3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("span", { key: '0e697759844c9f0255d18fdb41765290f1389581', class: "label-container" }, index.h("span", { key: '3fafa6fece2c5188ec289dbc6fab760d49c73fb4', class: "label" }, index.h("slot", { key: '498dacafcd6fa3c3d097e9bcceb9e78c906cc236' })), this.caret && index.h("duet-icon", { key: 'd7055d84b2cd8de873b0400e7b3434f7670f987a', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (index.h("duet-icon", { key: '40d559b351fcc4d3f56f26045d065a55b840c740', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar-dropdown.cjs.entry.js CHANGED Viewed

@@ -3,9 +3,9 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
+var index = require('./index-CgbT-GDe.js');
 var tokens = require('./tokens-D7zqZKjQ.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 const duetSubmenuBarDropdownCss = "*,*::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;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:12px 1.5rem;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:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-submenu-bar-dropdown button{flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;font-size:0.875rem;color:rgb(0, 75, 129)}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar-dropdown button.open{background:rgb(228, 241, 247)}}.duet-submenu-bar-dropdown button.open .caret{transform:rotate(180deg)}.duet-submenu-bar-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar-dropdown button.active .label-text{position:relative}.duet-submenu-bar-dropdown button.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-dropdown button.active .label-text::after{display:none}}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-dropdown button:hover.active{color:rgb(8, 42, 77)}.duet-theme-turva .duet-submenu-bar-dropdown button:hover.active{color:rgb(23, 28, 58)}.duet-submenu-bar-dropdown button.active{color:rgb(0, 119, 179)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:rgb(198, 12, 48)}.duet-submenu-bar-dropdown button.active::after,.duet-submenu-bar-dropdown button.open::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after,.duet-theme-turva .duet-submenu-bar-dropdown button.open::after{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;align-items:center;justify-content:center;max-height:1000px;padding:4px 0 16px;overflow-y:auto;color:rgb(8, 42, 77);visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-submenu-bar-dropdown .items::-webkit-scrollbar{display:none}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:93%;z-index:600;min-width:320px;padding:8px;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);transition:none}}.duet-submenu-bar-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-submenu-bar-dropdown.duet-theme-turva button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:rgb(222, 224, 228)}}.duet-submenu-bar-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:rgb(198, 12, 48)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.active,.duet-submenu-bar-dropdown.duet-theme-turva button.open{color:rgb(126, 2, 35)}}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after,.duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button.open{background:rgb(222, 224, 228)}}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button{color:#172a3b}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button:hover{background:#fbe1d1}}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active .label-text::after,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open .label-text::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open{color:#8c001e}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.active::after,:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva button.open{background:#fbe1d1}}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-dropdown.duet-theme-turva .items{background:rgb(255, 255, 255)}}";
@@ -114,18 +114,18 @@ const DuetSubmenuBarDropdown = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '0cb9c03f321c7ff444123e06bee1017a69786c76', role: "listitem" }, index.h("div", { key: '7a69b5c2e3d9f7f6737931fd98d0626ecb23dcb5', class: {
+        return (index.h(index.Host, { key: 'b08d71c303bbbb5dc488ccb9df3a6606cbcee45f', role: "listitem" }, index.h("div", { key: 'f27808ba704701f0857e90d8c4474f11f2bd284d', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, index.h("button", { key: 'cb47f2b220eccb921a6fb2b6d9372cab734dcf9f', 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: {
+            } }, index.h("button", { key: 'da50cea3b3daea0da483dc01649345a9fcc27d55', 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 && (index.h("duet-icon", { key: '0777f325a3186cfb4a20c0d71fa3bbcc0ee752b5', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'db5cabb7d09304cd2bd9eba231ed5c3d0453131b', class: "label" }, index.h("span", { key: '33760c3388e525ca78442660bcba3712bb1a0b91', class: "label-text" }, index.h("slot", { key: '557457c4d150285a804a861755393b2ead85eb29', name: "label" })), index.h("duet-icon", { key: '0632a6cb7801c25f3ddec7c36744ed1def3d2d42', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { key: '22f16e71f250d490bf1fca22119b5422ea519021', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (index.h("duet-icon", { key: '41562541f2cf4bbe9e8d6ccb3214b8fc5b44079f', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: '8b2782607b3478bc491ce2fa423257d4233968fa', class: "label" }, index.h("span", { key: '5b22aff9852f284416e15d60b1a262e963ff228e', class: "label-text" }, index.h("slot", { key: 'aec50191a12adf0fbd6f9e388c2dc09954d21f83', name: "label" })), index.h("duet-icon", { key: '154795bda221d38ca73b47a86c97da4c6e4d573b', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), index.h("div", { key: '574669c2280fa1e7e4d14666f95fbe912a068119', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, index.h("slot", { key: '63e09b29477fe83753399f2934115780169deb5c' })))));
+            } }, index.h("slot", { key: '9a69e63aae77e184049ed7d8f7f511d47eca642e' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar-item.cjs.entry.js CHANGED Viewed

@@ -3,15 +3,15 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
+var index = require('./index-CgbT-GDe.js');
 var actionNewWindowSmall = require('./action-new-window-small-BWlVx6YN.js');
-var commonStrings = require('./common-strings-DQ3xONmA.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
-var a11yUtils = require('./a11y-utils-BeS3x4Hg.js');
+var commonStrings = require('./common-strings-CSqtNIxt.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
+var a11yUtils = require('./a11y-utils-B33qnv_c.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-CMK9eR4Q.js');
+var languageUtils = require('./language-utils-DjVt82-o.js');
 require('./_commonjsHelpers-4N64IRaP.js');
-require('./slot-utils-BIdgEejh.js');
+require('./slot-utils-mZWWDERy.js');
 require('./string-utils-B35hEUBv.js');
 const duetSubmenuBarItemCss = "*,*::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;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-item{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;width:auto;height:100%;padding:12px 1.5rem;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:0.875rem;font-weight:600;line-height:1.25;color:rgb(0, 75, 129);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer}.duet-submenu-bar-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-submenu-bar-item:focus,.duet-submenu-bar-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar-item .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:20px;height:20px}@media (min-width: 62em){.duet-submenu-bar-item .leading-icon,.duet-submenu-bar-item .trailing-icon{width:16px;height:16px}}.duet-submenu-bar-item .trailing-icon.trailing-icon-arrow{width:7px;height:7px}.duet-submenu-bar-item .external-icon{width:10px;height:10px}.duet-submenu-bar-item .trailing-icon{position:absolute;right:12px}.duet-submenu-bar-item[aria-expanded=true]{background:rgb(228, 241, 247)}.duet-submenu-bar-item[aria-expanded=true] .trailing-icon.rotate{transform:rotate(180deg)}.duet-submenu-bar-item.active{color:rgb(0, 119, 179)}.duet-submenu-bar-item.active.duet-theme-turva{color:rgb(126, 2, 35)}.duet-submenu-bar-item.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}.duet-submenu-bar-item.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\";color:rgb(23, 28, 58)}.duet-submenu-bar-item.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item.duet-theme-turva.active::after{background:rgb(126, 2, 35)}.duet-submenu-bar-item:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-item:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-item:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva{color:#172a3b}:host(.duet-theme-turva2) .duet-submenu-bar-item.active.duet-theme-turva{color:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active .label::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva.active::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover{color:#172a3b;background:#fbe1d1}:host(.duet-theme-turva2) .duet-submenu-bar-item.duet-theme-turva:hover.active{color:#e61740}";
@@ -89,7 +89,7 @@ const DuetSubmenuBarItem = class {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (index.h(index.Host, { key: 'bc1b76eff2619e0f79a21c0d8bef3efb622a4f75', role: "listitem" }, index.h(TagName, { key: 'ecb396d50b5964ca911a4bcc01dfbbd2235554f0', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (index.h("duet-icon", { key: '64e157f0aad997e6f8f20c8f61be5a9f6cb1ba7d', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: 'd51db5d687d360dc8d82c704407c35d2b7878193', class: "label" }, index.h("span", { key: '067121784839bea1c72167d2b8bcb6869620b69a', class: "label-text" }, index.h("slot", { key: 'd080c716b2c29ad39aa4e377d298d2fc340162b6' })), (this.trailingIcon || this.external) && (index.h("duet-icon", { key: 'd749eeeb21d1491c418db9469b2b7bde9ddf1014', class: {
+        return (index.h(index.Host, { key: '35be20639e3574ca775aa4b697485c84a1512045', role: "listitem" }, index.h(TagName, { key: '10e74fbfad350fa687d2ed5c6d5bfa6c3c3b7a08', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (index.h("duet-icon", { key: 'e4de062ea87077cdf5ab2f80a72cb746d10b32e9', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), index.h("div", { key: '1829e95b6db1e8970ca53e5f8332b0aa97df310a', class: "label" }, index.h("span", { key: '815b45070604d6a9fc3f875677119480812c448d', class: "label-text" }, index.h("slot", { key: '195a9798c946491c1ec6318a99b5738e92d68f58' })), (this.trailingIcon || this.external) && (index.h("duet-icon", { key: '8718695a96ec8294833a18791aeefbe51526308f', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/cjs/duet-submenu-bar-link.cjs.entry.js CHANGED Viewed

@@ -3,8 +3,8 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var index = require('./index-CgbT-GDe.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 const duetSubmenuBarLinkCss = "*,*::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;width:100%;height:100%}@media (min-width: 62em){:host{width:auto}}.duet-submenu-bar-link{display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:flex-start;height:100%;padding:12px 1.5rem;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:1rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none}.duet-submenu-bar-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.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;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:rgb(0, 75, 129)}}@media (min-width: 62em){.duet-submenu-bar-link.active{color:rgb(0, 119, 179)}.duet-submenu-bar-link.active.duet-theme-turva{color:rgb(126, 2, 35)}}.duet-submenu-bar-link.active .label{position:relative}.duet-submenu-bar-link.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transform:1px}@media (min-width: 62em){.duet-submenu-bar-link.active .label::after{display:none}.duet-submenu-bar-link.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:rgb(0, 119, 179);transition:300ms ease;transform:translateY(1px)}}.duet-submenu-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\";color:rgb(23, 28, 58)}.duet-submenu-bar-link.duet-theme-turva.active .label::after{background:rgb(126, 2, 35)}.duet-submenu-bar-link.duet-theme-turva.active::after{background:rgb(126, 2, 35)}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:rgb(8, 42, 77);background:rgb(228, 241, 247)}.duet-submenu-bar-link:hover.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(222, 224, 228)}.duet-submenu-bar-link:hover.duet-theme-turva.active{color:rgb(126, 2, 35)}}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva{color:#172a3b}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active .label::after{background:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active::after{background:#e61740}@media (min-width: 62em){:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva.active{color:#e61740}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva:hover{color:#172a3b;background:#fbe1d1}:host(.duet-theme-turva2) .duet-submenu-bar-link.duet-theme-turva:hover.active{color:#e61740}}";
@@ -47,7 +47,7 @@ const DuetSubmenuBarLink = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '1690f55f331c933f9fb468a34dacd7ca59b4a6ec', role: "listitem" }, index.h("a", { key: 'bef17a08ede70f41666795b66295bde08809e350', 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 && (index.h("duet-icon", { key: 'b7cbc5a4b7747f3b151eded40adaa568a58abb56', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("span", { key: '7351aeba73af6d8f8606662ee3bc100dc4f8c513', class: "label" }, index.h("slot", { key: 'c56efc7a7ac3d5afeea81444f1c7ec0db3a6ce68' })))));
+        return (index.h(index.Host, { key: '43fe2f21e9f7ce5b2ea4a31fb4ac6f9f76b7dea7', role: "listitem" }, index.h("a", { key: '78ffb34f6f54b32f8c8401139b23b34a5fe9ef95', 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 && (index.h("duet-icon", { key: 'c42d8f5d5fe3c4b9d4dbcfe3151a1ee2c7be2ec2', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), index.h("span", { key: 'a2e72daf94cc2c40ab025e399c949b4f8111bdea', class: "label" }, index.h("slot", { key: 'a5fb89a7dc0aea64b82a6be83104f8b9971066c8' })))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-submenu-bar.cjs.entry.js CHANGED Viewed

@@ -3,10 +3,10 @@
  */
 'use strict';
-var index = require('./index-D3O_5Hr7.js');
+var index = require('./index-CgbT-GDe.js');
 var tokens = require('./tokens-D7zqZKjQ.js');
 var bodyScrollLock_es6 = require('./bodyScrollLock.es6-B2sCDud5.js');
-var themeableComponent = require('./themeable-component-B3llZmjN.js');
+var themeableComponent = require('./themeable-component-DtTN09xK.js');
 const duetSubmenuBarCss = "*,*::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;width:100%}:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:none}@media (min-width: 62em){:host(:not([open])) ::slotted(duet-submenu-bar-dropdown){display:inherit}}.duet-submenu-bar{position:relative;top:0;z-index:1;background:rgb(240, 247, 250);transition:top 0.4s}.duet-submenu-bar.hidden{top:-200px}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid rgb(198, 225, 238)}}.duet-submenu-bar button{display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;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:0.875rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77)}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.duet-submenu-bar button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-submenu-bar button .label{position:relative;display:flex;gap:8px;align-items:center;justify-content:center}@media (min-width: 62em){.duet-submenu-bar button{display:none}}.duet-submenu-bar .menu-container{position:absolute;z-index:399;width:100%}.duet-submenu-bar .menu-container.hidden{max-height:0;overflow:hidden;visibility:hidden}@media (min-width: 62em){.duet-submenu-bar .menu-container,.duet-submenu-bar .menu-container.hidden{position:static;z-index:auto;max-height:unset;overflow:visible;visibility:visible}}.duet-submenu-bar .items{width:100%;height:70vh;overflow-y:scroll;visibility:visible;background:rgb(240, 247, 250);border-bottom:1px solid rgb(181, 198, 208)}.duet-submenu-bar .items ::slotted(*){position:relative}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid rgb(181, 198, 208)}.duet-submenu-bar .items .list-padding{padding-bottom:188px}@media (min-width: 62em){.duet-submenu-bar .items .list{display:flex;align-items:center;justify-content:space-between;height:100%}.duet-submenu-bar .items,.duet-submenu-bar .items.hidden{position:static;z-index:auto;display:flex;flex-direction:row;align-items:center;justify-content:center;height:auto;max-height:unset;overflow:visible;visibility:visible;border:0}.duet-submenu-bar .items .list-padding{display:none;padding-bottom:0}}.duet-submenu-bar.duet-theme-turva{background:rgb(245, 247, 250);border-bottom:1px solid rgb(222, 224, 228)}.duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-submenu-bar.duet-theme-turva .items{background:rgb(245, 247, 250)}.duet-submenu-bar.duet-theme-turva .mobile-background{background:rgb(23, 28, 58)}.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 2px 6px 0 rgba(23, 28, 58, 0.07)}@media (min-width: 62em){.duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow{box-shadow:0 3px 6px 0 rgba(23, 28, 58, 0.1)}}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva{background:#fdf7f2;border-bottom-color:#fbe1d1}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .items{background:#fdf7f2}:host(.duet-theme-turva2) .duet-submenu-bar.duet-theme-turva .mobile-background{background:#172a3b}";
@@ -137,19 +137,19 @@ const DuetSubmenuBar = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '3e7b02904bbbba59c39e6ab92da7f5c57725da8b' }, index.h("nav", { key: '2dc04f3533701d9c21afd7c15756f27ecb58441f', class: {
+        return (index.h(index.Host, { key: '463af77c5ac9d7a775876cfc005df160c5e7fdfa' }, index.h("nav", { key: 'fcbdbfc332d352007b1122ffa65cd6d13012a559', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { key: '839b1d9944d8c6c3bfaf329a682d91657066ec2f', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (index.h("button", { key: '98fadd59813f2aae19d4cb5d4734d73a98d4bb7e', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, index.h("span", { key: '67a6c63dc412388b52a2de220127dea5bef408e9', class: "label" }, index.h("slot", { key: 'f7c3882a3339a2cfdf581b63d4aee13867b5d67b', name: "label" }), index.h("duet-icon", { key: 'e0f1cd34ad6ae56df39fcdf39683cb7dfacc6aec', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { key: '368b77169fb80a8486623763734cedecb40b33a8', class: {
+            }, onClick: this.onClick }, index.h("span", { key: 'dc38b3df13d3a4d1b4a9c78c53a9fc68b932152e', class: "label" }, index.h("slot", { key: '128302a4e4c2c6e68d9fd8cb96d1439db8daf800', name: "label" }), index.h("duet-icon", { key: '0d4d0b35713d68685084568f0f95f1818b8deaca', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), index.h("div", { key: '7396ba0b29224cfa487e725604ff50dab010cdeb', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, index.h("div", { key: '25476a3938ac4a4cde6a36aeb5c992e61cd016b3', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, index.h("div", { key: '4b5178a06a8933dfb9be60276a1a893158c62aaa', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, index.h("div", { key: '78a0b5dcbad16181839842b362fc2aa4233933e0', class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", { key: '88ed711a6f222bfa266148da84789eaecfa433d4' }), index.h("div", { key: 'bccca592f7f6986a27e8b90b410f09c28d7d5667', class: "list-padding" }))), index.h("duet-overlay", { key: '3ba23120b948aeb6f066d21d86b58e3b6fa91669', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, index.h("div", { key: '71ee3de51b625b340635a30fb39292e25ddfc116', class: "list", role: this.mobile ? "presentation" : "list" }, index.h("slot", { key: '4baa81a1de7c328e826df2f752075a9c4b05af0f' }), index.h("div", { key: '38b755c720305c3627d82a5e53af380752616396', class: "list-padding" }))), index.h("duet-overlay", { key: '62afaa179b2175f4c4c6cd56c6773675cffc061c', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {