@duetds/components 6.2.4 → 6.2.6

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

@@ -2,18 +2,14 @@
  * Built with Duet Design System
  */
 import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTurva } from "@duetds/tokens";
-import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { getLanguage } from "../../utils/language-utils";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;
-  return (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 305 111" },
-    h("title", { id: logoId }, "Turva"),
-    h("path", { fill: logoColor, d: "M79 90.1A40.5 40.5 0 0 0 98.3 58H79v32.2z" }),
-    h("path", { fill: logoColor, d: "M45.1 57.9V46.4h52.3a40.5 40.5 0 1 0-30 48.5V58H45z" }),
-    h("path", { fill: textColor, d: "M278.9 80.3v-9.8l-7.4.4c-2.4.3-4.3.6-5.7 1-1.7.4-4 1.3-5 2.3-1 1-2.3 2.8-2.3 4.6 0 2 .8 3.8 2 4.8s3.3 2 5.7 2a22 22 0 0 0 12.7-5.3zm4.2 8H279v-4.1l-3 1.9-2.8 1.5a17.4 17.4 0 0 1-7.4 1.6c-3 0-6.3-.7-8-2.3a9.6 9.6 0 0 1-3.4-7.2 9 9 0 0 1 1.8-5.9c1.1-1.6 3.1-3.3 5.2-4.2 2.1-1 4.7-1.6 7.7-1.9 3.4-.4 6.8-.6 9.8-.7v-1.1a6 6 0 0 0-.7-3.3 8 8 0 0 0-2.6-2.5c-.8-.5-2.2-1-3.4-1.1a25.7 25.7 0 0 0-8.8.4c-1.9.4-3.3 1-5.4 1.7h-.3v-4.3c1.2-.3 2.3-.7 4.5-1a37.7 37.7 0 0 1 12.8 0c1.8.4 2.9 1 4.2 2 1.3 1 2.3 2.3 3 3.8.7 1.5 1 3.2 1 4.7v22zM250.1 56l-14 32.4h-4.8L217.4 56h4.5l12 27.7L245.6 56zM137.7 88.2l-2.7.7c-.9.2-2 .4-4.2.4a9 9 0 0 1-7.2-3c-1.9-1.8-2.6-5-2.6-9.3V60.2h-5.2V56h5.2V47h4.2v9h12.6v4.2h-12.6v14.2c0 1.8 0 4.3.2 5.4 0 1 .3 2.5.8 3.4.5.8 1.4 1.4 2.2 1.8.8.4 2.7.5 4.1.5 1-.1 1.7-.2 2.7-.5l2.2-.6h.3v3.8zM176.4 88.4h-4.2v-3.9c-2 1.6-4.5 2.8-6.3 3.6-1.8.8-3.8 1.3-6 1.3-3.6 0-6-1.2-8-3.4s-2.5-5.5-2.5-9.9v-20h4.2V74c0 1.8.1 3.8.3 5 .2 1.3.5 3 1 3.8a5 5 0 0 0 2.2 2c1 .5 2.2.7 4 .7 1.5 0 3.1-.4 5-1.2 1.7-.8 4.5-2.4 6-3.6V56.1h4.3v32.3zM210.4 61h-.3a21.6 21.6 0 0 0-5.4-.7c-1.9 0-3.6.4-5.3 1.2a31 31 0 0 0-5.4 3.7v23.2h-4.3V56h4.3v5.2c2.3-1.9 5-3.2 6.7-4 1.8-.8 3.6-1.2 5.5-1.2a22.3 22.3 0 0 1 4.2.4v4.4z" })));
+  return (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": logoId, viewBox: "0 0 305 111" }, h("title", { id: logoId }, "Turva"), h("path", { fill: logoColor, d: "M79 90.1A40.5 40.5 0 0 0 98.3 58H79v32.2z" }), h("path", { fill: logoColor, d: "M45.1 57.9V46.4h52.3a40.5 40.5 0 1 0-30 48.5V58H45z" }), h("path", { fill: textColor, d: "M278.9 80.3v-9.8l-7.4.4c-2.4.3-4.3.6-5.7 1-1.7.4-4 1.3-5 2.3-1 1-2.3 2.8-2.3 4.6 0 2 .8 3.8 2 4.8s3.3 2 5.7 2a22 22 0 0 0 12.7-5.3zm4.2 8H279v-4.1l-3 1.9-2.8 1.5a17.4 17.4 0 0 1-7.4 1.6c-3 0-6.3-.7-8-2.3a9.6 9.6 0 0 1-3.4-7.2 9 9 0 0 1 1.8-5.9c1.1-1.6 3.1-3.3 5.2-4.2 2.1-1 4.7-1.6 7.7-1.9 3.4-.4 6.8-.6 9.8-.7v-1.1a6 6 0 0 0-.7-3.3 8 8 0 0 0-2.6-2.5c-.8-.5-2.2-1-3.4-1.1a25.7 25.7 0 0 0-8.8.4c-1.9.4-3.3 1-5.4 1.7h-.3v-4.3c1.2-.3 2.3-.7 4.5-1a37.7 37.7 0 0 1 12.8 0c1.8.4 2.9 1 4.2 2 1.3 1 2.3 2.3 3 3.8.7 1.5 1 3.2 1 4.7v22zM250.1 56l-14 32.4h-4.8L217.4 56h4.5l12 27.7L245.6 56zM137.7 88.2l-2.7.7c-.9.2-2 .4-4.2.4a9 9 0 0 1-7.2-3c-1.9-1.8-2.6-5-2.6-9.3V60.2h-5.2V56h5.2V47h4.2v9h12.6v4.2h-12.6v14.2c0 1.8 0 4.3.2 5.4 0 1 .3 2.5.8 3.4.5.8 1.4 1.4 2.2 1.8.8.4 2.7.5 4.1.5 1-.1 1.7-.2 2.7-.5l2.2-.6h.3v3.8zM176.4 88.4h-4.2v-3.9c-2 1.6-4.5 2.8-6.3 3.6-1.8.8-3.8 1.3-6 1.3-3.6 0-6-1.2-8-3.4s-2.5-5.5-2.5-9.9v-20h4.2V74c0 1.8.1 3.8.3 5 .2 1.3.5 3 1 3.8a5 5 0 0 0 2.2 2c1 .5 2.2.7 4 .7 1.5 0 3.1-.4 5-1.2 1.7-.8 4.5-2.4 6-3.6V56.1h4.3v32.3zM210.4 61h-.3a21.6 21.6 0 0 0-5.4-.7c-1.9 0-3.6.4-5.3 1.2a31 31 0 0 0-5.4 3.7v23.2h-4.3V56h4.3v5.2c2.3-1.9 5-3.2 6.7-4 1.8-.8 3.6-1.2 5.5-1.2a22.3 22.3 0 0 1 4.2.4v4.4z" })));
 };
 const i18n = {
   fi: {
@@ -35,9 +31,7 @@ const i18n = {
 const DefaultLogo = ({ inverse, logoId, language }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandBlue;
   const { title, path, viewBox } = i18n[language];
-  return (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", fill: logoColor, "aria-labelledby": logoId, viewBox: viewBox },
-    h("title", { id: logoId }, title),
-    h("path", { d: path })));
+  return (h("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", fill: logoColor, "aria-labelledby": logoId, viewBox: viewBox }, h("title", { id: logoId }, title), h("path", { d: path })));
 };
 export class DuetLogo {
   constructor() {
@@ -45,31 +39,11 @@ export class DuetLogo {
      * Own Properties.
      */
     this.logoId = createID("DuetLogo");
-    /**
-     * Theme of the logo.
-     */
     this.theme = "";
-    /**
-     * Controls the margin of the component.
-     */
     this.margin = "auto";
-    /**
-     * Use inverse version of the logo (white logo on dark background).
-     */
     this.inverse = false;
-    /**
-     * Size variation of the logo.
-     */
     this.size = "medium";
-    /**
-     * Where the logo links to.
-     */
     this.href = "/";
-    /**
-     * The language of the logo.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-     * @default "fi"
-     */
     this.language = getLanguage();
   }
   /**
@@ -93,181 +67,188 @@ export class DuetLogo {
    */
   render() {
     const TagName = this.href ? "a" : "div";
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h(TagName, { href: this.href, ref: link => (this.nativeLink = link), class: {
-          "duet-logo": true,
-          [this.size]: true,
-          "duet-theme-turva": this.theme === "turva",
-          "duet-logo-en": this.language === "en",
-          "duet-logo-sv": this.language === "sv",
-        } }, this.theme === "turva" ? (h(TurvaLogo, { logoId: this.logoId, inverse: this.inverse })) : (h(DefaultLogo, { logoId: this.logoId, inverse: this.inverse, language: this.language })))));
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h(TagName, { href: this.href, ref: link => (this.nativeLink = link), class: {
+        "duet-logo": true,
+        [this.size]: true,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-logo-en": this.language === "en",
+        "duet-logo-sv": this.language === "sv",
+      } }, this.theme === "turva" ? (h(TurvaLogo, { logoId: this.logoId, inverse: this.inverse })) : (h(DefaultLogo, { logoId: this.logoId, inverse: this.inverse, language: this.language })))));
   }
   static get is() { return "duet-logo"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-logo.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-logo.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-logo.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-logo.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 of the logo."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme of the logo."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "margin": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetMargin",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetMargin": {
-            "location": "import",
-            "path": "../../common-types"
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
-      },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "inverse": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Use inverse version of the logo (white logo on dark background)."
+      "inverse": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use inverse version of the logo (white logo on dark background)."
+        },
+        "attribute": "inverse",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "inverse",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetLogoSize",
-        "resolved": "\"large\" | \"medium\"",
-        "references": {
-          "DuetLogoSize": {
-            "location": "local"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLogoSize",
+          "resolved": "\"large\" | \"medium\"",
+          "references": {
+            "DuetLogoSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Size variation of the logo."
-      },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "\"medium\""
-    },
-    "href": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variation of the logo."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"medium\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Where the logo links to."
+      "href": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where the logo links to."
+        },
+        "attribute": "href",
+        "reflect": true,
+        "defaultValue": "\"/\""
       },
