@duetds/components 6.2.4 → 6.2.6

package/lib/types/stencil-public-runtime.d.ts

@@ -221,7 +221,9 @@ export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
  */
 export declare const setMode: (handler: ResolutionHandler) => void;
 /**
- * getMode
+ * `getMode()` is used for libraries which provide multiple "modes" for styles.
+ * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -234,6 +236,9 @@ export declare function setPlatformHelpers(helpers: {
 /**
  * Get the base path to where the assets can be found. Use `setAssetPath(path)`
  * if the path needs to be customized.
+ * @param path the path to use in calculating the asset path. this value will be
+ * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -246,22 +251,29 @@ export declare function getAssetPath(path: string): string;
  * `setAssetPath(document.currentScript.src)`, or using a bundler's replace plugin to
  * dynamically set the path at build time, such as `setAssetPath(process.env.ASSET_PATH)`.
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
+ * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
- * getElement
+ * Retrieve a Stencil element for a given reference
+ * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
  * Schedules a new render of the given instance or element even if no state changed.
  *
- * Notice `forceUpdate()` is not syncronous and might perform the DOM render in the next frame.
+ * Notice `forceUpdate()` is not synchronous and might perform the DOM render in the next frame.
+ *
+ * @param ref the node/element to force the re-render of
  */
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {
@@ -272,6 +284,8 @@ export interface HTMLStencilElement extends HTMLElement {
  * in the best moment to perform DOM mutation without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-write to schedule
  */
 export declare function writeTask(task: RafCallback): void;
 /**
@@ -279,6 +293,8 @@ export declare function writeTask(task: RafCallback): void;
  * in the best moment to perform DOM reads without causing layout thrashing.
  *
  * For further information: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing
+ *
+ * @param task the DOM-read to schedule
  */
 export declare function readTask(task: RafCallback): void;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.2.4",
+  "version": "6.2.6",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -18,7 +18,6 @@
     "hydrate/index.d.ts"
   ],
   "scripts": {
-    "postinstall": "patch-package",
     "precommit": "stencil test --spec --silent",
     "test": "stencil test --spec --e2e --silent",
     "test:ci": "cross-env-shell CI=true run-p test:scss:ci test:stencil:ci",
@@ -48,16 +47,15 @@
     "duet:build:testsite": "stencil build --serve"
   },
   "dependencies": {
-    "body-scroll-lock": "3.1.5",
-    "patch-package": "6.4.7"
+    "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.12",
-    "@duetds/icons": "3.0.12",
-    "@duetds/tokens": "3.0.12",
+    "@duetds/fonts": "2.0.14",
+    "@duetds/icons": "3.0.14",
+    "@duetds/tokens": "3.0.14",
     "@koa/cors": "3.3.0",
     "@rollup/plugin-replace": "3.1.0",
-    "@stencil/core": "2.16.0",
+    "@stencil/core": "2.19.3",
     "@stencil/sass": "1.5.2",
     "@types/jest": "26.0.24",
     "chalk": "4.1.2",
@@ -73,7 +71,7 @@
     "npm-run-all": "4.1.5",
     "onchange": "7.1.0",
     "prettier": "2.6.1",
-    "puppeteer": "9.1.1",
+    "puppeteer": "19.3.0",
     "sass": "1.49.10",
     "stylelint": "14.6.1",
     "stylelint-config-recess-order": "3.0.0",
@@ -85,5 +83,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "ccfdab26f13af9554b6458a8062234eeed7d069d"
+  "gitHead": "79cb00d2e260cf377a7ac4bad939473e452d5291"
 }

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

@@ -1,58 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e009343b.js');
-const themeableComponent = require('./themeable-component-fdeaef9f.js');
-
-const duetMenuBarMenuDropdownLinkCss = "*,*::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-menu-bar-menu-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-menu-bar-menu-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-menu-bar-menu-dropdown-link:hover{color:#004d80;background:#f3f9fc}.duet-menu-bar-menu-dropdown-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}.duet-menu-bar-menu-dropdown-link.highlight{color:#0077b3}.duet-menu-bar-menu-dropdown-link.highlight.duet-theme-turva{color:#c60c30}";
-
-const DuetMenuBarMenuDropdownLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Theme.
-     */
-    this.theme = "";
-    /**
-     * Href
-     */
-    this.href = "#";
-    /**
-     * Icon
-     */
-    this.icon = undefined;
-    /**
-     * Caret
-     */
-    this.caret = false;
-    /**
-     * Highlight
-     */
-    this.highlight = 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-menu-bar-menu-dropdown-link": true,
-        "duet-theme-turva": this.theme === "turva",
-        highlight: this.highlight,
-      }, href: this.href, role: "menuitem" }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), index.h("slot", null), this.caret && index.h("duet-icon", { name: "action-arrow-right-small", size: "xxx-small", margin: "none" }))));
-  }
-  get element() { return index.getElement(this); }
-};
-DuetMenuBarMenuDropdownLink.style = duetMenuBarMenuDropdownLinkCss;
-
-exports.duet_menu_bar_menu_dropdown_link = DuetMenuBarMenuDropdownLink;

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

