@duetds/components 6.6.2 → 6.7.1

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

@@ -39,7 +39,7 @@
 
 @media (min-width: 62em) {
   :host slot::slotted(duet-submenu-bar-link),
-:host slot::slotted(duet-submenu-bar-dropdown) {
+  :host slot::slotted(duet-submenu-bar-dropdown) {
     position: relative;
     top: auto;
     opacity: 1;
@@ -48,11 +48,11 @@
 }
 .duet-submenu-bar {
   position: relative;
-  background: #f3f9fc;
+  background: rgb(243, 249, 252);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar {
-    border-bottom: 1px solid #cde5f1;
+    border-bottom: 1px solid rgb(205, 229, 241);
   }
 }
 .duet-submenu-bar button {
@@ -65,7 +65,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 .duet-submenu-bar button.active .caret {
   transform: rotate(180deg);
@@ -88,15 +88,15 @@
   width: 100%;
   max-height: 1000px;
   visibility: visible;
-  background: #f3f9fc;
-  border-bottom: 1px solid #cfd2d4;
+  background: rgb(243, 249, 252);
+  border-bottom: 1px solid rgb(207, 210, 212);
   transition: 300ms ease;
 }
 .duet-submenu-bar .items.hidden {
   max-height: 0;
   overflow: hidden;
   visibility: hidden;
-  border-bottom: 0 solid #cfd2d4;
+  border-bottom: 0 solid rgb(207, 210, 212);
   transition: 300ms ease;
 }
 @media (min-width: 62em) {
@@ -115,9 +115,9 @@
   }
 }
 .duet-submenu-bar.duet-theme-turva {
-  background: #f5f5f7;
-  border-bottom: 1px solid #e4e4e6;
+  background: rgb(245, 245, 247);
+  border-bottom: 1px solid rgb(228, 228, 230);
 }
 .duet-submenu-bar.duet-theme-turva .items {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
 }

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

@@ -47,7 +47,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
   cursor: pointer;
@@ -60,7 +60,7 @@
     justify-content: center;
     width: auto;
     font-size: 0.875rem;
-    color: #004d80;
+    color: rgb(0, 77, 128);
   }
 }
 .duet-submenu-bar-dropdown button .label {
@@ -78,17 +78,17 @@
     right: 12px;
   }
   .duet-submenu-bar-dropdown button:hover {
-    color: #00294d;
-    background: #e6f2f8;
+    color: rgb(0, 41, 77);
+    background: rgb(230, 242, 248);
   }
   .duet-submenu-bar-dropdown button:hover.active {
-    color: #0077b3;
+    color: rgb(0, 119, 179);
   }
   .duet-submenu-bar-dropdown button.active {
-    color: #0077b3;
+    color: rgb(0, 119, 179);
   }
   .duet-theme-turva .duet-submenu-bar-dropdown button.active {
-    color: #c60c30;
+    color: rgb(198, 12, 48);
   }
   .duet-submenu-bar-dropdown button.active::after {
     position: absolute;
@@ -99,12 +99,12 @@
     width: 100%;
     height: 1px;
     content: "";
-    background: #0077b3;
+    background: rgb(0, 119, 179);
     transition: 300ms ease;
     transform: translateY(1px);
   }
   .duet-theme-turva .duet-submenu-bar-dropdown button.active::after {
-    background: #c60c30;
+    background: rgb(198, 12, 48);
   }
 }
 .duet-submenu-bar-dropdown .items {
@@ -115,7 +115,7 @@
   max-height: 1000px;
   padding: 0 0 16px;
   overflow-y: auto;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   visibility: visible;
   transition: max-height 0.3s ease-in, padding 0.3s ease-in;
   -ms-overflow-style: none;
@@ -131,7 +131,7 @@
     z-index: 600;
     min-width: 320px;
     padding: 0;
-    background: white;
+    background: rgb(255, 255, 255);
     border-radius: 0 0 4px 4px;
     box-shadow: 0 6px 6px 0 rgba(0, 41, 77, 0.1);
     transition: none;
@@ -146,23 +146,23 @@
 }
 .duet-submenu-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: #171c3a;
