@duetds/components 10.0.0-alpha.29 → 10.0.0-alpha.30

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

@@ -4,11 +4,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 ::slotted([slot=after-heading]) {
@@ -19,11 +19,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 16px !important;
   display: block;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -50,10 +50,10 @@
   font-size: 1rem;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.5;
   color: rgb(8, 42, 77);
+  -webkit-hyphens: auto;
+  hyphens: auto;
 }
 @media (max-width: 35.9375em) {
   .duet-collapsible-content {
@@ -82,6 +82,17 @@
   cursor: pointer;
   border-radius: 4px;
 }
+.duet-collapsible-heading:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-collapsible-heading:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-collapsible-heading:focus, :host(.user-is-tabbing) .duet-collapsible-heading:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-collapsible-heading.full-width {
   width: 100%;
 }
@@ -101,6 +112,14 @@
 .duet-collapsible-heading .duet-collapsible-heading-content {
   min-width: 0;
 }
+.duet-collapsible-heading .duet-collapsible-heading-content ::slotted(*) {
+  padding: 0;
+  margin: 0;
+  font-family: inherit !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  color: inherit !important;
+}
 .duet-collapsible-heading.has-after-heading .duet-collapsible-heading-content + div {
   margin-left: 16px;
 }
@@ -120,15 +139,8 @@
   width: inherit;
   margin: inherit;
 }
-.duet-collapsible-heading:focus {
-  outline: 0;
-}
 :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;
