@duetds/components 6.7.0 → 6.8.0

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

@@ -83,9 +83,9 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.1;
-  color: #00294d !important;
+  color: rgb(0, 41, 77) !important;
   text-align: left;
-  background: white;
+  background: rgb(255, 255, 255);
   border-width: 2px;
 }
 .duet-choice-card.duet-p-0 {
@@ -96,7 +96,7 @@
 }
 .duet-theme-turva .duet-choice-card {
   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 !important;
+  color: rgb(23, 28, 58) !important;
 }
 .duet-choice-card-flextainer {
   display: flex;
@@ -120,7 +120,7 @@
   text-decoration: none;
   word-break: break-word;
   cursor: pointer;
-  border: 2px solid #e1e3e6;
+  border: 2px solid rgb(225, 227, 230);
   border-radius: 4px;
   transition: background-color 150ms ease;
 }
@@ -144,45 +144,45 @@
   border-bottom-left-radius: 0;
 }
 .duet-theme-turva .duet-choice-label {
-  border-color: #e4e4e6;
+  border-color: rgb(228, 228, 230);
 }
 .duet-theme-turva .info .duet-choice-label {
-  border-color: #e4e4e6;
+  border-color: rgb(228, 228, 230);
 }
 .duet-choice-label:not(.no-hover):hover {
-  border-color: #909599;
+  border-color: rgb(144, 149, 153);
 }
 .duet-choice-label:not(.no-hover):hover .duet-checkmark-container {
-  border-color: #909599;
+  border-color: rgb(144, 149, 153);
 }
 .duet-theme-turva .duet-choice-label:not(.no-hover):hover {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-theme-turva .duet-choice-label:not(.no-hover):hover .duet-checkmark-container {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-theme-turva .info .duet-choice-label:not(.no-hover):hover {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-choice-label:active {
   opacity: 0.75;
   transition: none !important;
 }
 .checked .duet-choice-label {
-  color: #0077b3 !important;
-  background: #f3f9fc;
-  border-color: #0077b3 !important;
+  color: rgb(0, 119, 179) !important;
+  background: rgb(243, 249, 252);
+  border-color: rgb(0, 119, 179) !important;
 }
 .checked .duet-choice-label .duet-checkmark-container {
-  border-color: #0077b3;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .checked .duet-choice-label {
-  color: #171c3a !important;
-  background: #f5f5f7;
-  border-color: #171c3a !important;
+  color: rgb(23, 28, 58) !important;
+  background: rgb(245, 245, 247);
+  border-color: rgb(23, 28, 58) !important;
 }
 .duet-theme-turva .checked .duet-choice-label .duet-checkmark-container {
-  border-color: #c60c30;
+  border-color: rgb(198, 12, 48);
 }
 .checked.collapsible .duet-choice-label {
   border-bottom: 0 !important;
@@ -199,7 +199,7 @@ input:focus {
 }
 
 :host(.user-is-tabbing) input:not(:checked):focus + .duet-choice-label {
-  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 input:checked:focus + .duet-choice-label {
@@ -207,36 +207,36 @@ input:focus {
 }
 
 :host(.user-is-tabbing).duet-theme-turva input:not(:checked):focus + .duet-choice-label {
-  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);
 }
 
 input[disabled] + .duet-choice-label {
-  color: #657787 !important;
+  color: rgb(101, 119, 135) !important;
   cursor: default !important;
-  background: #f5f8fa !important;
-  border-color: #e1e3e6 !important;
+  background: rgb(245, 248, 250) !important;
+  border-color: rgb(225, 227, 230) !important;
 }
 input[disabled] + .duet-choice-label .duet-checkmark {
-  border-color: #657787 !important;
+  border-color: rgb(101, 119, 135) !important;
 }
 
 .duet-theme-turva input[disabled] + .duet-choice-label {
-  color: #747475 !important;
-  background: #f5f5f7 !important;
-  border-color: #e4e4e6 !important;
+  color: rgb(116, 116, 117) !important;
+  background: rgb(245, 245, 247) !important;
+  border-color: rgb(228, 228, 230) !important;
 }
 .duet-theme-turva input[disabled] + .duet-choice-label .duet-checkmark {
-  border-color: #747475 !important;
+  border-color: rgb(116, 116, 117) !important;
 }
 
 .checked input[disabled] + .duet-choice-label {
-  background: #e1e3e6 !important;
-  border-color: #e1e3e6 !important;
+  background: rgb(225, 227, 230) !important;
+  border-color: rgb(225, 227, 230) !important;
 }
 
 .duet-theme-turva .checked input[disabled] + .duet-choice-label {
-  background: #e4e4e6 !important;
-  border-color: #e4e4e6 !important;
+  background: rgb(228, 228, 230) !important;
+  border-color: rgb(228, 228, 230) !important;
 }
 
 .duet-checkmark-container {
@@ -244,36 +244,36 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   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;
 }
 .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 {
@@ -282,8 +282,8 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   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;
@@ -337,8 +337,8 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   z-index: 200;
   width: 100%;
   font-weight: 400;
-  color: #00294d;
-  border: 2px solid #e1e3e6;
+  color: rgb(0, 41, 77);
+  border: 2px solid rgb(225, 227, 230);
   border-top: 0;
   border-radius: 0 0 4px 4px;
 }
@@ -348,8 +348,8 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   }
 }
 .duet-theme-turva .duet-choice-card-info, .duet-theme-turva .duet-choice-card-collapsible {
-  color: #171c3a;
-  border-color: #171c3a;
+  color: rgb(23, 28, 58);
+  border-color: rgb(23, 28, 58);
 }
 .checked .duet-choice-card-info, .checked .duet-choice-card-collapsible {
   display: block;
@@ -358,31 +358,31 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   display: block;
 }
 .duet-choice-card-collapsible {
-  background: white;
-  border: 2px solid #0077b3;
+  background: rgb(255, 255, 255);
+  border: 2px solid rgb(0, 119, 179);
   border-top: 0;
 }
 .duet-choice-card-collapsible.duet-theme-turva {
-  background: white;
-  border-color: #171c3a;
+  background: rgb(255, 255, 255);
+  border-color: rgb(23, 28, 58);
 }
 .duet-choice-card-collapsible-disabled {
-  background: #f5f8fa;
-  border-color: #e1e3e6;
+  background: rgb(245, 248, 250);
+  border-color: rgb(225, 227, 230);
 }
 .duet-choice-card-collapsible-disabled.duet-theme-turva {
-  background: #f5f5f7;
-  border-color: #e4e4e6;
+  background: rgb(245, 245, 247);
+  border-color: rgb(228, 228, 230);
 }
 .duet-choice-card-info {
   font-size: 0.875rem;
   line-height: 1.5;
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
   transition: 150ms ease-out;
 }
 .duet-choice-card-info.duet-theme-turva {
-  background: #f5f5f7;
-  border-color: #e4e4e6;
+  background: rgb(245, 245, 247);
+  border-color: rgb(228, 228, 230);
 }
 
 .duet-choice-info-toggle {
@@ -393,8 +393,8 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   width: 57.6px;
   padding-top: 1.25rem;
   cursor: pointer;
-  background: white;
-  border: 2px solid #e1e3e6;
+  background: rgb(255, 255, 255);
+  border: 2px solid rgb(225, 227, 230);
   border-left: 0 none;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -402,45 +402,45 @@ input[disabled] + .duet-choice-label .duet-checkmark {
   appearance: none;
 }
 .duet-choice-info-toggle[aria-expanded=true] {
-  background: #f5f8fa;
+  background: rgb(245, 248, 250);
   border-bottom-color: transparent;
   border-bottom-right-radius: 0;
 }
 .duet-choice-info-toggle[disabled] {
   pointer-events: none;
-  background: #f5f8fa !important;
-  border-color: #e1e3e6 !important;
+  background: rgb(245, 248, 250) !important;
+  border-color: rgb(225, 227, 230) !important;
 }
 .duet-choice-info-toggle[disabled] .duet-choice-info-icon {
-  color: #909599 !important;
+  color: rgb(144, 149, 153) !important;
 }
 .duet-choice-info-toggle[disabled].duet-theme-turva {
-  background: #f5f5f7 !important;
-  border-color: #e4e4e6 !important;
+  background: rgb(245, 245, 247) !important;
+  border-color: rgb(228, 228, 230) !important;
 }
 .duet-choice-info-toggle[disabled].duet-theme-turva .duet-choice-info-icon {
-  color: #747475 !important;
+  color: rgb(116, 116, 117) !important;
 }
 .duet-choice-info-toggle:focus {
   outline: none;
 }
 :host(.user-is-tabbing) .duet-choice-info-toggle:focus {
-  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-choice-label:not(.no-hover):hover .duet-choice-info-toggle {
-  border-left-color: #909599;
+  border-left-color: rgb(144, 149, 153);
 }
 .checked .duet-choice-info-toggle {
-  border-left-color: #0077b3 !important;
+  border-left-color: rgb(0, 119, 179) !important;
 }
 .duet-choice-info-toggle duet-icon {
   display: block;
 }
 .duet-choice-info-toggle .duet-choice-info-icon {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-choice-info-toggle .duet-choice-info-icon {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 
 .duet-choice-input {

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

@@ -511,7 +511,8 @@ export class DuetChoice {
           "resolved": "\"checkbox\" | \"radio\"",
           "references": {
             "DuetChoiceType": {
-              "location": "local"
+              "location": "import",
+              "path": "../../common-types"
             }
           }
         },
@@ -850,7 +851,8 @@ export class DuetChoice {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-choice\"; }",
           "references": {
             "DuetChoiceEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -869,7 +871,8 @@ export class DuetChoice {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-choice\"; }",
           "references": {
             "DuetChoiceEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }
@@ -888,7 +891,8 @@ export class DuetChoice {
           "resolved": "{ originalEvent?: Event; checked: boolean; value: string; component: \"duet-choice\"; }",
           "references": {
             "DuetChoiceEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-choice/duet-choice.tsx"
             }
           }
         }

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

@@ -27,16 +27,60 @@
 :host(.horizontal) .duet-choice-group {
   display: block;
 }
-@media (min-width: 48em) {
+:host(.horizontal) .duet-choice-group.duet-no-stacking {
+  display: flex;
+}
+@media (max-width: 35.9375em) {
   :host(.horizontal) .duet-choice-group {
     display: flex;
     margin-bottom: 0;
   }
 }
 
-:host(.horizontal) .duet-choice-group.duet-no-stacking {
+:host(.horizontal.duet-choice-group-breakpoint-x-small) .duet-choice-group:not(.duet-no-stacking) {
   display: flex;
 }
+@media (max-width: 22.5em) {
+  :host(.horizontal.duet-choice-group-breakpoint-x-small) .duet-choice-group:not(.duet-no-stacking) {
+    display: block;
+  }
+}
+
+:host(.horizontal.duet-choice-group-breakpoint-small) .duet-choice-group:not(.duet-no-stacking) {
+  display: block;
+}
+@media (min-width: 36em) {
+  :host(.horizontal.duet-choice-group-breakpoint-small) .duet-choice-group:not(.duet-no-stacking) {
+    display: flex;
+  }
+}
+
+:host(.horizontal.duet-choice-group-breakpoint-medium) .duet-choice-group:not(.duet-no-stacking) {
+  display: block;
+}
+@media (min-width: 48em) {
+  :host(.horizontal.duet-choice-group-breakpoint-medium) .duet-choice-group:not(.duet-no-stacking) {
+    display: flex;
+  }
+}
+
+:host(.horizontal.duet-choice-group-breakpoint-large) .duet-choice-group:not(.duet-no-stacking) {
+  display: block;
+}
+@media (min-width: 62em) {
+  :host(.horizontal.duet-choice-group-breakpoint-large) .duet-choice-group:not(.duet-no-stacking) {
+    display: flex;
+  }
+}
+
+:host(.horizontal.duet-choice-group-breakpoint-x-large) .duet-choice-group:not(.duet-no-stacking) {
+  display: block;
+}
+@media (min-width: 64.0625em) {
+  :host(.horizontal.duet-choice-group-breakpoint-x-large) .duet-choice-group:not(.duet-no-stacking) {
+    display: flex;
+  }
+}
 
 .duet-choice-group {
   position: relative;

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

@@ -40,6 +40,7 @@ export class DuetChoiceGroup {
     this.tooltip = undefined;
     this.tooltipDirection = "auto";
     this.responsive = false;
+    this.breakpoint = "small";
     this.value = undefined;
     this.disabled = undefined;
   }
@@ -124,7 +125,14 @@ export class DuetChoiceGroup {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+    return (h(Host, { onDuetChange: this.onSelect, class: {
+        horizontal: this.direction === "horizontal",
+        "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
+        "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
+        "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
+        "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
+        "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
+      } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
   }
   static get is() { return "duet-choice-group"; }
   static get encapsulation() { return "scoped"; }
@@ -357,6 +365,29 @@ export class DuetChoiceGroup {
         "reflect": false,
         "defaultValue": "false"
       },
+      "breakpoint": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetChoiceGroupBreakpoint",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {
+            "DuetChoiceGroupBreakpoint": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Switch the breakpoint used to trigger the content stacking. These match to\nsimilar media query tokens eg.: $media-query-small, $media-query-medium."
+        },
+        "attribute": "breakpoint",
+        "reflect": false,
+        "defaultValue": "\"small\""
+      },
       "value": {
         "type": "string",
         "mutable": true,

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

@@ -26,12 +26,12 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 
 :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-m-0) {
@@ -49,7 +49,7 @@
   -webkit-hyphens: auto;
   hyphens: auto;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 @media (max-width: 35.9375em) {
   .duet-collapsible-content {
@@ -58,7 +58,7 @@
 }
 .duet-collapsible-content.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([open]) > .duet-collapsible-content {
   display: block;
@@ -73,7 +73,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: left;
   cursor: pointer;
   border-radius: 4px;
@@ -83,7 +83,7 @@
 }
 .duet-collapsible-heading.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-collapsible-heading .duet-collapsible-heading-content {
   flex: 0 auto;
@@ -98,10 +98,10 @@
 }
 :host(.user-is-tabbing) .duet-collapsible-heading: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-collapsible-heading: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-collapsible-heading-icon {
@@ -109,7 +109,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   transition: transform 300ms ease;
 }
 .duet-collapsible-heading-icon:last-child, .duet-collapsible-heading-icon:last-of-type {

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

@@ -165,7 +165,8 @@ export class DuetCollapsible {
           "resolved": "\"normal\" | \"semibold\"",
           "references": {
             "DuetCollapsibleWeight": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -187,7 +188,8 @@ export class DuetCollapsible {
           "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\"",
           "references": {
             "DuetCollapsibleHeadingFontSize": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         },
@@ -283,7 +285,8 @@ export class DuetCollapsible {
           "resolved": "{ component: \"duet-collapsible\"; originalEvent: KeyboardEvent | MouseEvent; }",
           "references": {
             "DuetCollapsibleToggleEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-collapsible/duet-collapsible.tsx"
             }
           }
         }