@duetds/components 6.9.1 → 6.9.3

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

@@ -25,14 +25,14 @@
 }
 
 .duet-breadcrumbs {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  background: rgb(243, 249, 252);
-  border-bottom: 1px solid rgb(225, 227, 230);
 }
 .duet-breadcrumbs .container {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -49,7 +49,7 @@
   align-items: center;
   justify-content: flex-start;
   padding: 10px 0;
-  color: rgb(0, 41, 77);
+  color: inherit;
   list-style: none;
 }
 .duet-breadcrumbs ol li {
@@ -58,13 +58,6 @@
 .duet-breadcrumbs ol li:last-of-type {
   font-weight: 600;
 }
-.duet-breadcrumbs.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";
-  background: rgb(245, 245, 247);
-}
-.duet-breadcrumbs.duet-theme-turva ol {
-  color: rgb(23, 28, 58);
-}
 .duet-breadcrumbs .duet-breadrumbs-arrow {
   display: inherit;
   align-items: center;
@@ -74,4 +67,70 @@
 }
 .duet-breadcrumbs .hide {
   display: none;
+}
+.duet-breadcrumbs .bottom-border {
+  position: absolute;
+  bottom: 0;
+  display: none;
+  width: 100%;
+  height: 1px;
+}
+.duet-breadcrumbs.header {
+  color: rgb(0, 41, 77);
+  background: rgb(243, 249, 252);
+}
+.duet-breadcrumbs.header ol duet-breadcrumb[href]:hover {
+  color: rgb(0, 77, 128);
+}
+.duet-breadcrumbs.header .bottom-border--nav {
+  display: block;
+  background: rgb(225, 227, 230);
+}
+.duet-breadcrumbs.header.duet-theme-turva {
+  color: rgb(23, 28, 58);
+  background: rgb(245, 245, 247);
+}
+.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover {
+  color: rgb(148, 9, 37);
+}
+.duet-breadcrumbs.footer {
+  color: rgb(255, 255, 255);
+  background: rgb(0, 41, 77);
+}
+@media (min-width: 64.0625em) {
+  .duet-breadcrumbs.footer {
+    justify-content: flex-start;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-breadcrumbs.footer {
+    justify-content: center;
+  }
+}
+.duet-breadcrumbs.footer .container {
+  max-width: 1110px;
+}
+@media (min-width: 62em) {
+  .duet-breadcrumbs.footer .container {
+    margin: 0 72px 0 48px;
+  }
+}
+.duet-breadcrumbs.footer ol {
+  padding: 20px 0;
+}
+@media (min-width: 62em) {
+  .duet-breadcrumbs.footer ol {
+    padding: 20px 8px;
+  }
+}
+.duet-breadcrumbs.footer ol duet-breadcrumb[href]:hover {
+  text-decoration: underline;
+}
+.duet-breadcrumbs.footer .bottom-border--container {
+  display: block;
+  background: rgba(255, 255, 255, 0.2);
+}
+.duet-breadcrumbs.footer.duet-theme-turva {
+  color: rgb(255, 255, 255);
+  background: rgb(198, 12, 48);
 }

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

@@ -15,6 +15,7 @@ export class DuetBreadcrumbs {
     });
     this.children = undefined;
     this.theme = "";
