@duetds/components 6.2.12 → 6.3.0

package/lib/cjs/duet-slideout-lang.cjs.entry.js

@@ -0,0 +1,46 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+require('./string-utils-5cadd058.js');
+
+const duetSlideoutLangCss = "*,*::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}.duet-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:15%;right:-16px;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:16px;font-weight:600;line-height:150%;color:#00294d;content:\"|\"}.duet-theme-turva ::slotted(:not(:last-child))::after{color:#171c3a}";
+
+const DuetSlideoutLang = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.chooseLangObject = {
+      en: "Choose language",
+      fi: "Valitse kieli",
+      sv: "Välj språk",
+    };
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const langTranslation = languageUtils.getLocaleString(this.chooseLangObject);
+    return (index.h(index.Host, null, index.h("div", { class: "duet-slideout-lang" }, index.h("duet-visually-hidden", null, langTranslation), index.h("duet-icon", { name: "navigation-language", margin: "none" }), index.h("slot", null))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideoutLang.style = duetSlideoutLangCss;
+
+exports.duet_slideout_lang = DuetSlideoutLang;

package/lib/cjs/duet-slideout-link.cjs.entry.js

@@ -0,0 +1,44 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+
+const duetSlideoutLinkCss = "*,*::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-slideout-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\";line-height:1.25;color:#00294d;text-align:center;text-decoration:none}.duet-slideout-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:#940925}.duet-slideout-link.active span{position:relative}.duet-slideout-link.active span::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transform:translateY(2px)}.duet-slideout-link.active.duet-theme-turva span::after{background:#c60c30}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{height:1px;transform:translateY(1px)}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}";
+
+const DuetSlideoutLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.theme = "";
+    this.active = false;
+    this.href = "#";
+    this.icon = undefined;
+    this.size = "medium";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("a", { class: {
+        "duet-slideout-link": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.active,
+        [this.size]: true,
+      }, href: this.href }, this.icon && index.h("duet-icon", { size: "medium", name: this.icon, margin: "none" }), index.h("span", null, index.h("slot", null)))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideoutLink.style = duetSlideoutLinkCss;
+
+exports.duet_slideout_link = DuetSlideoutLink;

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

@@ -0,0 +1,41 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+
+const duetSlideoutPanelDropdownLinkCss = "*,*::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-slideout-panel-dropdown-link{display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 20px 8px 44px;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.125rem;font-weight:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}.duet-slideout-panel-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:#171c3a}";
+
+const DuetSlideoutPanelDropdownLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.theme = "";
+    this.href = "#";
+    this.icon = undefined;
+    this.caret = false;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("a", { class: {
+        "duet-slideout-panel-dropdown-link": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, href: this.href, role: "menuitem" }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), index.h("slot", null))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideoutPanelDropdownLink.style = duetSlideoutPanelDropdownLinkCss;
+
+exports.duet_slideout_panel_dropdown_link = DuetSlideoutPanelDropdownLink;

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

@@ -0,0 +1,55 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.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::slotted(duet-slideout-panel-dropdown-link){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot::slotted(duet-slideout-panel-dropdown-link){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:#00294d;text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:0 0 16px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding 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:#940925}";
+
+const DuetSlideoutPanelDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.onClick = () => {
+      this.open = !this.open;
+    };
+    this.theme = "";
+    this.open = false;
+    this.icon = undefined;
+  }
+  handleFocus(e) {
+    const isClickOutside = e.composedPath().every(node => node !== this.element);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "duet-slideout-panel-dropdown": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+      } }, index.h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, this.icon && index.h("duet-icon", { name: this.icon, size: "medium", margin: "none" }), index.h("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xx-small" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+        hidden: !this.open,
+      } }, index.h("slot", null)))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideoutPanelDropdown.style = duetSlideoutPanelDropdownCss;
+
+exports.duet_slideout_panel_dropdown = DuetSlideoutPanelDropdown;

package/lib/cjs/duet-slideout-panel-link.cjs.entry.js