-      "attribute": "href",
-      "reflect": true,
-      "defaultValue": "\"/\""
-    },
-    "language": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetLanguage",
-        "resolved": "\"en\" | \"fi\" | \"sv\"",
-        "references": {
-          "DuetLanguage": {
-            "location": "import",
-            "path": "../../common-types"
+      "language": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetLanguage",
+          "resolved": "\"en\" | \"fi\" | \"sv\"",
+          "references": {
+            "DuetLanguage": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
-          }, {
-            "name": "default",
-            "text": "\"fi\""
-          }],
-        "text": "The language of the logo."
-      },
-      "attribute": "language",
-      "reflect": true,
-      "defaultValue": "getLanguage()"
-    }
-  }; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "(options?: FocusOptions) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+            }, {
+              "name": "default",
+              "text": "\"fi\""
+            }],
+          "text": "The language of the logo."
+        },
+        "attribute": "language",
+        "reflect": true,
+        "defaultValue": "getLanguage()"
+      }
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "(options?: FocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "FocusOptions": {
+              "location": "global"
+            }
           },
-          "FocusOptions": {
-            "location": "global"
-          }
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the specified `duet-logo`. Use this method instead of the global\n`logo.focus()`.",
-        "tags": []
+        "docs": {
+          "text": "Sets focus on the specified `duet-logo`. Use this method instead of the global\n`logo.focus()`.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "element"; }
 }

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