@@ -1,65 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e009343b.js');
-const themeableComponent = require('./themeable-component-fdeaef9f.js');
-
-const duetMenuBarMenuDropdownCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-menu-bar-menu-dropdown{position:relative;height:100%}.duet-menu-bar-menu-dropdown button{position:relative;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;height:100%;padding:0 0.75rem 0 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-menu-bar-menu-dropdown button .label{display:flex;gap:5px;align-items:center;justify-content:center}.duet-menu-bar-menu-dropdown button:hover{color:#004d80;background:#e6f2f8}.duet-menu-bar-menu-dropdown button.active{color:#0077b3}.duet-menu-bar-menu-dropdown button.active .caret{transform:rotate(180deg)}.duet-menu-bar-menu-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-menu-bar-menu-dropdown button.active::after{background:#c60c30}.duet-menu-bar-menu-dropdown .items{position:absolute;top:101%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:auto;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-menu-bar-menu-dropdown .items.hidden{display:none}.duet-menu-bar-menu-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-menu-bar-menu-dropdown.duet-theme-turva button:hover{color:#940925;background:#e4e4e6}.duet-menu-bar-menu-dropdown.duet-theme-turva button.active{color:#c60c30}.duet-menu-bar-menu-dropdown.duet-theme-turva button.active::after{background:#c60c30}.duet-menu-bar-menu-dropdown.duet-theme-turva .items{background:#f5f5f7}";
-
-const DuetHeaderMenuDropdown = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetMenuBarMenuDropdownEvent = index.createEvent(this, "duetMenuBarMenuDropdownEvent", 7);
-    /**
-     * Theme.
-     */
-    this.theme = "";
-    /**
-     * Open
-     */
-    this.open = false;
-    /**
-     * Icon
-     */
-    this.icon = undefined;
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetMenuBarMenuDropdownEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-menu-bar-menu-dropdown",
-      });
-    };
-    this.onClick = (e) => {
-      this.toggleMenu(e);
-      e.stopImmediatePropagation();
-    };
-  }
-  /**
-   * 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-menu-bar-menu-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: {
-        items: true,
-        hidden: !this.open,
-      } }, index.h("slot", null)))));
-  }
-  get element() { return index.getElement(this); }
-};
-DuetHeaderMenuDropdown.style = duetMenuBarMenuDropdownCss;
-
-exports.duet_menu_bar_menu_dropdown = DuetHeaderMenuDropdown;

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

@@ -1,50 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e009343b.js');
-const themeableComponent = require('./themeable-component-fdeaef9f.js');
-
-const duetMenuBarMenuLinkCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-menu-bar-menu-link{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;height:100%;padding:0 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-menu-bar-menu-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-menu-bar-menu-link:hover{color:#004d80;background:#e6f2f8}.duet-menu-bar-menu-link:hover.duet-theme-turva{color:#940925;background:#e4e4e6}.duet-menu-bar-menu-link.active{color:#0077b3}.duet-menu-bar-menu-link.active.duet-theme-turva{color:#c60c30}.duet-menu-bar-menu-link.active.active:hover{color:#004d80}.duet-menu-bar-menu-link.active.active:hover.duet-theme-turva{color:#940925}";
-
-const DuetMenuBarMenuLink = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Theme.
-     */
-    this.theme = "";
-    /**
-     * Active
-     */
-    this.active = false;
-    /**
-     * Href
-     */
-    this.href = "#";
-    /**
-     * Icon
-     */
-    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-menu-bar-menu-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, role: "menuitem" }, this.icon && index.h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), index.h("slot", null))));
-  }
-  get element() { return index.getElement(this); }
-};
-DuetMenuBarMenuLink.style = duetMenuBarMenuLinkCss;
-
-exports.duet_menu_bar_menu_link = DuetMenuBarMenuLink;

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