@@ -0,0 +1,41 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+
+const duetSlideoutPanelLinkCss = "*,*::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-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.25rem;font-weight:800;line-height:1.25;color:#00294d;text-align:center;text-decoration:none}.duet-slideout-panel-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:#940925}";
+
+const DuetSlideoutPanelLink = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.theme = "";
+    this.active = false;
+    this.href = "#";
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("a", { class: {
+        "duet-slideout-panel-link": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, href: this.href }, this.icon && index.h("duet-icon", { size: "medium", name: this.icon, margin: "none" }), index.h("span", null, index.h("slot", null)))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideoutPanelLink.style = duetSlideoutPanelLinkCss;
+
+exports.duet_slideout_panel_link = DuetSlideoutPanelLink;

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

@@ -0,0 +1,89 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+const focusUtils = require('./focus-utils-9b534879.js');
+const languageUtils = require('./language-utils-4f62a7db.js');
+require('./string-utils-5cadd058.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::slotted(duet-slideout-panel-dropdown),:host slot::slotted(duet-slideout-panel-link){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot::slotted(duet-slideout-panel-link),:host([open]) slot::slotted(duet-slideout-panel-dropdown){top:0;opacity:1}.duet-slideout-panel{position:relative;height:100%}.duet-slideout-panel .link{position:relative;display:flex;gap:8px;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:#00294d;text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel .link .label{display:flex;gap:0.5rem;align-items:center;justify-content:space-between;width:100%}.duet-slideout-panel .link.active .label-text{position:relative}.duet-slideout-panel .link.active .label-text::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;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;background:#f3f9fc}.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{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 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:#00294d;opacity:1;transition:top 0.3s ease-in, opacity 0.3s ease-in}.duet-slideout-panel .items{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:1rem 16px;overflow-y:auto;color:#00294d}.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:#940925}.duet-slideout-panel.duet-theme-turva .link.active .label-text::after{background:#c60c30}.duet-slideout-panel.duet-theme-turva .dialog{background:#f5f5f7}.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:#171c3a}.duet-slideout-panel.duet-theme-turva .items{background:#f5f5f7}";
+
+const DuetSlideoutPanel = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.exitLangObject = {
+      en: "Exit the dialog",
+      fi: "Poistu dialogista",
+      sv: "Stäng dialogrutan",
+    };
+    this.updateLabel = () => {
+      const labelSlotElement = this.element.querySelector("[slot='label']");
+      this.label = labelSlotElement;
+    };
+    this.onToggleClick = () => {
+      const toggle = !this.open;
+      this.open = toggle;
+      if (toggle) {
+        setTimeout(() => {
+          this.closeButton.focus();
+        }, 200);
+      }
+      else {
+        setTimeout(() => {
+          this.openButton.focus();
+        }, 200);
+      }
+    };
+    this.onCloseClick = () => {
+      this.open = false;
+      const parentElement = this.element.parentElement;
+      if (parentElement.tagName === "DUET-SLIDEOUT") {
+        const slideout = this.element.parentElement;
+        slideout.toggle();
+      }
+    };
+    this.label = undefined;
+    this.theme = "";
+    this.active = false;
+    this.open = false;
+    this.icon = undefined;
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+    this.updateLabel();
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const exitTranslation = languageUtils.getLocaleString(this.exitLangObject);
+    return (index.h(index.Host, null, index.h("div", { class: {
+        "duet-slideout-panel": true,
+        "duet-theme-turva": this.theme === "turva",
+        active: this.open,
+      } }, index.h("button", { ref: element => (this.openButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        link: true,
+        active: this.active,
+      }, onClick: this.onToggleClick }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), index.h("div", { class: "label" }, index.h("span", { class: "label-text" }, index.h("slot", { name: "label" })), index.h("duet-icon", { class: "caret", name: "action-arrow-right", margin: "none", size: "x-small" }))), index.h("div", { class: {
+        dialog: true,
+        hidden: !this.open,
+      } }, index.h(focusUtils.FocusGuard, { moveFocusTo: this.closeButton }), index.h("div", { class: "top" }, index.h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+        back: true,
+      }, onClick: this.onToggleClick }, index.h("duet-icon", { class: "caret", name: "action-arrow-left", margin: "none", size: "small" })), index.h("span", null, this.label.innerHTML), index.h("button", { type: "button", onClick: this.onCloseClick, "aria-label": `${exitTranslation}` }, index.h("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+        items: true,
+      } }, index.h("slot", null)), index.h(focusUtils.FocusGuard, { moveFocusTo: this.closeButton })))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideoutPanel.style = duetSlideoutPanelCss;
+
+exports.duet_slideout_panel = DuetSlideoutPanel;

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