+  color: rgb(23, 28, 58);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown.duet-theme-turva button {
-    color: #940925;
+    color: rgb(148, 9, 37);
   }
   .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
-    color: #171c3a;
-    background: #e4e4e6;
+    color: rgb(23, 28, 58);
+    background: rgb(228, 228, 230);
   }
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button.active {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button.active::after {
-  background: #c60c30;
+  background: rgb(198, 12, 48);
 }
 .duet-submenu-bar-dropdown.duet-theme-turva .items {
-  background: #f5f5f7;
+  background: rgb(245, 245, 247);
 }

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

@@ -36,7 +36,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
 }
@@ -48,21 +48,21 @@
 }
 .duet-submenu-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);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-dropdown-link:hover {
-    color: #004d80;
-    background: #f3f9fc;
+    color: rgb(0, 77, 128);
+    background: rgb(243, 249, 252);
   }
   .duet-submenu-bar-dropdown-link:hover.duet-theme-turva {
-    color: #940925;
-    background: #e4e4e6;
+    color: rgb(148, 9, 37);
+    background: rgb(228, 228, 230);
   }
 }
 .duet-submenu-bar-dropdown-link.highlight {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-submenu-bar-dropdown-link.highlight.duet-theme-turva {
-  color: #c60c30;
+  color: rgb(198, 12, 48);
 }

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

@@ -41,7 +41,7 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: center;
   text-decoration: none;
 }
@@ -52,25 +52,25 @@
     align-items: center;
     justify-content: center;
     font-size: 0.875rem;
-    color: #004d80;
+    color: rgb(0, 77, 128);
   }
 }
 .duet-submenu-bar-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);
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-link.duet-theme-turva {
-    color: #940925;
+    color: rgb(148, 9, 37);
   }
 }
 @media (min-width: 62em) {
   .duet-submenu-bar-link:hover {
-    color: #00294d;
-    background: #e6f2f8;
+    color: rgb(0, 41, 77);
+    background: rgb(230, 242, 248);
   }
   .duet-submenu-bar-link:hover.duet-theme-turva {
-    color: #171c3a;
-    background: #e4e4e6;
+    color: rgb(23, 28, 58);
+    background: rgb(228, 228, 230);
   }
 }

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

@@ -45,10 +45,10 @@
   }
 }
 .duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom: 1px solid #e1e3e6;
+  border-bottom: 1px solid rgb(225, 227, 230);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom-color: #e4e4e6;
+  border-bottom-color: rgb(228, 228, 230);
 }
 
 .duet-tab-variation-checked .duet-tab-group-tabs {
@@ -58,10 +58,8 @@
   padding-left: 16px;
   overflow-x: scroll;
   /* Hide scrollbar for IE, Edge and Firefox */
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
   /* Hide scrollbar for Chrome, Safari and Opera */
 }
 .duet-tab-variation-checked .duet-tab-group-tabs::-webkit-scrollbar {
@@ -72,6 +70,24 @@
     overflow: visible;
   }
 }
+.duet-tab-plain-scrolling .duet-tab-group-tabs {
+  display: flex;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+}
+.duet-tab-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar {
+  display: none;
+}
+@media (min-width: 36em) {
+  .duet-tab-plain-scrolling .duet-tab-group-tabs {
+    display: block;
+    overflow: auto;
+  }
+}
 
 @media (min-width: 36em) {
   duet-select {
@@ -93,12 +109,12 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.1;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  background: white;
-  border: 2px solid #e1e3e6;
+  background: rgb(255, 255, 255);
+  border: 2px solid rgb(225, 227, 230);
   border-radius: 0;
   transition: 150ms ease;
 }
@@ -110,8 +126,8 @@
 }
 .duet-theme-turva .duet-tab-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: #171c3a;