-}
-:host(.user-is-tabbing) .duet-collapsible-heading.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 
 .duet-collapsible-heading-icon {
@@ -153,7 +165,7 @@
 }
 
 :host(.duet-theme-turva2) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-collapsible-content.duet-theme-turva,
 :host(.duet-theme-turva2) .duet-collapsible-heading.duet-theme-turva {

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

@@ -7,13 +7,14 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick, subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
+import { checkNamedSlotElement, getSlotTextContent, hasSlot } from "../../utils/slot-utils";
 import { sanitizeString } from "../../utils/string-utils";
 /**
  * @part duet-collapsible-heading-content - piercing selector for styling the heading content
  * @part duet-collapsible-after-heading - piercing selector for styling the after heading
  * @part duet-collapsible-content - piercing selector for styling the content
  * @slot after-heading - Content after the heading can be for example badges.
+ * @slot heading - Instead of using heading property you can also use a native h1..h6 heading. Do not use a duet-heading here.
  */
 export class DuetCollapsible {
     constructor() {
@@ -120,10 +121,11 @@ export class DuetCollapsible {
             if (this.heading) {
                 labelParts.push(this.heading);
             }
-            if (this.hasAfterHeading) {
-                labelParts.push(getElementsFromNamedSlot(this.element, "after-heading")
-                    .map(e => e.textContent.trim())
-                    .join(", "));
+            else if (this.hasHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "heading"));
+            }
+            if (this.hasAfterHeadingSlot) {
+                labelParts.push(getSlotTextContent(this.element, "after-heading"));
             }
             if (this.caption) {
                 labelParts.push(this.caption);
@@ -144,7 +146,9 @@ export class DuetCollapsible {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasAfterHeading = hasSlot(this.element, "after-heading");
+        this.hasAfterHeadingSlot = hasSlot(this.element, "after-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        checkNamedSlotElement(this.element, "heading", "h1, h2, h3, h4, h5, h6");
     }
     connectedCallback() {
         subscribeTabbingChange(this);
@@ -167,16 +171,16 @@ export class DuetCollapsible {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '4c35285a6b1bb57e8a4b9606a6f30df1d17d700d', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '10373d162861548e8bf0e6a6ec48cc9e6feada66' }, h("button", { key: 'f2a7de72d427282d7344fa887eae3ec9d1108598', class: {
+        const HeadingTagName = this.headingLevel && !this.hasHeadingSlot ? sanitizeString(this.headingLevel) : "div";
+        return (h(Host, { key: '9bcf97fc89fd369b94d23c5b831bea13eac20b7d', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '527383f38812e7513a28076931168ef39c03064c' }, h("button", { key: '551c207fbf0854a42586047cf5b268ed2f94f5f8', class: {
                 "duet-collapsible-heading": true,
                 "duet-collapsible-heading-centered": this.centerHeading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-collapsible-normal-weight": this.headingWeight === "normal",
-                "has-after-heading": this.hasAfterHeading,
+                "has-after-heading": this.hasAfterHeadingSlot,
                 "full-width": this.headingFullWidth,
                 "has-caption": !!this.caption,
-            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'c14f682e6f885865d5261150ce734ed7da7ecbca', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '68a1f424f6a8acb4851ec5847b847a39386a9c2d', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '06679c60e3aee0f6c6230ab00d85910cf06073c0', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '2514a96bfde0da2606ebe29e31170408dc4bd004', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: '16129fc66c34f9a107aa21c64c2af5ef4e8345c9', part: "duet-collapsible-after-heading" }, h("slot", { key: '952802b3fad8ea858438be89acd628e758bab39f', name: "after-heading" })))), this.caption && (h("div", { key: '365284fa408a990dc24d00e8701da4ac8b54fac3', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: '31f4325613bd800ad627d614e00705323d9d5049', size: "small", margin: "none" }, this.caption))))), h("div", { key: '3472e80b23745a5deb2a186f8670873ad74628a8', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '09bab3ef3b7b7ee8015e79723f3c28095663883a' }))));
+            }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", ref: button => (this.nativeButton = button), "aria-label": this.getAccessibleLabel(), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '4aad2e89f69b6fed07e44a09c3241613123b3342', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '7abe552666752e707bf9f04110e2d6c583c7e347', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: 'f2a581dd211e3ebd464489804ec1aa3ffa8b2150', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '032bd7dc645014356c7358e9b44f99deb0251720', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: 'e19dbc0d389446ee8896f91a8586ff698ef229ad', part: "duet-collapsible-after-heading" }, h("slot", { key: '63677c9042bfd7ed63e90dee05ee6c272be0e302', name: "after-heading" })))), this.caption && (h("div", { key: 'f7ec83268e2209b3aee51e2b2a6178374142f1aa', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'c019c4f61a1cf0cfb85ad80de67f2f9edf384663', size: "small", margin: "none" }, this.caption))))), h("div", { key: '4e3dcc1b56589d71d04c0a4d8be5b879ae847ad4', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '87eedca46d5d29fb19442138b1aa523f82e1029a' }))));
     }
     static get is() { return "duet-collapsible"; }
     static get encapsulation() { return "shadow"; }

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

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   display: inline-block;
   width: 100%;
@@ -31,8 +31,8 @@
 }
 
 :host(.duet-theme-turva2.duet-theme-turva) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2.duet-theme-turva) a {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   display: block;
 }
@@ -85,5 +85,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-contact-card.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: fixed;
   right: 0;
   bottom: 0;