+    this.variation = "header";
   }
   /**
    * Component lifecycle events.
@@ -53,7 +54,8 @@ export class DuetBreadcrumbs {
     return (h(Host, null, h("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
         "duet-breadcrumbs": true,
         "duet-theme-turva": this.theme === "turva",
-      } }, h("div", { class: "container" }, h("ol", null, this.children.map((child, index) => (h(Fragment, null, index > 0 && (h("li", { "aria-hidden": "true" }, h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" }))), h("li", { innerHTML: child.outerHTML }), h("div", { class: "hide" }, h("slot", null))))))))));
+        [this.variation]: true,
+      } }, h("div", { class: "container" }, h("ol", null, this.children.map((child, index) => (h(Fragment, null, index > 0 && (h("li", { "aria-hidden": "true" }, h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" }))), h("li", { innerHTML: child.outerHTML }), h("div", { class: "hide" }, h("slot", null)))))), h("div", { class: "bottom-border bottom-border--container" })), h("div", { class: "bottom-border bottom-border--nav" }))));
   }
   static get is() { return "duet-breadcrumbs"; }
   static get encapsulation() { return "shadow"; }
@@ -91,6 +93,24 @@ export class DuetBreadcrumbs {
         "attribute": "theme",
         "reflect": false,
         "defaultValue": "\"\""
+      },
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"header\" | \"footer\"",
+          "resolved": "\"footer\" | \"header\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variation"
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"header\""
       }
     };
   }

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

@@ -248,23 +248,26 @@
 .duet-card-image-mask + .duet-card-heading {
   border-radius: 0;
 }
-.duet-card-heading[role=button] {
-  -webkit-user-select: none;
-  user-select: none;
+.duet-card-heading.duet-card-heading--collapsible {
+  cursor: pointer;
+}
+.duet-card-heading.duet-card-heading--collapsible button {
+  width: 100%;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  text-align: left;
   cursor: pointer;
-  border-radius: 4px;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-  appearance: none;
 }
-.duet-card-heading[role=button]:focus {
+.duet-card-heading.duet-card-heading--collapsible button:focus {
   outline: 0;
 }
-:host(.user-is-tabbing) .duet-card-heading[role=button]:focus {
+:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus {
   border-radius: 4px;
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-card-heading[role=button]:focus {
+:host(.user-is-tabbing) .duet-theme-turva .duet-card-heading.duet-card-heading--collapsible button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-card-collapsed .duet-card-heading {

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

@@ -63,20 +63,16 @@ export class DuetCard {
   renderHeading() {
     const safeHeadingLevel = sanitizeString(this.headingLevel);
     const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
-    const headingProps = this.collapsible
-      ? {
-        role: "button",
-        tabindex: "0",
-        "aria-controls": this.cardId,
-        "aria-expanded": this.open ? "true" : "false",
-        onClick: this.togglePanel,
-        onKeyDown: this.handleKeyDown,
-      }
-      : {};
     const headingStyles = {
       backgroundColor: getColorByName(this.headingBackground),
     };
-    return (h(HeadingTag, Object.assign({ style: headingStyles, class: "duet-card-heading" }, headingProps), h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+    const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
+    if (this.collapsible) {
+      return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false" }, headingContent)));
+    }
+    else {
+      return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading" }, headingContent));
+    }
   }
   /**
    * Sets focus on the specified `duet-card`. Use this method instead of the global

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

@@ -219,6 +219,11 @@ input[disabled] + .duet-choice-label {
 input[disabled] + .duet-choice-label .duet-checkmark {
   border-color: rgb(101, 119, 135) !important;
 }
+input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label:active, input[disabled] + .duet-choice-label:focus {
+  box-shadow: none !important;
+  opacity: 1 !important;
+  transition: none !important;
+}
 
 .duet-theme-turva input[disabled] + .duet-choice-label {
   color: rgb(116, 116, 117) !important;

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

@@ -35,7 +35,11 @@ export class DuetFieldset {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": `${this.errorId} ${this.labelId}`, "aria-errormessage": this.error ? this.errorId : null, class: {
+    return (h(Host, { class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+      // NVDA and VoiceOver do not yet support aria-errormessage
+      // once they do, we can remove errors from the aria-describedby
+      // aria-errormessage={this.error ? this.errorId : null}
+      class: {
         "duet-fieldset": true,
         "duet-theme-turva": this.theme === "turva",
       } }, h("legend", { id: this.labelId }, h("span", null, this.label), this.caption && h("span", null, this.caption)), h("div", { class: {

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

@@ -5,6 +5,9 @@ import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { sanitizeString } from "../../utils/string-utils";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @part duet-heading - piercing selector for styling the heading element that should be used only in special circumstances
+ */
 export class DuetHeading {
   constructor() {
     this.level = "h2";
@@ -39,7 +42,7 @@ export class DuetHeading {
         "duet-m-0": this.margin === "none",
         [this.visualLevel ? this.visualLevel : this.level]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, style: { color } }, h("slot", null)));
+      }, style: { color }, part: "duet-heading" }, h("slot", null)));
   }
   static get is() { return "duet-heading"; }
   static get encapsulation() { return "shadow"; }

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

@@ -227,7 +227,7 @@
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign .brand-shape, .duet-hero.duet-hero-section .brand-shape {
-    top: 155px;
+    top: 160px;
     width: 450px;
     height: 450px;
   }
@@ -266,6 +266,19 @@
 .duet-hero.duet-hero-campaign .duet-hero-text, .duet-hero.duet-hero-section .duet-hero-text {
   width: 100%;
 }
