@duetds/components 6.7.0 → 6.8.0

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 {
@@ -77,10 +75,8 @@
   overflow-x: scroll;
   scroll-behavior: smooth;
   /* 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-plain-scrolling .duet-tab-group-tabs::-webkit-scrollbar {
@@ -113,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;
 }
@@ -130,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;
@@ -141,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;
@@ -158,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;
@@ -205,6 +201,7 @@
   width: auto;
   padding-right: 0;
   padding-left: 0;
+  margin-left: 0;
   border: 0;
   border-radius: 0;
   transition: none;
@@ -213,13 +210,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 {
@@ -230,14 +227,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) {
@@ -259,15 +256,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;
 }
 
@@ -302,17 +299,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 {
@@ -331,7 +328,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 {
@@ -344,12 +341,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

@@ -293,7 +293,8 @@ export class DuetTabGroup {
           "resolved": "\"checked\" | \"default\" | \"plain\" | \"plain-scrolling\"",
           "references": {
             "DuetTabVariation": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         },
@@ -510,7 +511,8 @@ export class DuetTabGroup {
           "resolved": "{ component: \"duet-tab-group\"; value: number; }",
           "references": {
             "DuetTabGroupEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -529,7 +531,8 @@ export class DuetTabGroup {
           "resolved": "{ component: \"duet-tab-group\"; value: number; }",
           "references": {
             "DuetTabGroupEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           }
         }
@@ -549,7 +552,8 @@ export class DuetTabGroup {
               "location": "global"
             },
             "DuetTabGroupEvent": {
-              "location": "local"
+              "location": "local",
+              "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx"
             }
           },
           "return": "Promise<void>"

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

@@ -38,32 +38,43 @@ duet-table table {
   border-spacing: 0;
   border-collapse: separate;
 }
+duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead,
+duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead * {
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
 duet-table.duet-theme-turva table {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 duet-table td {
   -webkit-hyphens: auto;
   hyphens: auto;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 duet-table.duet-theme-turva td {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 duet-table th {
   font-weight: 600;
   line-height: 1.25;
-  color: #657787;
+  color: rgb(101, 119, 135);
   text-align: left;
 }
 duet-table.duet-theme-turva th {
-  color: #747475;
+  color: rgb(116, 116, 117);
 }
 duet-table tbody th {
   font-weight: 600;
-  color: #00294d;
+  color: rgb(0, 41, 77);
 }
 duet-table.duet-theme-turva tbody th {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 duet-table .duet-table-action-row td:last-child {
   justify-self: end;
@@ -105,7 +116,7 @@ duet-table .duet-table-action-row td:last-child {
 .duet-table-flattened tbody th {
   font-weight: 600;
   line-height: 1.25;
-  color: #657787;
+  color: rgb(101, 119, 135);
   text-align: left;
 }
 .duet-table-flattened td[data-heading]::before {
@@ -113,17 +124,17 @@ duet-table .duet-table-action-row td:last-child {
   display: block;
   font-size: 1rem;
   font-weight: 600;
-  color: #00294d;
+  color: rgb(0, 41, 77);
   content: attr(data-heading);
 }
 .duet-table-flattened.duet-theme-turva td[data-heading]::before {
-  color: #171c3a;
+  color: rgb(23, 28, 58);
 }
 
 .duet-table-sticky thead th {
   position: sticky;
   top: 0;
-  background: white;
+  background: rgb(255, 255, 255);
 }
 
 .duet-table-striped td,
@@ -132,18 +143,18 @@ duet-table .duet-table-action-row td:last-child {
 }
 @media (max-width: 35.9375em) {
   .duet-table-striped td,
-.duet-table-striped th {
+  .duet-table-striped th {
     padding: 20px 12px !important;
   }
 }
 .duet-table-striped tbody th {
-  background: white;
+  background: rgb(255, 255, 255);
 }
 .duet-table-striped.duet-table-sticky thead th {
-  border-bottom: 1px solid #e1e3e6;
+  border-bottom: 1px solid rgb(225, 227, 230);
 }
 .duet-table-striped.duet-table-sticky.duet-theme-turva thead th {
-  border-bottom-color: #e4e4e6;
+  border-bottom-color: rgb(228, 228, 230);
 }
 .duet-table-striped tbody:not(:first-of-type) th {
   padding-top: 40px !important;
@@ -161,10 +172,10 @@ duet-table .duet-table-action-row td:last-child {
   background: rgba(23, 28, 58, 0.04);
 }
 .duet-table-striped tfoot td {
-  border-top: 1px solid #e1e3e6;
+  border-top: 1px solid rgb(225, 227, 230);
 }
 .duet-table-striped.duet-theme-turva tfoot td {
-  border-top-color: #e4e4e6;
+  border-top-color: rgb(228, 228, 230);
 }
 .duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th {
   padding-top: 20px !important;
@@ -176,15 +187,15 @@ duet-table .duet-table-action-row td:last-child {
   border-top: 0;
 }
 .duet-table-striped.duet-table-flattened tfoot tr {
-  border-top: 1px solid #e1e3e6;
+  border-top: 1px solid rgb(225, 227, 230);
 }
 .duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
-  border-top-color: #e4e4e6;
+  border-top-color: rgb(228, 228, 230);
 }
 
 .duet-table-fixed th, .duet-table-minimal th, .duet-table-plain th {
   padding: 16px !important;
-  border-bottom: 1px solid #657787;
+  border-bottom: 1px solid rgb(101, 119, 135);
 }
 .duet-table-fixed th:first-child, .duet-table-minimal th:first-child, .duet-table-plain th:first-child {
   padding-left: 0 !important;
@@ -193,14 +204,14 @@ duet-table .duet-table-action-row td:last-child {
   padding-right: 0 !important;
 }
 .duet-theme-turva.duet-table-fixed th, .duet-theme-turva.duet-table-minimal th, .duet-theme-turva.duet-table-plain th {
-  border-bottom-color: #444445;
+  border-bottom-color: rgb(68, 68, 69);
 }
 .duet-table-fixed tbody th, .duet-table-minimal tbody th, .duet-table-plain tbody th {
   padding-top: 40px !important;
-  border-bottom-color: #e1e3e6;
+  border-bottom-color: rgb(225, 227, 230);
 }
 .duet-theme-turva.duet-table-fixed tbody th, .duet-theme-turva.duet-table-minimal tbody th, .duet-theme-turva.duet-table-plain tbody th {
-  border-bottom-color: #e4e4e6;
+  border-bottom-color: rgb(228, 228, 230);
 }
 .duet-table-fixed td, .duet-table-minimal td, .duet-table-plain td {
   padding: 16px !important;
@@ -212,10 +223,10 @@ duet-table .duet-table-action-row td:last-child {
   padding-right: 0 !important;
 }
 .duet-table-fixed tbody td, .duet-table-minimal tbody td, .duet-table-plain tbody td {
-  border-bottom: 1px solid #e1e3e6;
+  border-bottom: 1px solid rgb(225, 227, 230);
 }
 .duet-theme-turva.duet-table-fixed tbody td, .duet-theme-turva.duet-table-minimal tbody td, .duet-theme-turva.duet-table-plain tbody td {
-  border-bottom-color: #e4e4e6;
+  border-bottom-color: rgb(228, 228, 230);
 }
 .duet-table-flattened.duet-table-fixed tbody:first-of-type th, .duet-table-flattened.duet-table-minimal tbody:first-of-type th, .duet-table-flattened.duet-table-plain tbody:first-of-type th {
   padding-top: 0 !important;
@@ -240,10 +251,10 @@ duet-table .duet-table-action-row td:last-child {
 }
 
 .duet-table-plain.duet-table-flattened tbody tr {
-  border-bottom: 1px solid #e1e3e6;
+  border-bottom: 1px solid rgb(225, 227, 230);
 }
 .duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
-  border-bottom-color: #e4e4e6;
+  border-bottom-color: rgb(228, 228, 230);
 }
 
 .duet-table-minimal tbody tr,
@@ -253,7 +264,7 @@ duet-table .duet-table-action-row td:last-child {
 }
 .duet-table-minimal tbody tr:last-of-type,
 .duet-table-minimal tbody tr:last-of-type td {
-  border-bottom: 1px solid #e1e3e6;
+  border-bottom: 1px solid rgb(225, 227, 230);
 }
 .duet-table-minimal.duet-table-flattened tbody tr,
 .duet-table-minimal.duet-table-flattened tbody tr td {
@@ -263,10 +274,10 @@ duet-table .duet-table-action-row td:last-child {
   display: none;
 }
 .duet-table-minimal.duet-table-flattened tfoot {
-  border-top: 1px solid #e1e3e6;
+  border-top: 1px solid rgb(225, 227, 230);
 }
 .duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
-  border-top-color: #e4e4e6;
+  border-top-color: rgb(228, 228, 230);
 }
 
 .duet-table-fixed table {
@@ -287,10 +298,10 @@ duet-table .duet-table-action-row td:last-child {
   border-bottom: 0 none;
 }
 .duet-table-fixed:not(.duet-table-flattened) tfoot {
-  border-top: 1px solid #e1e3e6;
+  border-top: 1px solid rgb(225, 227, 230);
 }
 .duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot {
-  border-top-color: #e4e4e6;
+  border-top-color: rgb(228, 228, 230);
 }
 
 .duet-table-scrollable {
@@ -315,10 +326,10 @@ duet-table .duet-table-action-row td:last-child {
   padding: 20px;
 }
 .duet-table-sortable:not(.duet-table-flattened) tfoot {
-  border-top: 1px solid #e1e3e6;
+  border-top: 1px solid rgb(225, 227, 230);
 }
 .duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot {
-  border-top-color: #e4e4e6;
+  border-top-color: rgb(228, 228, 230);
 }
 
 .duet-table-actions table {

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

@@ -29,6 +29,7 @@ export class DuetTable {
     this.sticky = false;
     this.stickyDistance = "with-links";
     this.breakpoint = "small";
+    this.hideHeadVisually = false;
   }
   connectedCallback() {
     if (Build.isServer) {
@@ -99,6 +100,7 @@ export class DuetTable {
         "duet-table-scrollable": this.breakpoint === "none-scrollable",
         "duet-m-0": this.margin === "none",
         "duet-theme-turva": this.theme === "turva",
+        "duet-table-hide-head-visually": this.hideHeadVisually,
       } }, h("slot", null)));
   }
   static get is() { return "duet-table"; }
@@ -167,7 +169,8 @@ export class DuetTable {
           "resolved": "\"fixed\" | \"plain\" | \"striped\"",
           "references": {
             "DuetTableVariant": {
-              "location": "local"
+              "location": "import",
+              "path": "../../common-types"
             }
           }
         },
@@ -207,7 +210,8 @@ export class DuetTable {
           "resolved": "\"none\" | \"with-links\" | \"without-links\"",
           "references": {
             "DuetTableStickyDistance": {
-              "location": "local"
+              "location": "import",
+              "path": "../../common-types"
             }
           }
         },
@@ -229,7 +233,8 @@ export class DuetTable {
           "resolved": "\"large\" | \"medium\" | \"none\" | \"none-scrollable\" | \"small\" | \"x-large\" | \"xx-large\" | \"xxx-large\"",
           "references": {
             "DuetTableBreakpoint": {
-              "location": "local"
+              "location": "import",
+              "path": "../../common-types"
             }
           }
         },
@@ -242,6 +247,24 @@ export class DuetTable {
         "attribute": "breakpoint",
         "reflect": false,
         "defaultValue": "\"small\""
+      },
+      "hideHeadVisually": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Hide a thead section visually. The content is still available to screen readers."
+        },
+        "attribute": "hide-head-visually",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }