@duetds/components 9.16.1 → 9.18.0

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() {
@@ -64,10 +65,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);
@@ -100,7 +102,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);
@@ -123,16 +127,16 @@ export class DuetCollapsible {
      * Always the last one in the class.
      */
     render() {
-        const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
-        return (h(Host, { key: '7d31031b7dadd4155d8a3458ec08c93c7e3cf3c5', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: 'f00b09d4646d2a5c86761675c6e46d49af9319cc' }, h("button", { key: 'a53704d19ce0908a29670199215c180996ecc898', class: {
+        const HeadingTagName = this.headingLevel && !this.hasHeadingSlot ? sanitizeString(this.headingLevel) : "div";
+        return (h(Host, { key: '491c8d50564fe200f63bce1926984df56d988340', class: { "duet-m-0": this.margin === "none", negative: this.negative } }, h(HeadingTagName, { key: '5b4014c7cd9911d38bb99f5552107244afb856b1' }, h("button", { key: 'a24f83bd274bd9b20ba6132da1a7a2859103eba6', 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: 'ce43b1e2dabc8910ecc4ed8484d45dca91ff4580', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '0b6b1110c4d5a265f67cd22849f3d264bab78849', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '26bc88a57fb37575d307c750fb956761f1dc4d23', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '380054a26a1ad98a8db9e5b87b1fb5e02f40d3a1', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading), this.hasAfterHeading && (h("div", { key: 'c1a4f4b35f20b0c6206ad22ec0789fd9fe73f0ca', part: "duet-collapsible-after-heading" }, h("slot", { key: '5d4b47626ddaba28522b080d60efd6e19d72dd57', name: "after-heading" })))), this.caption && (h("div", { key: '3fe2e63e633411be26b8f9382420922b864a09fb', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'c6e38e01e467852441c075013df51aa4e44c89a3', size: "small", margin: "none" }, this.caption))))), h("div", { key: '6dd09c8172dda9a8819f5e41d5cf84431f748bd1', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '2377257e231c64d5d8a9719d0527cd618d68c80d' }))));
+            }, 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: 'b748199f0715c1236573441ac601a174a104a89c', class: "duet-collapsible-heading-wrapper" }, h("div", { key: '5abc89da39733fcf24605f919971b87053f2c3b5', class: "duet-collapsible-heading-icon" }, h("duet-icon", { key: '4ad7a599fcf2198838b85fe531ab32eae005c235', margin: "none", size: this.getEquivalentIconSize(), icon: icon.svg })), h("div", { key: '19b333d50cf04db0aefffd763ecdbfd487884069', class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.hasAfterHeadingSlot && (h("div", { key: '0bccd472b3eb373b2a2d725e4c40aa8ee2705706', part: "duet-collapsible-after-heading" }, h("slot", { key: '39f90f69cd933d6f7d7657e593126a01589f63b7', name: "after-heading" })))), this.caption && (h("div", { key: '5fc18d8f1e8010c368d49770ed89371ed2e09457', class: "duet-collapsible-heading-caption" }, h("duet-caption", { key: 'd83d5d514cd020a7f97b0e19d0afe7e61b500582', size: "small", margin: "none" }, this.caption))))), h("div", { key: 'd9687fa0fb07e389ea350ec3448f935d3fc8e332', id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h("slot", { key: '423d7640d82b84912f65637ff6f9d490502373a6' }))));
     }
     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

@@ -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-right: 16px !important;
   margin-bottom: 12px !important;
   position: relative;
@@ -27,8 +27,8 @@
   width: 100%;
   min-width: calc(33.333% - 8px);
   max-width: 100%;
-  text-align: left;
   vertical-align: top;
+  text-align: left;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
@@ -96,10 +96,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;
@@ -125,13 +127,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 {
@@ -146,12 +154,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 {
@@ -166,16 +174,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 {
@@ -208,24 +216,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;
   }
 }
 
@@ -249,9 +257,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;
@@ -274,9 +282,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;
@@ -305,54 +313,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 {
@@ -409,10 +423,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 {
@@ -465,11 +481,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 {
@@ -486,40 +502,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;
@@ -527,8 +544,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-date-picker/duet-date-picker.js

@@ -711,7 +711,7 @@ export class DuetDatePicker {
                 "getter": false,
                 "setter": false,
                 "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "disableBuiltInErrors": {

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 {