@duetds/components 6.1.0 → 6.2.2

package/lib/collection/collection-manifest.json

@@ -26,6 +26,9 @@
     "./components/duet-layout/duet-layout.js",
     "./components/duet-list/duet-list.js",
     "./components/duet-logo/duet-logo.js",
+    "./components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.js",
+    "./components/duet-menu-bar-menu/duet-menu-bar-menu.js",
+    "./components/duet-menu-bar-menu-dropdown/duet-menu-bar-menu-dropdown.js",
     "./components/duet-modal/duet-modal.js",
     "./components/duet-multiselect/duet-multiselect.js",
     "./components/duet-notification-drawer/duet-notification-drawer.js",
@@ -43,6 +46,7 @@
     "./components/duet-tab-group/duet-tab-group.js",
     "./components/duet-textarea/duet-textarea.js",
     "./components/duet-toggle/duet-toggle.js",
+    "./components/duet-toolbar-dropdown/duet-toolbar-dropdown.js",
     "./components/duet-tooltip/duet-tooltip.js",
     "./components/duet-upload-aria-status/duet-upload-aria-status.js",
     "./components/duet-upload/duet-upload.js",
@@ -54,11 +58,21 @@
     "./components/duet-grid-item/duet-grid-item.js",
     "./components/duet-link/duet-link.js",
     "./components/duet-list-item/duet-list-item.js",
+    "./components/duet-menu-bar/duet-menu-bar.js",
+    "./components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.js",
+    "./components/duet-menu-bar-link/duet-menu-bar-link.js",
+    "./components/duet-menu-bar-menu-dropdown-link/duet-menu-bar-menu-dropdown-link.js",
+    "./components/duet-menu-bar-menu-link/duet-menu-bar-menu-link.js",
+    "./components/duet-nav/duet-nav.js",
     "./components/duet-notification/duet-notification.js",
     "./components/duet-progress/duet-progress.js",
     "./components/duet-radio-group/duet-radio-group.js",
     "./components/duet-scrollable/duet-scrollable.js",
+    "./components/duet-section-layout/duet-section-layout.js",
     "./components/duet-tab/duet-tab.js",
+    "./components/duet-toolbar/duet-toolbar.js",
+    "./components/duet-toolbar-dropdown-link/duet-toolbar-dropdown-link.js",
+    "./components/duet-toolbar-link/duet-toolbar-link.js",
     "./components/duet-tray/duet-tray.js",
     "./components/duet-visually-hidden/duet-visually-hidden.js"
   ],
@@ -109,6 +123,11 @@
         "duet-layout"
       ]
     },
