@duetds/components 6.7.0 → 6.8.0

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

@@ -405,7 +405,8 @@ export class DuetButton {
           "resolved": "\"default\" | \"destructive\" | \"destructive-primary\" | \"destructive-secondary\" | \"input-button-embedded\" | \"input-button-primary\" | \"input-button-secondary\" | \"negative\" | \"plain\" | \"primary\" | \"secondary\"",
           "references": {
             "DuetButtonVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -520,7 +521,8 @@ export class DuetButton {
           "resolved": "boolean",
           "references": {
             "DuetButtonTextCentering": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -542,7 +544,8 @@ export class DuetButton {
           "resolved": "\"auto\" | \"none\"",
           "references": {
             "DuetButtonWrapping": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -840,7 +843,8 @@ export class DuetButton {
           "resolved": "\"large\" | \"medium\" | \"medium-small\" | \"small\"",
           "references": {
             "DuetButtonIconSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },
@@ -862,7 +866,8 @@ export class DuetButton {
           "resolved": "\"medium\" | \"small\"",
           "references": {
             "DuetButtonSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-button/duet-button.tsx"
             }
           }
         },

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

@@ -15,7 +15,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #657787;
+  color: rgb(101, 119, 135);
   vertical-align: top;
 }
 :host.duet-p-0 {
@@ -32,15 +32,15 @@
 
 :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: #747475;
+  color: rgb(116, 116, 117);
 }
 
 :host(.duet-caption-selected) {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 
 :host(.duet-caption-selected.duet-theme-turva) {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 
 :host(.duet-m-0) {

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

@@ -115,7 +115,8 @@ export class DuetCaption {
           "resolved": "\"medium\" | \"small\"",
           "references": {
             "DuetCaptionSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-caption/duet-caption.tsx"
             }
           }
         },

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

@@ -44,7 +44,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-decoration: none;
   border-radius: 4px;
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
@@ -57,10 +57,10 @@
 }
 .duet-card: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-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;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58);
 }
 @media (max-width: 20.5em) {
   .duet-card.shadow-xxx-small {
@@ -114,7 +114,7 @@
 }
 .duet-card.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);
   box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07);
 }
 @media (min-width: 36em) {
@@ -231,14 +231,22 @@
   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: 1.25rem;
   font-weight: 800;
-  color: #00294d;
-  border-bottom: 1px solid #e1e3e6;
+  color: rgb(0, 41, 77);
+  border-bottom: 1px solid rgb(225, 227, 230);
+  border-radius: 4px 4px 0 0;
 }
 @media (min-width: 36em) {
   .duet-card-heading {
     padding: 15px 28px 16px !important;
     margin: -28px -28px 20px;
   }
+  .none .duet-card-heading {
+    padding: 0 !important;
+    margin: 0;
+  }
+}
+.duet-card-image-mask + .duet-card-heading {
+  border-radius: 0;
 }
 .duet-card-heading[role=button] {
   -webkit-user-select: none;
@@ -254,10 +262,10 @@
 }
 :host(.user-is-tabbing) .duet-card-heading[role=button]:focus {
   border-radius: 4px;
-  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);
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-card-heading[role=button]:focus {
-  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-card-collapsed .duet-card-heading {
   margin-bottom: 0 !important;
@@ -265,8 +273,8 @@
 }
 .duet-theme-turva .duet-card-heading {
   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;
-  border-color: #e4e4e6;
+  color: rgb(23, 28, 58);
+  border-color: rgb(228, 228, 230);
 }
 @media (min-width: 36em) {
   .xx-small .duet-card-heading {
@@ -338,8 +346,8 @@
   }
 }
 .none .duet-card-heading {
-  padding: 0 0 20px !important;
-  margin: 0 0 20px;
+  padding: 0;
+  margin: 0;
 }
 
 .duet-card-footer {
@@ -347,12 +355,12 @@
   margin: 20px -20px -20px;
   font-size: 0.875rem;
   line-height: 1.25;
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
 }
 .duet-theme-turva .duet-card-footer {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
 }
 @media (min-width: 36em) {
   .duet-card-footer {
@@ -417,8 +425,8 @@
   }
 }
 .none .duet-card-footer {
-  padding: 12px 0 !important;
-  margin: 20px 0 0;
+  padding: 0;
+  margin: 0;
 }
 
 .duet-card-content {
@@ -490,7 +498,8 @@
 }
 .none .duet-card-image-mask {
   width: 100%;
-  margin: 0 0 20px;
+  padding: 0;
+  margin: 0;
 }
 
 .duet-card-image {

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

@@ -3,7 +3,7 @@
  */
 import arrowUpIcon from "@duetds/icons/lib/assets/action-arrow-up";
 import { Build, Fragment, h, Host } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common";
+import { duetBlock, duetHeadingLevels, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
@@ -40,6 +40,7 @@ export class DuetCard {
     this.collapsible = false;
     this.open = true;
     this.headingLevel = "h2";
+    this.headingBackground = undefined;
     this.icon = undefined;
     this.image = undefined;
     this.background = "gray-lightest";
@@ -60,7 +61,8 @@ export class DuetCard {
     this.hasFooter = !!this.element.querySelector("[slot='footer']");
   }
   renderHeading() {
-    const HeadingTag = sanitizeString(this.headingLevel);
+    const safeHeadingLevel = sanitizeString(this.headingLevel);
+    const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
     const headingProps = this.collapsible
       ? {
         role: "button",
@@ -71,7 +73,10 @@ export class DuetCard {
         onKeyDown: this.handleKeyDown,
       }
       : {};
-    return (h(HeadingTag, Object.assign({ 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 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" })));
   }
   /**
    * Sets focus on the specified `duet-card`. Use this method instead of the global
@@ -181,7 +186,8 @@ export class DuetCard {
           "resolved": "\"default\" | \"info\" | \"plain\"",
           "references": {
             "DuetCardVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx"
             }
           }
         },
@@ -235,10 +241,10 @@ export class DuetCard {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "DuetHeadingLevel",
-          "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "original": "DuetCardHeadingLevel",
+          "resolved": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
           "references": {
-            "DuetHeadingLevel": {
+            "DuetCardHeadingLevel": {
               "location": "import",
               "path": "../../common-types"
             }
@@ -248,12 +254,34 @@ export class DuetCard {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn\u2019t change the style visually."
+          "text": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn\u2019t change the style visually.\nThis setting is only used if the heading property is set.\nIf you provide your own heading(s) in the slot, you should set this to neutral \"div\"\nin order to avoid nested headings."
         },
         "attribute": "heading-level",
         "reflect": false,
         "defaultValue": "\"h2\""
       },
+      "headingBackground": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetColor | undefined",
+          "resolved": "string",
+          "references": {
+            "DuetColor": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom color to be used for the card's heading background, as a design token entered in\ncamelCase or kebab-case. Example: \"primary\"."
+        },
+        "attribute": "heading-background",
+        "reflect": false
+      },
       "icon": {
         "type": "string",
         "mutable": false,
@@ -324,7 +352,8 @@ export class DuetCard {
           "resolved": "\"large\" | \"medium\" | \"none\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-small\"",
           "references": {
             "DuetCardPadding": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx"
             }
           }
         },
@@ -442,7 +471,8 @@ export class DuetCard {
           "resolved": "{ component: \"duet-card\"; originalEvent: KeyboardEvent | MouseEvent; }",
           "references": {
             "DuetCardToggleEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-card/duet-card.tsx"
             }
           }
         }

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

@@ -47,7 +47,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   vertical-align: top;
   cursor: pointer;
   background: transparent;
@@ -55,7 +55,7 @@
 }
 .duet-theme-turva .duet-label {
   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-label span {
   display: inline-block;
@@ -90,26 +90,26 @@
   margin: 2px 10px 1px 1px;
   vertical-align: top;
   content: "";
-  background: white;
-  border: 1px solid #00294d;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(0, 41, 77);
   border-radius: 4px;
 }
 .duet-theme-turva .duet-checkbox + label::before {
-  border-color: #171c3a;
+  border-color: rgb(23, 28, 58);
 }
 .duet-checkbox:checked + label::before {
-  background: #00294d;
-  border: 1px solid #00294d;
+  background: rgb(0, 41, 77);
+  border: 1px solid rgb(0, 41, 77);
 }
 .duet-theme-turva .duet-checkbox:checked + label::before {
-  background: #171c3a;
-  border-color: #171c3a;
+  background: rgb(23, 28, 58);
+  border-color: rgb(23, 28, 58);
 }
 .duet-checkbox:focus + label::before {
-  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-checkbox:focus + label::before {
-  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-checkbox + label {
   position: static;
@@ -130,24 +130,24 @@
   cursor: default;
 }
 .duet-checkbox[disabled] + label {
-  color: #657787;
+  color: rgb(101, 119, 135);
 }
 .duet-theme-turva .duet-checkbox[disabled] + label {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 .duet-checkbox[disabled] + label::before {
-  border-color: #cfd2d4;
+  border-color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-checkbox[disabled] + label::before {
-  border-color: #cfcfd1;
+  border-color: rgb(207, 207, 209);
 }
 .duet-checkbox[disabled]:checked + label::before {
-  background: #657787;
-  border: 1px solid #657787;
+  background: rgb(101, 119, 135);
+  border: 1px solid rgb(101, 119, 135);
 }
 .duet-theme-turva .duet-checkbox[disabled]:checked + label::before {
-  background: #747475;
-  border-color: #747475;
+  background: rgb(116, 116, 117);
+  border-color: rgb(116, 116, 117);
 }
 
 .duet-label-hidden .duet-label span {

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

@@ -480,7 +480,8 @@ export class DuetCheckbox {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-checkbox\"; }",
           "references": {
             "DuetCheckboxEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
             }
           }
         }
@@ -499,7 +500,8 @@ export class DuetCheckbox {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-checkbox\"; }",
           "references": {
             "DuetCheckboxEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
             }
           }
         }
@@ -518,7 +520,8 @@ export class DuetCheckbox {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-checkbox\"; }",
           "references": {
             "DuetCheckboxEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-checkbox/duet-checkbox.tsx"
             }
           }
         }

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

@@ -3,7 +3,7 @@
   width: 20px;
   height: 20px;
   margin-left: auto;
-  border: 1px solid #909599;
+  border: 1px solid rgb(144, 149, 153);
   border-radius: 4px;
   transition: border 300ms ease;
 }
@@ -11,31 +11,31 @@
   margin-right: auto;
 }
 .duet-theme-turva .duet-checkmark-container {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .checked .duet-checkmark-container {
-  background: #0077b3;
-  border-color: #0077b3;
+  background: rgb(0, 119, 179);
+  border-color: rgb(0, 119, 179);
   transition: none;
 }
 .duet-theme-turva .checked .duet-checkmark-container {
-  background: #171c3a;
-  border-color: #171c3a !important;
+  background: rgb(23, 28, 58);
+  border-color: rgb(23, 28, 58) !important;
 }
 .duet-checkmark-container.duet-checkmark-radio {
   border-radius: 50%;
 }
 [disabled] + label .duet-checkmark-container {
-  border-color: #cfd2d4 !important;
+  border-color: rgb(207, 210, 212) !important;
 }
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
-  border-color: #cfcfd1 !important;
+  border-color: rgb(207, 207, 209) !important;
 }
 .checked [disabled] + label .duet-checkmark-container {
-  background: #cfd2d4 !important;
+  background: rgb(207, 210, 212) !important;
 }
 .duet-theme-turva .checked [disabled] + label .duet-checkmark-container {
-  background: #cfcfd1 !important;
+  background: rgb(207, 207, 209) !important;
 }
 
 .duet-checkmark {
@@ -44,8 +44,8 @@
   left: 3px;
   width: 5.3333333333px;
   height: 11.8518518519px;
-  border-top: 2px solid white;
-  border-right: 2px solid white;
+  border-top: 2px solid rgb(255, 255, 255);
+  border-right: 2px solid rgb(255, 255, 255);
   opacity: 1;
   transform: scaleX(-1) rotate(135deg) translateZ(0);
   transform-origin: left top;

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -123,7 +123,7 @@ export class DuetCheckmark {
           "references": {
             "DuetChoiceType": {
               "location": "import",
-              "path": "./duet-choice"
+              "path": "../../common-types"
             }
           }
         },