@@ -0,0 +1,80 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3c1cf60.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
+const focusUtils = require('./focus-utils-9b534879.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;height:100%}:host slot::slotted(*){position:relative;top:0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot::slotted(*){top:0;opacity:1}.hamburger{position:relative;width:24px;height:24px;margin-top:8px !important;pointer-events:none;transition:0.4s ease-in-out;backface-visibility:hidden}.hamburger .bar{position:absolute;left:0;display:block;width:100%;height:2px;background:#00294d;border-radius:20rem}.duet-theme-turva .hamburger .bar{background:#171c3a}.hamburger .bar:nth-child(1){top:0}.hamburger .bar:nth-child(2),.hamburger .bar:nth-child(3){top:7px}.hamburger .bar:nth-child(4){top:14px}.duet-slideout{display:flex;align-items:center;height:100%;padding:0 8px}.duet-slideout .dialog{position:fixed;top:0;bottom:0;left:0;z-index:400;width:100%;height:100%;overflow-y:auto;background:white;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-slideout .dialog .top{display:flex;align-items:center;justify-content:flex-end;padding:4px}.duet-slideout .dialog .top duet-icon{padding:16px}.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{visibility:hidden}.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:#171c3a}.duet-slideout.duet-theme-turva button.active{color:#c60c30}.duet-slideout.duet-theme-turva button.active::after{background:#c60c30}.duet-slideout.duet-theme-turva .items{background:white}::slotted(*){width:100%}";
+
+const DuetSlideout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.duetSlideoutEvent = index.createEvent(this, "duetSlideoutEvent", 7);
+    this.toggleMenu = (e) => {
+      const toggle = !this.open;
+      this.open = toggle;
+      this.duetSlideoutEvent.emit({
+        originalEvent: e,
+        data: { element: this.element, open: this.open },
+        component: "duet-slideout",
+      });
+      if (toggle) {
+        setTimeout(() => {
+          this.closeButton.focus();
+        }, 200);
+      }
+      else {
+        setTimeout(() => {
+          this.openButton.focus();
+        }, 200);
+      }
+    };
+    this.onClick = (e) => {
+      this.toggleMenu(e);
+    };
+    this.theme = "";
+    this.open = false;
+  }
+  /**
+   * Toggles the slideout.
+   */
+  async toggle() {
+    const event = new CustomEvent("toggle");
+    this.toggleMenu(event);
+    setTimeout(() => {
+      this.openButton.focus();
+    }, 200);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    themeableComponent.inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, index.h("button", { ref: element => (this.openButton = element), "aria-haspopup": "dialog", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+        active: this.open,
+      }, onClick: this.onClick }, index.h("div", { class: "hamburger" }, index.h("span", { class: "bar" }), index.h("span", { class: "bar" }), index.h("span", { class: "bar" }), index.h("span", { class: "bar" }))), index.h("div", { tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": "true", "aria-flowto": "menubar", class: {
+        dialog: true,
+        hidden: !this.open,
+      } }, index.h(focusUtils.FocusGuard, { moveFocusTo: this.closeButton }), index.h("div", { class: "top" }, index.h("button", { ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", type: "button", class: {
+        "slideout-close": true,
+        active: this.open,
+      }, onClick: this.onClick }, index.h("duet-icon", { name: "navigation-close", size: "small", margin: "none" }))), index.h("div", { id: "menubar", role: "menubar", class: {
+        items: true,
+      } }, index.h("slot", null)), index.h(focusUtils.FocusGuard, { moveFocusTo: this.closeButton })))));
+  }
+  get element() { return index.getElement(this); }
+};
+DuetSlideout.style = duetSlideoutCss;
+
+exports.duet_slideout = DuetSlideout;

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

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3b9061fc.js');
+const index = require('./index-e3c1cf60.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

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

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3b9061fc.js');
+const index = require('./index-e3c1cf60.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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:0.5rem;align-items:center;justify-content:flex-start;height:100%;padding:0.675rem 16px;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:#00294d;text-align:center;text-decoration: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:#171c3a}.duet-submenu-bar-dropdown-link:hover{color:#004d80;background:#f3f9fc}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}.duet-submenu-bar-dropdown-link.highlight{color:#0077b3}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:#c60c30}";
+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:0.5rem;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:#00294d;text-align:center;text-decoration:none}@media (min-width: 62em){.duet-submenu-bar-dropdown-link{padding:0.675rem 16px;font-size:0.875rem}}.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:#171c3a}@media (min-width: 62em){.duet-submenu-bar-dropdown-link:hover{color:#004d80;background:#f3f9fc}.duet-submenu-bar-dropdown-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}}.duet-submenu-bar-dropdown-link.highlight{color:#0077b3}.duet-submenu-bar-dropdown-link.highlight.duet-theme-turva{color:#c60c30}";
 
 const DuetSubmenuBarDropdownLink = class {
   constructor(hostRef) {

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

@@ -5,17 +5,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3b9061fc.js');
+const index = require('./index-e3c1cf60.js');
+const tokens = require('./tokens-21b244ee.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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;height:100%}.duet-submenu-bar-dropdown{position:relative;height:100%}.duet-submenu-bar-dropdown button{position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;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:#00294d;text-align:center;text-decoration:none;cursor:pointer}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:#004d80;background:#e6f2f8}.duet-submenu-bar-dropdown button:hover.active{color:#0077b3}.duet-submenu-bar-dropdown button.active{color:#0077b3}.duet-submenu-bar-dropdown button.active .caret{transform:rotate(180deg)}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:#c60c30}.duet-submenu-bar-dropdown button.active::after{position:absolute;top:auto;bottom:2px;left:0;display:block;width:100%;height:2px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(2px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after{background:#c60c30}.duet-submenu-bar-dropdown .items{position:absolute;top:101%;z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:320px;color:#00294d;background:white;border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1)}.duet-submenu-bar-dropdown .items.hidden{display:none}.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:#171c3a}.duet-submenu-bar-dropdown.duet-theme-turva button:hover{color:#940925;background:#e4e4e6}.duet-submenu-bar-dropdown.duet-theme-turva button.active{color:#c60c30}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-submenu-bar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
+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:#00294d;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:#004d80}}.duet-submenu-bar-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-submenu-bar-dropdown button.active .caret{transform:rotate(180deg)}@media (min-width: 62em){.duet-submenu-bar-dropdown button .caret{position:absolute;right:12px}.duet-submenu-bar-dropdown button:hover{color:#00294d;background:#e6f2f8}.duet-submenu-bar-dropdown button:hover.active{color:#0077b3}.duet-submenu-bar-dropdown button.active{color:#0077b3}.duet-theme-turva .duet-submenu-bar-dropdown button.active{color:#c60c30}.duet-submenu-bar-dropdown button.active::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:1px;content:\"\";background:#0077b3;transition:300ms ease;transform:translateY(1px)}.duet-theme-turva .duet-submenu-bar-dropdown button.active::after{background:#c60c30}}.duet-submenu-bar-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:1000px;padding:0 0 16px;overflow-y:auto;color:#00294d;visibility:visible;transition:max-height 0.3s ease-in, padding 0.3s ease-in}@media (min-width: 62em){.duet-submenu-bar-dropdown .items{position:absolute;top:102%;z-index:600;min-width:320px;padding:0;background:white;border-radius:0 0 4px 4px;box-shadow:0 6px 6px 0 rgba(0, 41, 77, 0.1);transition:none}}.duet-submenu-bar-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding 0.3s ease-out}.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:#171c3a}@media (min-width: 62em){.duet-submenu-bar-dropdown.duet-theme-turva button{color:#940925}.duet-submenu-bar-dropdown.duet-theme-turva button:hover{color:#171c3a;background:#e4e4e6}}.duet-submenu-bar-dropdown.duet-theme-turva button.active{color:#c60c30}.duet-submenu-bar-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-submenu-bar-dropdown.duet-theme-turva .items{background:#f5f5f7}";
 
 const DuetSubmenuBarDropdown = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.mql = [window.matchMedia(tokens.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;
     };
+    this.iconSize = "small";
     this.theme = "";
     this.open = false;
     this.icon = undefined;
@@ -32,6 +47,26 @@ const DuetSubmenuBarDropdown = class {
   componentWillLoad() {
     themeableComponent.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.
@@ -39,7 +74,7 @@ const DuetSubmenuBarDropdown = class {
   render() {
     return (index.h(index.Host, null, index.h("div", { class: { "duet-submenu-bar-dropdown": true, "duet-theme-turva": this.theme === "turva", active: this.open } }, index.h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), index.h("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+      }, onClick: this.onClick }, this.icon && index.h("duet-icon", { name: this.icon, size: this.iconSize, margin: "none" }), index.h("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), index.h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
         hidden: !this.open,
       } }, index.h("slot", null)))));

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

@@ -5,14 +5,29 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3b9061fc.js');
+const index = require('./index-e3c1cf60.js');
+const tokens = require('./tokens-21b244ee.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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;height:100%}.duet-submenu-bar-link{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;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:#00294d;text-align:center;text-decoration:none}.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:#171c3a}.duet-submenu-bar-link:hover{color:#004d80;background:#e6f2f8}.duet-submenu-bar-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}";
+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:#00294d;text-align:center;text-decoration:none}@media (min-width: 62em){.duet-submenu-bar-link{flex-direction:column;gap:5px;align-items:center;justify-content:center;font-size:0.875rem;color:#004d80}}.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:#171c3a}@media (min-width: 62em){.duet-submenu-bar-link.duet-theme-turva{color:#940925}}@media (min-width: 62em){.duet-submenu-bar-link:hover{color:#00294d;background:#e6f2f8}.duet-submenu-bar-link:hover.duet-theme-turva{color:#171c3a;background:#e4e4e6}}";
 
 const DuetSubmenuBarLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * Own Properties.
+     */
+    this.mql = [window.matchMedia(tokens.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.href = "#";
     this.icon = undefined;
@@ -23,12 +38,32 @@ const DuetSubmenuBarLink = class {
   componentWillLoad() {
     themeableComponent.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.
    */
   render() {
-    return (index.h(index.Host, null, index.h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && index.h("duet-icon", { name: this.icon, size: this.iconSize, margin: "none" }), index.h("slot", null))));
   }
   get element() { return index.getElement(this); }
 };

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

@@ -5,15 +5,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-3b9061fc.js');
+const index = require('./index-e3c1cf60.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.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%}.duet-submenu-bar{display:flex;align-items:center;justify-content:center;background:#f3f9fc;border-bottom:1px solid #cde5f1}.duet-submenu-bar.duet-theme-turva{background:#f5f5f7;border-bottom:1px solid #e4e4e6}";
+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 slot::slotted(duet-submenu-bar-link),:host slot::slotted(duet-submenu-bar-dropdown){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot::slotted(duet-submenu-bar-link),:host([open]) slot::slotted(duet-submenu-bar-dropdown){top:0;opacity:1}@media (min-width: 62em){:host slot::slotted(duet-submenu-bar-link),:host slot::slotted(duet-submenu-bar-dropdown){position:relative;top:auto;opacity:1;transition:none}}.duet-submenu-bar{position:relative;background:#f3f9fc}@media (min-width: 62em){.duet-submenu-bar{border-bottom:1px solid #cde5f1}}.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:#00294d}.duet-submenu-bar button.active .caret{transform:rotate(180deg)}.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 .items{position:absolute;z-index:400;width:100%;max-height:1000px;visibility:visible;background:#f3f9fc;border-bottom:1px solid #cfd2d4;transition:max-height 0.3s ease-in, border-width 0.3s linear}.duet-submenu-bar .items.hidden{max-height:0;overflow:hidden;visibility:hidden;border-bottom:0 solid #cfd2d4;transition:max-height 0.3s ease-out, border-width 0.3s linear}@media (min-width: 62em){.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;max-height:unset;overflow:visible;visibility:visible;border:0;transition:none}}.duet-submenu-bar.duet-theme-turva{background:#f5f5f7;border-bottom:1px solid #e4e4e6}.duet-submenu-bar.duet-theme-turva .items{background:#f5f5f7}";
 
 const DuetSubmenuBar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.onClick = () => {
+      this.open = !this.open;
+    };
     this.theme = "";
+    this.open = false;
   }
   /**
    * Component lifecycle events.
@@ -26,7 +30,12 @@ const DuetSubmenuBar = class {
    * Always the last one in the class.
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, index.h("button", { "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("div", { class: "label" }, index.h("slot", { name: "label" }), index.h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), index.h("div", { role: "menu", id: "menu", "aria-labelledby": "button", "aria-expanded": this.open ? "true" : "false", class: {
+        items: true,
+        hidden: !this.open,
+      } }, index.h("slot", null)))));
   }
   get element() { return index.getElement(this); }
 };