@@ -1,65 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-e009343b.js');
-const themeableComponent = require('./themeable-component-fdeaef9f.js');
-
-const duetMenuBarMenuCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;height:100%}.duet-menu-bar-menu{height:100%}.duet-menu-bar-menu button{position:relative;display:flex;gap:8px;align-items:center;justify-content:center;height:100%;min-height:5rem;padding:0 12px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.25;color:#00294d;text-align:center;text-decoration:none;cursor:pointer}@media (min-width: 62em){.duet-menu-bar-menu button{padding:0 20px}}@media (min-width: 64.0625em){.duet-menu-bar-menu button{padding:0 28px}}.duet-menu-bar-menu button:hover{color:#0077b3}.duet-menu-bar-menu button.active{color:#0077b3}.duet-theme-turva .duet-menu-bar-menu button.active{color:#c60c30}.duet-menu-bar-menu 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-menu-bar-menu button.active::after{background:#c60c30}.duet-menu-bar-menu .items{position:absolute;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:4rem;color:#00294d;background:#f3f9fc;border-bottom:1px solid #cde5f1;box-shadow:0 3px 6px 0 rgba(0, 41, 77, 0.1) inset}.duet-menu-bar-menu .items.hidden{display:none}.duet-menu-bar-menu.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-menu-bar-menu.duet-theme-turva button:hover{color:#c60c30}.duet-menu-bar-menu.duet-theme-turva button.active{color:#c60c30}.duet-menu-bar-menu.duet-theme-turva button.active::after{background:#c60c30}.duet-menu-bar-menu.duet-theme-turva .items{background:#f5f5f7}";
-
-const DuetMenuBarMenu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetMenuBarMenuEvent = index.createEvent(this, "duetMenuBarMenuEvent", 7);
-    /**
-     * Theme.
-     */
-    this.theme = "";
-    /**
-     * Active
-     */
-    this.active = false;
-    /**
-     * Open
-     */
-    this.open = false;
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetMenuBarMenuEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-menu-bar-menu",
-      });
-    };
-    this.onClick = (e) => {
-      this.toggleMenu(e);
-      e.stopImmediatePropagation();
-    };
-  }
-  /**
-   * 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-menu-bar-menu": true, "duet-theme-turva": this.theme === "turva", active: this.active } }, index.h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
-        active: this.active || this.open,
-      }, onClick: this.onClick }, index.h("slot", { name: "label" })), 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); }
-};
-DuetMenuBarMenu.style = duetMenuBarMenuCss;
-
-exports.duet_menu_bar_menu = DuetMenuBarMenu;

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

@@ -1,113 +0,0 @@
-*,
-*::after,
-*::before {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-:host {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  height: 100%;
-}
-
-.duet-menu-bar-menu {
-  height: 100%;
-}
-.duet-menu-bar-menu button {
-  position: relative;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  min-height: 5rem;
-  padding: 0 12px;
-  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 1.25;
-  color: #00294d;
-  text-align: center;
-  text-decoration: none;
-  cursor: pointer;
-}
-@media (min-width: 62em) {
-  .duet-menu-bar-menu button {
-    padding: 0 20px;
-  }
-}
-@media (min-width: 64.0625em) {
-  .duet-menu-bar-menu button {
-    padding: 0 28px;
-  }
-}
-.duet-menu-bar-menu button:hover {
-  color: #0077b3;
-}
-.duet-menu-bar-menu button.active {
-  color: #0077b3;
-}
-.duet-theme-turva .duet-menu-bar-menu button.active {
-  color: #c60c30;
-}
-.duet-menu-bar-menu 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-menu-bar-menu button.active::after {
-  background: #c60c30;
-}
-.duet-menu-bar-menu .items {
-  position: absolute;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 4rem;
-  color: #00294d;
-  background: #f3f9fc;
-  border-bottom: 1px solid #cde5f1;
-  box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1) inset;
-}
-.duet-menu-bar-menu .items.hidden {
-  display: none;
-}
-.duet-menu-bar-menu.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-menu-bar-menu.duet-theme-turva button:hover {
-  color: #c60c30;
-}
-.duet-menu-bar-menu.duet-theme-turva button.active {
-  color: #c60c30;
-}
-.duet-menu-bar-menu.duet-theme-turva button.active::after {
-  background: #c60c30;
-}
-.duet-menu-bar-menu.duet-theme-turva .items {
-  background: #f5f5f7;
-}

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

@@ -1,147 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
-export class DuetMenuBarMenu {
-  constructor() {
-    /**
-     * Theme.
-     */
-    this.theme = "";
-    /**
-     * Active
-     */
-    this.active = false;
-    /**
-     * Open
-     */
-    this.open = false;
-    this.toggleMenu = (e) => {
-      const toggle = !this.open;
-      this.open = toggle;
-      this.duetMenuBarMenuEvent.emit({
-        originalEvent: e,
-        data: { element: this.element, open: this.open },
-        component: "duet-menu-bar-menu",
-      });
-    };
-    this.onClick = (e) => {
-      this.toggleMenu(e);
-      e.stopImmediatePropagation();
-    };
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h(Host, null,
-      h("div", { class: { "duet-menu-bar-menu": true, "duet-theme-turva": this.theme === "turva", active: this.active } },
-        h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
-            active: this.active || this.open,
-          }, onClick: this.onClick },
-          h("slot", { name: "label" })),
-        h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
-            items: true,
-            hidden: !this.open,
-          } },
-          h("slot", null)))));
-  }
-  static get is() { return "duet-menu-bar-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-menu-bar-menu.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-menu-bar-menu.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme."
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Active"
-      },
-      "attribute": "active",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Open"
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get events() { return [{
-      "method": "duetMenuBarMenuEvent",
-      "name": "duetMenuBarMenuEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event raised when the menu has been opened. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
-      },
-      "complexType": {
-        "original": "DuetMenuBarMenuEventDetails",
-        "resolved": "{ originalEvent: Event; data: { element: HTMLElement; open: boolean; }; component: \"duet-menu-bar-menu\"; }",
-        "references": {
-          "DuetMenuBarMenuEventDetails": {
-            "location": "local"
-          }
-        }
-      }
-    }]; }
-  static get elementRef() { return "element"; }
-}