+.duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-heading::part(duet-heading), .duet-hero.duet-hero-section .duet-hero-text .duet-hero-heading::part(duet-heading) {
+  font-size: 36px;
+}
+@media (min-width: 36em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-heading::part(duet-heading), .duet-hero.duet-hero-section .duet-hero-text .duet-hero-heading::part(duet-heading) {
+    font-size: 48px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-heading::part(duet-heading), .duet-hero.duet-hero-section .duet-hero-text .duet-hero-heading::part(duet-heading) {
+    font-size: 64px;
+  }
+}
 .duet-hero.duet-hero-campaign .duet-hero-text .duet-hero-subheading,
 .duet-hero.duet-hero-campaign .duet-hero-text duet-paragraph, .duet-hero.duet-hero-section .duet-hero-text .duet-hero-subheading,
 .duet-hero.duet-hero-section .duet-hero-text duet-paragraph {
@@ -351,7 +364,7 @@
   background: none;
 }
 .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-  top: 115px;
+  top: 125px;
   left: -10px;
   width: 350px;
   height: 350px;
@@ -364,7 +377,7 @@
 }
 @media (min-width: 22.5em) {
   .duet-hero.duet-hero-campaign.duet-theme-turva .brand-shape, .duet-hero.duet-hero-section.duet-theme-turva .brand-shape {
-    top: 140px;
+    top: 143px;
     left: -30px;
     width: 450px;
     height: 450px;

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

@@ -103,20 +103,17 @@ export class DuetInput {
      * Private functions
      */
     this.getDescribedBy = () => {
-      let describedBy = "";
+      const describedBy = [];
       if (this.isCaptionVisible && this.topCaptionId) {
-        describedBy = this.topCaptionId;
-        if (this.accessibleDescribedBy) {
-          describedBy += " " + this.accessibleDescribedBy;
-        }
+        describedBy.push(this.topCaptionId);
       }
-      else if (this.accessibleDescribedBy.length > 0) {
-        describedBy = this.accessibleDescribedBy;
+      if (this.accessibleDescribedBy) {
+        describedBy.push(this.accessibleDescribedBy);
       }
-      else {
-        describedBy = undefined;
+      if (this.error) {
+        describedBy.push(this.errorId);
       }
-      return describedBy;
+      return describedBy.length > 0 ? describedBy.join(" ") : null;
     };
     this.handleClearClick = event => {
       const clearing = this.clearInput();
@@ -317,9 +314,7 @@ export class DuetInput {
         disabled: this.disabled,
         "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.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.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
+      }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "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.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
         "duet-input-clear-icon": true,
         "duet-input-clear-icon-single": !hasInputIcon,
         "duet-input-clear-icon-double": !!this.icon,

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

@@ -66,6 +66,9 @@
   height: 20px;
   margin-left: -15px;
 }
+.duet-theme-turva .duet-link-external {
+  margin-left: -12px;
+}
 
 .duet-tab-to-link {
   padding: 15px 28px 16px !important;

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

@@ -13,6 +13,7 @@ export class DuetList {
     this.breakpoint = "small";
     this.variation = "default";
     this.labelWidth = "30";
+    this.responsive = true;
   }
   /**
    * Component lifecycle events.
@@ -47,6 +48,8 @@ export class DuetList {
   async updateListItems() {
     const items = Array.from(this.element.querySelectorAll("duet-list-item"));
     items.forEach(item => {
+      item.responsive = this.responsive;
+      item.breakpoint = this.responsive ? this.breakpoint || "small" : undefined;
       // Use classes to apply styles for SSR compatibility
       item.classList.add(`duet-list-width-${this.labelWidth}`);
       item.classList.add(`duet-list-variation-${this.variation}`);
@@ -54,8 +57,6 @@ export class DuetList {
       this.toggleClass(item, "duet-p-0", this.padding === "none");
       // If text is centered for mobile
       this.toggleClass(item, "duet-list-mobile-center", this.mobile === "center");
-      // If breakpoint is adjusted
-      this.toggleClass(item, "duet-list-breakpoint-large", this.breakpoint === "large");
       // Create zebra striping if striped variation is used
       this.toggleClass(item, "duet-list-striped", this.variation === "striped");
       // Create borders if bordered variation is used
@@ -184,11 +185,11 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListBreakpoint",
-          "resolved": "\"large\" | \"small\"",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
           "references": {
             "DuetListBreakpoint": {
-              "location": "local",
-              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
+              "location": "import",
+              "path": "../../common-types"
             }
           }
         },
@@ -230,7 +231,7 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListLabelWidth",
-          "resolved": "\"30\" | \"50\" | \"70\"",
+          "resolved": "\"100\" | \"30\" | \"50\" | \"70\"",
           "references": {
             "DuetListLabelWidth": {
               "location": "local",
@@ -247,6 +248,24 @@ export class DuetList {
         "attribute": "label-width",
         "reflect": false,
         "defaultValue": "\"30\""
+      },
+      "responsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable or disable the automatic responsive behaviour of the list\ncomponent. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile.\nWhen \"false\" is set, contents are always shown in a single row."
+        },
+        "attribute": "responsive",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -261,6 +280,9 @@ export class DuetList {
       }, {
         "propName": "mobile",
         "methodName": "updateListItems"
+      }, {
+        "propName": "responsive",
+        "methodName": "updateListItems"
       }, {
         "propName": "breakpoint",
         "methodName": "updateListItems"