@@ -43,12 +43,13 @@
 }
 
 :host(.user-is-tabbing:not(.descendant-focused):focus) {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-
-:host(.user-is-tabbing:not(.descendant-focused).duet-theme-turva:focus) {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-cookie-consent {
@@ -94,8 +95,8 @@
 ::slotted(a) {
   font-weight: 600;
   color: rgb(255, 255, 255) !important;
-  text-decoration: underline;
   white-space: nowrap;
+  text-decoration: underline;
 }
 
 ::slotted(a[target=_blank]) {
@@ -105,13 +106,12 @@
 }
 
 ::slotted(a:focus) {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-
-.duet-theme-turva ::slotted(a:focus) {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva, .duet-theme-turva2 ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 :host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva {

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   position: relative;
   z-index: 100;
@@ -72,11 +72,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
@@ -92,19 +92,19 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   position: relative;
   display: inline-flex;
   width: 100%;
   min-width: calc(33.333% - 8px);
   max-width: 100%;
-  text-align: left;
   vertical-align: top;
+  text-align: left;
 }
 @media (min-width: 36em) {
   :host {
@@ -169,10 +169,12 @@
   background: linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%);
 }
 .duet-date-button:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #909599 !important;
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
 }
-.duet-theme-turva .duet-date-button:hover:not(:disabled) {
-  box-shadow: 0 0 0 1px #747475 !important;
+.duet-theme-turva .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva, .duet-theme-turva2 .duet-date-button:hover:not(:disabled), .duet-date-button:hover:not(:disabled).duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-date-button:disabled {
   pointer-events: none;
@@ -198,13 +200,19 @@
 .duet-date-input-has-focus .duet-date-button, .duet-date-button:focus {
   height: 46px;
   color: rgb(0, 119, 179);
-  border-color: transparent;
-  outline: 0;
-  box-shadow: 0 0 0 2px #0077b3 !important;
+}
+.duet-date-input-has-focus .duet-date-button:focus, .duet-date-button:focus:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-date-input-has-focus .duet-date-button:focus, .duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva2, .duet-theme-turva .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva, .duet-theme-turva2 .duet-date-button:focus:focus, .duet-date-button:focus:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva.duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 
 .input-error {
@@ -219,12 +227,12 @@
   left: 0;
   z-index: 900;
   display: flex;
-  width: 100%;
   visibility: hidden;
+  width: 100%;
   opacity: 0;
-  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
   transform: scale(0.96) translateZ(0) translateY(-20px);
   transform-origin: top right;
+  transition: transform 300ms ease, opacity 300ms ease, visibility 300ms ease;
 }
 @media (min-width: 36em) {
   .duet-date-dialog.left {
@@ -239,16 +247,16 @@
     top: 0;
     right: 0;
     bottom: 0;
-    transition: opacity 400ms ease, visibility 400ms ease;
     transform: translateZ(0);
     transform-origin: bottom center;
+    transition: opacity 400ms ease, visibility 400ms ease;
   }
 }
 .duet-date-dialog.active {
   visibility: visible;
   opacity: 1;
-  transition-property: transform, opacity;
   transform: scale(1.0001) translateZ(0) translateY(0);
+  transition-property: transform, opacity;
 }
 @media (min-width: 36em) {
   .duet-date-dialog.error {
@@ -281,24 +289,24 @@
     bottom: 0;
     left: 0;
     z-index: 900;
+    visibility: hidden;
     max-width: none;
     min-height: 25em;
     padding: 0 8% 20px;
     margin: 0;
-    visibility: hidden;
     border: 0;
     border-radius: 0;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     opacity: 0;
-    transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
     transform: translateZ(0) translateY(100%);
+    transition: transform 400ms ease, opacity 400ms ease, visibility 400ms ease;
   }
   .active .duet-date-dialog-wrapper {
     visibility: visible;
     opacity: 1;
-    transition-property: transform, opacity;
     transform: translateZ(0) translateY(0);
+    transition-property: transform, opacity;
   }
 }
 
@@ -322,9 +330,9 @@
   font-size: 0.75rem;
   font-weight: 600;
   line-height: 1.25;
-  text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
+  text-decoration: none;
 }
 .duet-date-table .duet-date-table-cell {
   text-align: center;
@@ -347,9 +355,9 @@
   font-weight: 400;
   font-variant-numeric: tabular-nums;
   line-height: 2.6 !important;
+  vertical-align: initial !important;
   color: rgb(8, 42, 77) !important;
   text-align: center;
-  vertical-align: initial !important;
   cursor: pointer;
   background: transparent !important;
   border-radius: 50% !important;
@@ -378,54 +386,60 @@
 }
 .selected .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
-  background: rgb(0, 119, 179) !important;
   outline: 0;
+  background: rgb(0, 119, 179) !important;
 }
 .duet-theme-turva .selected .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }
 .duet-date-table-button:active {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 200;
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
-  box-shadow: 0 0 5px 0 #0077b3 !important;
+}
+.duet-theme-turva .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva, .duet-theme-turva2 .duet-date-table-button:active, .duet-date-table-button:active.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-theme-turva .duet-date-table-button:active {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
-  box-shadow: 0 0 5px 0 #171c3a !important;
 }
 :focus .duet-date-table-button {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 200;
-  box-shadow: 0 0 5px 0 #0077b3 !important;
 }
-.duet-theme-turva :focus .duet-date-table-button {
-  box-shadow: 0 0 5px 0 #171c3a !important;
+.duet-theme-turva :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva, .duet-theme-turva2 :focus .duet-date-table-button, :focus .duet-date-table-button.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-date-table-button.disabled {
   color: rgb(127, 150, 165) !important;
   cursor: default;
+  outline: none !important;
   background: transparent !important;
-  box-shadow: none !important;
 }
 .duet-theme-turva .duet-date-table-button.disabled {
   color: rgb(143, 147, 158) !important;
+  outline: none !important;
   background: transparent !important;
-  box-shadow: none !important;
 }
 .duet-date-table-button.outside {
   color: rgb(127, 150, 165) !important;
   pointer-events: none;
   cursor: default;
+  outline: none;
   background: rgb(245, 248, 250) !important;
-  box-shadow: none;
   opacity: 0.75;
 }
 .duet-theme-turva .duet-date-table-button.outside {
   color: rgb(143, 147, 158);
+  outline: none;
   background: rgb(245, 247, 250);
-  box-shadow: none;
 }
 
 .duet-date-dialog-header {
@@ -482,10 +496,12 @@
   opacity: 0;
 }
 .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label {
-  box-shadow: 0 0 0 2px #171c3a !important;
+.duet-theme-turva .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva, .duet-theme-turva2 .duet-date-dialog-select select:focus + .duet-date-dialog-select-label, .duet-date-dialog-select select:focus + .duet-date-dialog-select-label.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-date-dialog-mobile-header {
@@ -538,11 +554,11 @@
   height: 24px !important;
   padding: 0 !important;
   color: rgb(8, 42, 77) !important;
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: rgb(245, 248, 250) !important;
   border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
 }
 @media (min-width: 36em) {
   .duet-date-picker-close {
@@ -559,40 +575,41 @@
   background: rgb(245, 247, 250) !important;
 }
 .duet-date-picker-close:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva, .duet-theme-turva2 .duet-date-picker-close:focus, .duet-date-picker-close:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 36em) {
   .duet-date-picker-close:focus {
     opacity: 1;
   }
 }
-.duet-theme-turva .duet-date-picker-close:focus {
-  box-shadow: 0 0 0 2px #171c3a !important;
-}
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-date-input-has-focus :host(.duet-theme-turva2) .duet-theme-turva, :host(.duet-theme-turva2) .duet-theme-turva:focus {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button {
-  color: #172a3b !important;
+  color: rgb(23, 42, 59) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button:hover:not(.disabled) {
-  background: #fbe1d1 !important;
+  background: rgb(251, 225, 209) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.today {
-  background: #fdf7f2 !important;
+  background: rgb(253, 247, 242) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button:active {
   color: rgb(255, 255, 255) !important;
-  background: #e61740 !important;
+  background: rgb(230, 23, 64) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.outside {
-  color: #7891a4 !important;
-  background: #f5f6f7 !important;
+  color: rgb(120, 145, 164) !important;
+  background: rgb(245, 246, 247) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.disabled {
   color: rgb(199, 202, 207) !important;
@@ -600,8 +617,8 @@
 :host(.duet-theme-turva2) .duet-theme-turva [aria-pressed=true] .duet-date-table-button,
 :host(.duet-theme-turva2) .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
-  background: #e61740 !important;
+  background: rgb(230, 23, 64) !important;
 }
 :host(.duet-theme-turva2) .duet-theme-turva.duet-date-table {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }
@@ -51,5 +51,5 @@
 }
 
 :host(.duet-theme-turva2) .duet-divider.duet-theme-turva {
-  background: #d4dde2;
+  background: rgb(212, 221, 226);
 }

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

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-editable-table-actions-menu,