-  border-color: #e4e4e6;
+  color: rgb(23, 28, 58);
+  border-color: rgb(228, 228, 230);
 }
 .duet-tab-button.duet-p-0 {
   padding: 0 !important;
@@ -121,16 +137,16 @@
     display: inline-block;
     width: auto;
     margin-left: -2px;
-    border-right: 2px solid #e1e3e6;
+    border-right: 2px solid rgb(225, 227, 230);
     border-radius: 0;
   }
 }
 .duet-tab-button:hover {
   z-index: 200;
-  border-color: #909599;
+  border-color: rgb(144, 149, 153);
 }
 .duet-theme-turva .duet-tab-button:hover {
-  border-color: #747475;
+  border-color: rgb(116, 116, 117);
 }
 .duet-tab-button:active {
   opacity: 0.75;
@@ -138,26 +154,26 @@
 }
 .duet-tab-button.selected {
   z-index: 201;
-  color: white;
-  background: #00294d;
-  border-color: #00294d;
+  color: rgb(255, 255, 255);
+  background: rgb(0, 41, 77);
+  border-color: rgb(0, 41, 77);
   outline: 0;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
-  color: white;
-  background-color: #171c3a;
-  border-color: #171c3a;
+  color: rgb(255, 255, 255);
+  background-color: rgb(23, 28, 58);
+  border-color: rgb(23, 28, 58);
 }
 .duet-tab-button:focus {
   z-index: 200;
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179) !important;
 }
 :host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px rgb(23, 28, 58) !important;
 }
 .duet-tab-button:first-child {
   border-top-left-radius: 4px;
@@ -193,13 +209,13 @@
   margin-left: 36px;
 }
 .duet-tab-variation-plain .duet-tab-button.selected {
-  color: #0077b3;
-  background: white;
-  border-bottom: 3px solid #0077b3;
+  color: rgb(0, 119, 179);
+  background: rgb(255, 255, 255);
+  border-bottom: 3px solid rgb(0, 119, 179);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: #c60c30;
-  border-bottom-color: #c60c30;
+  color: rgb(198, 12, 48);
+  border-bottom-color: rgb(198, 12, 48);
 }
 
 .duet-tab-variation-checked .duet-tab-button {
@@ -210,14 +226,14 @@
   width: 200px;
   min-width: 200px;
   padding: 16px;
-  border-color: #cfd2d4;
-  border-bottom-color: #0077b3;
+  border-color: rgb(207, 210, 212);
+  border-bottom-color: rgb(0, 119, 179);
   border-radius: 4px 4px 0 0;
   transition: none;
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button {
-  border-color: #cfd2d4;
-  border-bottom-color: #444445;
+  border-color: rgb(207, 210, 212);
+  border-bottom-color: rgb(68, 68, 69);
 }
 
 @media (min-width: 36em) {
@@ -239,15 +255,15 @@
   transition: none;
 }
 .duet-tab-variation-checked .duet-tab-button.selected {
-  color: #0077b3;
-  background: linear-gradient(180deg, #f3f9fc 0%, white 100%);
-  border-color: #0077b3;
+  color: rgb(0, 119, 179);
+  background: linear-gradient(180deg, rgb(243, 249, 252) 0%, rgb(255, 255, 255) 100%);
+  border-color: rgb(0, 119, 179);
   border-bottom-color: #fff;
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button.selected {
-  color: #171c3a;
-  background: linear-gradient(180deg, #f5f5f7 0%, white 100%);
-  border-color: #444445;
+  color: rgb(23, 28, 58);
+  background: linear-gradient(180deg, rgb(245, 245, 247) 0%, rgb(255, 255, 255) 100%);
+  border-color: rgb(68, 68, 69);
   border-bottom-color: #fff;
 }
 
@@ -282,17 +298,17 @@
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
   margin-top: 4px;
   font-weight: 400;
-  color: #657787;
+  color: rgb(101, 119, 135);
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption {
-  color: #444445;
+  color: rgb(68, 68, 69);
 }
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
-  color: #0077b3;
+  color: rgb(0, 119, 179);
 }
 .duet-theme-turva.duet-tab-variation-checked .duet-tab-button .checked-tab-content .checked-tab-description .tab-caption.selected {
-  color: #444445;
+  color: rgb(68, 68, 69);
 }
 
 .duet-tab-variation-checked .duet-tab-button .checked-tab-content .stackable-checkmark {
@@ -311,7 +327,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   text-align: left;
 }
 .duet-tab-group-content.checked-group-content {
@@ -324,12 +340,12 @@
   width: 100%;
   height: 2px;
   content: " ";
-  background-color: #0077b3;
+  background-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-tab-group-content {
   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-theme-turva .duet-tab-group-content.checked-group-content::after {
-  background-color: #444445;
+  background-color: rgb(68, 68, 69);
 }

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

@@ -31,9 +31,13 @@ export class DuetTabGroup {
       }
     };
     this.scrollToActive = () => {
-      const active = this.tabsContainer.querySelector(".selected");
-      if (active) {
-        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+      if (this.variation === "checked" || this.variation === "plain-scrolling") {
+        setTimeout(() => {
+          const active = this.tabsContainer.querySelector(".selected");
+          if (active) {
+            active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+          }
+        }, 50);
       }
     };
     this.renderTab = () => {
@@ -98,11 +102,7 @@ export class DuetTabGroup {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    if (this.variation === "checked") {
-      setTimeout(() => {
-        this.scrollToActive();
-      }, 50);
-    }
+    this.scrollToActive();
   }
   /**
    * This method allows you to open any of the tabs by calling the method and
@@ -116,11 +116,7 @@ export class DuetTabGroup {
     this.tabs.forEach((tab, i) => {
       tab.selected = i === tabIndex;
     });
-    if (this.variation === "checked") {
-      setTimeout(() => {
-        this.scrollToActive();
-      }, 50);
-    }
+    this.scrollToActive();
     const event = {
       value: tabIndex,
       component: "duet-tab-group",
@@ -174,18 +170,21 @@ export class DuetTabGroup {
    * Always the last one in the class.
    */
   render() {
+    const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
+    const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
     return (h("div", { class: {
         "duet-tab-group": true,
         "duet-theme-turva": this.theme === "turva",
-        [`duet-tab-variation-${this.variation}`]: true,
+        [variationClass]: true,
+        "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
         "duet-tab-group-scrolls": this.scrolls,
         "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel }, this.variation !== "checked" && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+      }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
         return { label: tab.label, value: index.toString() };
       }) })), h("div", { role: "tablist", class: {
         "duet-m-0": this.margin === "none" || this.variation === "checked",
         "duet-tab-group-tabs": true,
-        "duet-tab-group-hidden": this.tabs.length > 3 && this.variation !== "checked",
+        "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
         "duet-tab-group-collapses": this.collapses,
       }, ref: el => {
         this.tabsContainer = el;
@@ -291,10 +290,11 @@ export class DuetTabGroup {
         "mutable": false,
         "complexType": {
           "original": "DuetTabVariation",
-          "resolved": "\"checked\" | \"default\" | \"plain\"",
+          "resolved": "\"checked\" | \"default\" | \"plain\" | \"plain-scrolling\"",
           "references": {
             "DuetTabVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         },
@@ -511,7 +511,8 @@ export class DuetTabGroup {
           "resolved": "{ component: \"duet-tab-group\"; value: number; }",
           "references": {
             "DuetTabGroupEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -530,7 +531,8 @@ export class DuetTabGroup {
           "resolved": "{ component: \"duet-tab-group\"; value: number; }",
           "references": {
             "DuetTabGroupEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -550,7 +552,8 @@ export class DuetTabGroup {
               "location": "global"
             },
             "DuetTabGroupEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           },
           "return": "Promise<void>"