+    {
+      "components": [
+        "duet-section-layout"
+      ]
+    },
     {
       "components": [
         "duet-number-input"

package/lib/collection/components/duet-card/duet-card.css

@@ -62,6 +62,51 @@
 .duet-theme-turva .duet-card:focus, .duet-card:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+@media (max-width: 20.5em) {
+  .duet-card.shadow-xxx-small {
+    box-shadow: none;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-card.shadow-xx-small {
+    box-shadow: none;
+  }
+}
+@media (max-width: 35.9375em) {
+  .duet-card.shadow-x-small {
+    box-shadow: none;
+  }
+}
+@media (min-width: 36em) {
+  .duet-card.shadow-small {
+    box-shadow: none;
+  }
+}
+@media (min-width: 48em) {
+  .duet-card.shadow-medium {
+    box-shadow: none;
+  }
+}
+@media (min-width: 62em) {
+  .duet-card.shadow-large {
+    box-shadow: none;
+  }
+}
+@media (min-width: 64.0625em) {
+  .duet-card.shadow-x-large {
+    box-shadow: none;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-card.shadow-xx-large {
+    box-shadow: none;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-card.shadow-xxx-large {
+    box-shadow: none;
+  }
+}
 @media (min-width: 36em) {
   .duet-card {
     padding: 28px !important;

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

@@ -66,6 +66,11 @@ export class DuetCard {
      * Theme of the card.
      */
     this.theme = "";
+    /**
+     * Breakpoint used to remove shadow around card. These match to
+     * similar media query tokens: $media-query-small and $media-query-medium.
+     */
+    this.shadowBreakpoint = undefined;
     /**
      * Local methods.
      */
@@ -144,6 +149,7 @@ export class DuetCard {
           "duet-card": true,
           [this.padding]: true,
           [this.variation]: true,
+          [`shadow-${this.shadowBreakpoint}`]: !!this.shadowBreakpoint,
           "duet-p-0": this.padding === "none",
           "duet-theme-turva": this.theme === "turva",
           "duet-card-has-bg": this.background !== "gray-lightest",
@@ -447,6 +453,29 @@ export class DuetCard {
       },
       "attribute": "url",
       "reflect": false
+    },
+    "shadowBreakpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetBreakpoints",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+        "references": {
+          "DuetBreakpoints": {
+            "location": "import",
+            "path": "../../utils/token-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Breakpoint used to remove shadow around card. These match to\nsimilar media query tokens: $media-query-small and $media-query-medium."
+      },
+      "attribute": "shadow-breakpoint",
+      "reflect": false,
+      "defaultValue": "undefined"
     }
   }; }
   static get events() { return [{

package/lib/collection/components/duet-choice/duet-choice.css

@@ -440,9 +440,7 @@ input[disabled] + .duet-choice-label .duet-checkmark {
 
 .duet-choice-input {
   position: absolute !important;
-  width: auto;
-  height: auto;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  color: transparent;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
 }

package/lib/collection/components/duet-fieldset/duet-fieldset.css

@@ -101,6 +101,7 @@ legend {
   margin-top: 12px;
 }
 .duet-theme-turva .duet-fieldset-help {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #e02a0d;
 }
 

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

@@ -42,7 +42,7 @@ export class DuetFieldset {
    */
   render() {
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h("fieldset", { "aria-labelledby": `${this.labelId} ${this.errorId}`, class: {
+      h("fieldset", { "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-errormessage": this.error ? this.errorId : null, class: {
           "duet-fieldset": true,
           "duet-theme-turva": this.theme === "turva",
         } },
@@ -61,7 +61,7 @@ export class DuetFieldset {
           this.caption && (h("div", { class: "duet-fieldset-caption", "aria-hidden": "true" },
             h("duet-caption", { margin: "none" }, this.caption)))),
         h("slot", null),
-        h("span", { class: "duet-fieldset-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
+        h("span", { class: "duet-fieldset-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", null, this.error)))));
   }
   static get is() { return "duet-fieldset"; }
   static get encapsulation() { return "shadow"; }

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

@@ -320,8 +320,8 @@ export class DuetInput {
               "is-number": this.component === "number",
               "is-date": this.component === "date",
             }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy
-              ? `${this.labelId} ${this.errorId} ${this.accessibleLabelledBy}`
-              : `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
+              ? `${this.errorId} ${this.labelId}  ${this.accessibleLabelledBy}`
+              : `${this.errorId} ${this.labelId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-errormessage": this.error ? this.errorId : null, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
           !this.icon &&
             this.type !== "text" &&
             this.type !== "tel" &&
@@ -336,7 +336,7 @@ export class DuetInput {
             h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
           this.variation === "button" && h("slot", { name: "button" }),
           h("slot", null)),
-        h("span", { class: "duet-input-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
+        h("span", { class: "duet-input-help", id: this.errorId, "aria-atomic": "true", "aria-live": "polite", "aria-relevant": "additions removals" }, this.error && h("span", { class: "duet-input-error" }, this.error)))));
   }
   static get is() { return "duet-input"; }
   static get encapsulation() { return "scoped"; }

package/lib/collection/components/duet-layout/duet-layout.css

@@ -55,6 +55,51 @@
   padding: 0 16px;
   margin: 48px auto 36px;
 }
+@media (max-width: 20.5em) {
+  .duet-layout.padding-xxx-small {
+    padding: 0;
+  }
+}
+@media (max-width: 22.5em) {
+  .duet-layout.padding-xx-small {
+    padding: 0;
+  }
+}
+@media (max-width: 35.9375em) {
+  .duet-layout.padding-x-small {
+    padding: 0;
+  }
+}
+@media (min-width: 36em) {
+  .duet-layout.padding-small {
+    padding: 0;
+  }
+}
+@media (min-width: 48em) {
+  .duet-layout.padding-medium {
+    padding: 0;
+  }
+}
+@media (min-width: 62em) {
+  .duet-layout.padding-large {
+    padding: 0;
+  }
+}
+@media (min-width: 64.0625em) {
+  .duet-layout.padding-x-large {
+    padding: 0;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-layout.padding-xx-large {
+    padding: 0;
+  }
+}
+@media (min-width: 106.25em) {
+  .duet-layout.padding-xxx-large {
+    padding: 0;
+  }
+}
 @media (min-width: 36em) {
   .duet-layout {
     margin-top: 72px;

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

@@ -40,6 +40,11 @@ export class DuetLayout {
      * Align container vertically in the middle when the space allows it.
      */
     this.middle = false;
+    /**
+     * Breakpoint used to remove padding. These match to
+     * similar media query tokens: $media-query-small and $media-query-medium.
+     */
+    this.paddingBreakpoint = undefined;
   }
   /**
    * Component lifecycle events.
@@ -73,6 +78,7 @@ export class DuetLayout {
           "has-sidebar": this.hasSidebar,
           "duet-m-0": this.margin === "none",
           "duet-center": this.center,
+          [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
         } },
         h("main", { class: "duet-main" },
           h("slot", { name: "main" })),
@@ -210,6 +216,29 @@ export class DuetLayout {
       "attribute": "middle",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "paddingBreakpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetBreakpoints",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxx-small\"",
+        "references": {
+          "DuetBreakpoints": {
+            "location": "import",
+            "path": "../../utils/token-utils"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Breakpoint used to remove padding. These match to\nsimilar media query tokens: $media-query-small and $media-query-medium."
+      },
+      "attribute": "padding-breakpoint",
+      "reflect": false,
+      "defaultValue": "undefined"
     }
   }; }
   static get elementRef() { return "element"; }

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

@@ -0,0 +1,62 @@
+*,
+*::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-menu-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 5rem;
+  padding: 0 28px;
+  background: white;
+  border-top: 1px solid #e1e3e6;
+  box-shadow: 0 3px 6px 0 rgba(0, 41, 77, 0.1);
+}
+.duet-menu-bar > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.duet-menu-bar > :first-child {
+  flex-basis: 0;
+  flex-grow: 1;
+  justify-content: flex-start;
+}
+.duet-menu-bar > :last-child {
+  flex-basis: 0;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+.duet-menu-bar ::slotted(*) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.duet-menu-bar.duet-theme-turva {
+  background: white;
+}

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

@@ -0,0 +1,109 @@
+/*!
+ * 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 { inheritGlobalTheme } from "../../common/themeable-component";
+/**
+ * @slot center - Slot for content in center.
+ * @slot right - Slot for content in right side.
+ */
+export class DuetMenuBar {
+  constructor() {
+    /**
+     * Own Properties.
+     */
+    this.mql = [
+      window.matchMedia(media_query_large.replace(/'/g, "")),
+      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";
+      }
+      else {
+        this.logoSize = "medium";
+      }
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  connectedCallback() {
+    this.changeLogoSize();
+    for (let i = 0; i < this.mql.length; i++) {
+      // addEventListener is not available in Stencil hydrate
+      if (this.mql[i].addEventListener) {
+        const bound = this.changeLogoSize.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 (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" }))));
+  }
+  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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme."
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "logoSize": {}
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -0,0 +1,125 @@
+*,
+*::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-dropdown {
+  position: relative;
+  height: 100%;
+}
+.duet-menu-bar-dropdown 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: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #004d80;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-dropdown button {
+    padding: 0 20px;
+  }
+}
+@media (min-width: 64.0625em) {
+  .duet-menu-bar-dropdown button {
+    padding: 0 28px;
+  }
+}
+.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;
+}
+.duet-menu-bar-dropdown button.active .caret {
+  transform: rotate(180deg);
+}
+.duet-theme-turva .duet-menu-bar-dropdown button.active {
+  color: #c60c30;
+}
+.duet-menu-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-menu-bar-dropdown button.active::after {
+  background: #c60c30;
+}
+.duet-menu-bar-dropdown .items {
+  position: absolute;
+  right: 0%;
+  left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 225px;
+  padding: 1rem 0;
+  color: #00294d;
+  background: #f3f9fc;
+  border-radius: 0 0 8px 8px;
+  box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
+}
+.duet-menu-bar-dropdown .items.hidden {
+  display: none;
+}
+.duet-menu-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: #940925;
+}
+.duet-menu-bar-dropdown.duet-theme-turva button:hover {
+  color: #c60c30;
+}
+.duet-menu-bar-dropdown.duet-theme-turva button.active {
+  color: #c60c30;
+}
+.duet-menu-bar-dropdown.duet-theme-turva button.active::after {
+  background: #c60c30;
+}
+.duet-menu-bar-dropdown.duet-theme-turva .items {
+  background: #f5f5f7;
+}