@@ -25,16 +25,23 @@
 
 .duet-menu-bar {
   position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 100%;
   height: 5rem;
-  padding: 0 28px;
+  padding: 0 8px 0 20px;
   background: white;
   border-top: 1px solid #e1e3e6;
   box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
 }
+@media ((min-width: 62em)) {
+  .duet-menu-bar {
+    padding: 0 28px;
+  }
+}
 .duet-menu-bar > * {
   display: flex;
   align-items: center;

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { media_query_large, media_query_xx_large } from "@duetds/tokens/lib/tokens.json";
-import { Component, Element, h, Host, Prop, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 /**
  * @slot center - Slot for content in center.
@@ -18,11 +18,6 @@ export class DuetMenuBar {
       window.matchMedia(media_query_xx_large.replace(/'/g, "")),
     ];
     this.boundMqlFunctions = [];
-    this.logoSize = "large";
-    /**
-     * Theme.
-     */
-    this.theme = "";
     this.changeLogoSize = () => {
       if (this.mql[1].matches) {
         this.logoSize = "large";
@@ -31,6 +26,9 @@ export class DuetMenuBar {
         this.logoSize = "medium";
       }
     };
+    this.logoSize = "large";
+    this.theme = "";
+    this.logoHref = undefined;
   }
   /**
    * Component lifecycle events.
@@ -63,47 +61,68 @@ export class DuetMenuBar {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null,
-      h("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" },
-        h("duet-logo", { size: this.logoSize, margin: "none" }),
-        h("slot", { name: "center" }),
-        h("slot", { name: "right" }))));
+    return (h(Host, null, h("div", { class: { "duet-menu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("duet-logo", { size: this.logoSize, margin: "none", theme: this.theme, href: this.logoHref }), h("slot", { name: "center" }), h("slot", { name: "right" }))));
   }
   static get is() { return "duet-menu-bar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["duet-menu-bar.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["duet-menu-bar.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "DuetTheme",
-        "resolved": "\"\" | \"default\" | \"turva\"",
-        "references": {
-          "DuetTheme": {
-            "location": "import",
-            "path": "../../common-types"
+  static get originalStyleUrls() {
+    return {
+      "$": ["duet-menu-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["duet-menu-bar.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."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get states() { return {
-    "logoSize": {}
-  }; }
+      "logoHref": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Logo href."
+        },
+        "attribute": "logo-href",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "logoSize": {}
+    };
+  }
   static get elementRef() { return "element"; }
 }

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

@@ -55,15 +55,15 @@
     padding: 0 28px;
   }
 }
+.duet-menu-bar-dropdown button:hover {
+  color: #0077b3;
+}
 .duet-menu-bar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   justify-content: center;
 }
-.duet-menu-bar-dropdown button:hover {
-  color: #0077b3;
-}
 .duet-menu-bar-dropdown button.active {
   color: #0077b3;
 }
@@ -93,6 +93,7 @@
   position: absolute;
   right: 0%;
   left: auto;
+  z-index: 600;
   display: flex;
   flex-direction: column;
   align-items: center;