@duetds/components 6.7.0 → 6.8.0

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

@@ -58,6 +58,10 @@ export class DuetList {
       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
+      this.toggleClass(item, "duet-list-bordered", this.variation === "bordered");
+      // Create inner borders if inner-bordered variation is used
+      this.toggleClass(item, "duet-list-inner-bordered", this.variation === "inner-bordered");
       // Finally apply turva theme if necessary
       this.toggleClass(item, "duet-theme-turva", this.theme === "turva");
     });
@@ -160,7 +164,8 @@ export class DuetList {
           "resolved": "\"center\" | \"left\"",
           "references": {
             "DuetListMobileAlignment": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -182,7 +187,8 @@ export class DuetList {
           "resolved": "\"large\" | \"small\"",
           "references": {
             "DuetListBreakpoint": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -201,10 +207,11 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListVariation",
-          "resolved": "\"default\" | \"striped\"",
+          "resolved": "\"bordered\" | \"default\" | \"inner-bordered\" | \"striped\"",
           "references": {
             "DuetListVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },
@@ -226,7 +233,8 @@ export class DuetList {
           "resolved": "\"30\" | \"50\" | \"70\"",
           "references": {
             "DuetListLabelWidth": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-list/duet-list.tsx"
             }
           }
         },

package/lib/collection/components/duet-list-item/duet-list-item.css

@@ -30,7 +30,7 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 @media (max-width: 35.9375em) {
   :host {
@@ -48,7 +48,7 @@
 }
 @media (max-width: 35.9375em) {
   :host dt,
-:host dd {
+  :host dd {
     flex: inherit;
     flex-basis: 100% !important;
     width: 100%;
@@ -99,17 +99,41 @@
 
 :host(.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;
+  color: rgb(23, 28, 58);
 }
 
 :host(.duet-list-striped:nth-child(odd)) dt,
 :host(.duet-list-striped:nth-child(odd)) dd {
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
 }
 
 :host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dt,
 :host(.duet-list-striped.duet-theme-turva:nth-child(odd)) dd {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
+}
+
+:host(.duet-list-bordered) {
+  border-block-start: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-bordered:last-child) {
+  border-block-end: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-bordered.duet-theme-turva) {
+  border-block-start: 1px solid rgb(228, 228, 230);
+}
+
+:host(.duet-list-bordered.duet-theme-turva:last-child) {
+  border-block-end: 1px solid rgb(228, 228, 230);
+}
+
+:host(.duet-list-inner-bordered:not(:last-child)) {
+  border-block-end: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
+  border-block-end: 1px solid rgb(228, 228, 230);
 }
 
 :host(.duet-list-width-30) dt {
@@ -141,7 +165,7 @@
 
 @media (max-width: 35.9375em) {
   :host(.duet-list-mobile-center) dt,
-:host(.duet-list-mobile-center) dd {
+  :host(.duet-list-mobile-center) dd {
     text-align: center;
   }
 }
@@ -151,7 +175,7 @@
     flex-wrap: wrap;
   }
   :host(.duet-list-breakpoint-large) dt,
-:host(.duet-list-breakpoint-large) dd {
+  :host(.duet-list-breakpoint-large) dd {
     flex: inherit;
     flex-basis: 100% !important;
     width: 100%;
@@ -168,7 +192,7 @@
 
 @media (max-width: 61.9375em) {
   :host(.duet-list-breakpoint-large.duet-list-mobile-center) dt,
-:host(.duet-list-breakpoint-large.duet-list-mobile-center) dd {
+  :host(.duet-list-breakpoint-large.duet-list-mobile-center) dd {
     text-align: center !important;
   }
 }

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

@@ -43,10 +43,10 @@
 }
 .duet-logo:focus {
   outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 .duet-logo.duet-logo-en {
   width: 166px;

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

@@ -167,7 +167,8 @@ export class DuetLogo {
           "resolved": "\"large\" | \"medium\"",
           "references": {
             "DuetLogoSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-logo/duet-logo.tsx"
             }
           }
         },

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

@@ -27,7 +27,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
+  background: rgb(255, 255, 255);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
 }
 @media (min-width: 62em) {
@@ -51,7 +51,7 @@
   display: block;
   width: 93%;
   height: 1px;
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
 }
 .duet-menu-bar.horizontal-nav .bottom {
   position: absolute;
@@ -60,7 +60,7 @@
   display: block;
   width: 100%;
   height: 1px;
-  background: #e1e3e6;
+  background: rgb(225, 227, 230);
 }
 .duet-menu-bar.horizontal-nav .more-left {
   position: absolute;
@@ -146,27 +146,27 @@
   height: 100%;
 }
 .duet-menu-bar.duet-theme-turva {
-  background: white;
+  background: rgb(255, 255, 255);
 }
 
 slot[name=center] {
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-theme-turva slot[name=center] {
   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;
+  color: rgb(148, 9, 37);
 }
 
 slot[name=right] {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #004d80;
+  color: rgb(0, 77, 128);
 }
 .duet-theme-turva slot[name=right] {
   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;
+  color: rgb(148, 9, 37);
 }

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

@@ -23,7 +23,13 @@ export class DuetMenuBar {
       this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
     };
     this.scrollToActive = () => {
-      const active = this.element.querySelector("[active]");
+      const actives = this.element.querySelectorAll("[active]");
+      let active;
+      actives.forEach(a => {
+        if (a.active) {
+          active = a;
+        }
+      });
       if (active && active.offsetLeft) {
         if (active.offsetLeft > 50) {
           this.container.scrollLeft = active.offsetLeft - this.element.offsetWidth / 2 + active.offsetWidth / 2;
@@ -200,7 +206,8 @@ export class DuetMenuBar {
           "resolved": "{ originalEvent: Event; name: \"logoClick\"; data: { logoHref: string; }; component: \"duet-menu-bar\"; }",
           "references": {
             "DuetMenuBarChangeEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-menu-bar/duet-menu-bar.tsx"
             }
           }
         }

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

@@ -50,9 +50,9 @@
 }
 @media (min-width: 62em) {
   .duet-menu-bar-button:hover {
-    color: #0077b3;
+    color: rgb(0, 119, 179);
   }
   .duet-menu-bar-button:hover.duet-theme-turva {
-    color: #c60c30;
+    color: rgb(198, 12, 48);
   }
 }

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

@@ -51,7 +51,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #004d80;
+  color: rgb(0, 77, 128);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -67,7 +67,7 @@
   }
 }
 .duet-menu-bar-dropdown button:hover {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-menu-bar-dropdown button .label {
   display: flex;
@@ -76,13 +76,13 @@
   justify-content: center;
 }
 .duet-menu-bar-dropdown button.active {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-menu-bar-dropdown button.active .caret {
   transform: rotate(180deg);
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown button.active::after {
   position: absolute;
@@ -93,12 +93,12 @@
   width: 100%;
   height: 2px;
   content: "";
-  background: #0077b3;
+  background: rgb(0, 119, 179);
   transition: 300ms ease;
   transform: translateY(2px);
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown .items {
   position: absolute;
@@ -111,8 +111,8 @@
   justify-content: center;
   min-width: 225px;
   padding: 1rem 0;
-  color: #00294d;
-  background: #f3f9fc;
+  color: rgb(0, 41, 77);
+  background: rgb(243, 249, 252);
   border-radius: 0 0 8px 8px;
   box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
 }
@@ -121,17 +121,17 @@
 }
 .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;
+  color: rgb(148, 9, 37);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button.active {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 .duet-menu-bar-dropdown.duet-theme-turva .items {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
 }

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

@@ -36,25 +36,25 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
 }
 .duet-menu-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;
+  color: rgb(23, 28, 58);
 }
 .duet-menu-bar-dropdown-link--slot-right:hover {
-  background: #e6f2f8;
+  background: rgb(230, 242, 248);
 }
 .duet-menu-bar-dropdown-link--slot-right:hover.duet-theme-turva {
-  background: #e4e4e6;
+  background: rgb(228, 228, 230);
 }
 .duet-menu-bar-dropdown-link--slot-below:hover {
-  color: #004d80;
-  background: #f3f9fc;
+  color: rgb(0, 77, 128);
+  background: rgb(243, 249, 252);
 }
 .duet-menu-bar-dropdown-link--slot-below:hover.duet-theme-turva {
-  color: #940925;
-  background: #e4e4e6;
+  color: rgb(148, 9, 37);
+  background: rgb(228, 228, 230);
 }

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

@@ -48,7 +48,7 @@
   }
 }
 .duet-menu-bar-link.active {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-menu-bar-link.active::after {
   position: absolute;
@@ -60,7 +60,7 @@
   width: 100%;
   height: 1px;
   content: "";
-  background: #0077b3;
+  background: rgb(0, 119, 179);
   transition: 300ms ease;
   transform: translateY(2px);
 }
@@ -71,16 +71,16 @@
   }
 }
 .duet-menu-bar-link.active.duet-theme-turva {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-menu-bar-link.active.duet-theme-turva::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link:hover {
-    color: #0077b3;
+    color: rgb(0, 119, 179);
   }
   .duet-menu-bar-link:hover.duet-theme-turva {
-    color: #c60c30;
+    color: rgb(198, 12, 48);
   }
 }

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

@@ -82,8 +82,8 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 1.5;
-  color: #00294d;
-  background: white;
+  color: rgb(0, 41, 77);
+  background: rgb(255, 255, 255);
   border-radius: 4px;
   opacity: 0;
   transition: 300ms ease;
@@ -92,7 +92,7 @@
 }
 .duet-theme-turva .duet-modal {
   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;
+  color: rgb(23, 28, 58);
 }
 .duet-modal-active .duet-modal {
   opacity: 1;
@@ -192,7 +192,7 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-decoration: none;
   text-overflow: ellipsis;
   letter-spacing: -0.01rem;

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

@@ -56,6 +56,7 @@ export class DuetModal {
     this.theme = "";
     this.heading = "";
     this.headingLevel = "h3";
+    this.headingVisualLevel = undefined;
     this.icon = "";
     this.color = "";
     this.active = false;
@@ -159,33 +160,33 @@ export class DuetModal {
    * Always the last one in the class.
    */
   render() {
+    var _a;
     let iconColor = "primary";
     let closeColor = "secondary";
     if (this.theme === "turva") {
       iconColor = "primary-turva";
       closeColor = "secondary-turva";
     }
-    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy ? `${this.slotDefaultId} ${this.accessibleDescribedBy}` : this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.modalId, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
         "duet-modal-overlay": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-modal-active": this.open,
-      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { class: {
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
         "duet-modal-inner": true,
         "duet-modal-large": this.size === "large",
-      }, role: "document", onClick: e => {
+      }, onClick: e => {
         if (this.closeOnBlur) {
-          this.closeModal(e);
-        }
-      } }, h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
-        if (this.closeOnBlur) {
-          e.stopPropagation();
+          const source = e.target || e.srcElement;
+          if (source === this.modalInnerEl) {
+            this.closeModal(e);
+          }
         }
-      } }, h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
+      } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
         "duet-modal-body": true,
         "duet-modal-gutter-small": this.gutterSize === "small",
         "duet-modal-gutter-medium": this.gutterSize === "medium",
         "duet-modal-gutter-large": this.gutterSize === "large",
-      } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+      } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
   }
   static get is() { return "duet-modal"; }
   static get encapsulation() { return "shadow"; }
@@ -285,7 +286,8 @@ export class DuetModal {
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "DuetModalSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         },
@@ -377,7 +379,8 @@ export class DuetModal {
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "DuetModalSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         },
@@ -455,6 +458,28 @@ export class DuetModal {
         "reflect": false,
         "defaultValue": "\"h3\""
       },
+      "headingVisualLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetVisualHeadingLevel | undefined",
+          "resolved": "\"h0\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "references": {
+            "DuetVisualHeadingLevel": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the visual style mimic a specific heading level. This option allows\nyou to make e.g. h1 visually look like h3, but still keep it h1 in the\nmarkup."
+        },
+        "attribute": "heading-visual-level",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -590,7 +615,8 @@ export class DuetModal {
           "resolved": "{ originalEvent: Event; component: \"duet-modal\"; }",
           "references": {
             "DuetModalCloseEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-modal/duet-modal.tsx"
             }
           }
         }