npm - @duetds/components - Versions diffs - 10.0.0-alpha.29 → 10.0.0-alpha.30 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (472) hide show

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.css CHANGED Viewed

@@ -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;
   height: 100%;
 }
@@ -37,22 +37,19 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-toolbar-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
-.duet-toolbar-item:focus.primary {
-  box-shadow: 0 0 0 4px rgba(8, 42, 77, 0.3), 0 0 0 1px #033866;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-item:focus.primary, .duet-toolbar-item:focus.primary.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-item .duet-toolbar-icon {
   position: relative;
@@ -79,6 +76,11 @@
 .duet-toolbar-item.primary, .duet-toolbar-item.secondary {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-item.primary:focus, .duet-toolbar-item.secondary:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-item.primary[aria-expanded=true], .duet-toolbar-item.secondary[aria-expanded=true] {
   background: rgba(8, 42, 77, 0.2);
 }
@@ -151,8 +153,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-item.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -178,25 +180,25 @@ duet-indicator:has(+ .duet-toolbar-item .duet-toolbar-icon) {
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:not(.primary) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva.primary[aria-expanded=true] {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover {
-  background: #fdf7f2;
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover:not(.primary) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.duet-theme-turva:hover.primary {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva:not(.primary) {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-item.active.duet-theme-turva.primary {
   background: rgba(23, 42, 59, 0.2);

package/lib/collection/components/duet-toolbar-link/duet-toolbar-link.css CHANGED Viewed

@@ -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;
   height: 100%;
 }
@@ -37,19 +37,27 @@
   line-height: 1.25;
   color: rgb(0, 75, 129);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-toolbar-link: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: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-toolbar-link:focus, .duet-toolbar-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-toolbar-link.negative {
   color: rgb(255, 255, 255);
 }
+.duet-toolbar-link.negative:focus {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-toolbar-link.negative duet-icon {
   color: rgb(198, 225, 238);
 }
@@ -100,8 +108,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(1px);
+  transition: 300ms ease;
 }
 .duet-toolbar-link.active::after.duet-theme-turva {
   background: rgb(198, 12, 48);
@@ -118,21 +126,21 @@
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
   background: transparent;
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover {
-  color: #172a3b;
-  background: #fdf7f2;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.duet-theme-turva:hover.negative {
   background: rgba(23, 42, 59, 0.2);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-toolbar-link.active.negative {
   background: rgba(23, 42, 59, 0.2);

package/lib/collection/components/duet-tooltip/duet-tooltip-button.css CHANGED Viewed

@@ -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;
 }
 .duet-tooltip-button {
@@ -38,6 +38,17 @@
   background: transparent !important;
   border-radius: 4px;
 }
+.duet-tooltip-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tooltip-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 .duet-tooltip-button.duet-theme-turva {
   color: rgb(198, 12, 48);
 }
@@ -53,16 +64,8 @@
 .duet-tooltip-button:hover.duet-tooltip-button-negative {
   color: rgb(255, 255, 255);
 }
-.duet-tooltip-button:focus {
+.duet-tooltip-button:focus, :host(.user-is-tabbing) .duet-tooltip-button:focus {
   background: transparent !important;
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tooltip-button:focus {
-  background: transparent !important;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
-}
-:host(.user-is-tabbing) .duet-tooltip-button.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
 .duet-tooltip-button svg {
   width: 20px;
@@ -84,17 +87,17 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.25;
+  vertical-align: top;
   text-align: left;
   white-space: normal;
-  vertical-align: top;
 }
 .duet-theme-turva .duet-tooltip-label {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 :host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-tooltip-button.duet-theme-turva:hover {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.css CHANGED Viewed

@@ -4,28 +4,29 @@
   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: absolute;
   z-index: 950;
 }
 .duet-tooltip {
   position: relative;
+  visibility: hidden;
   width: 282px;
   min-height: 48px;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -33,14 +34,13 @@
   font-weight: 400;
   line-height: 1.25;
   color: rgb(8, 42, 77);
-  visibility: hidden;
   background: rgb(255, 255, 255);
   border: 1px solid rgb(212, 223, 229);
   border-radius: 4px;
   box-shadow: 0 2px 10px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
-  transition: 300ms ease;
   transform-origin: 100% 100%;
+  transition: 300ms ease;
 }
 .duet-tooltip.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";
@@ -133,13 +133,15 @@
   -webkit-overflow-scrolling: touch;
 }
 .duet-tooltip-content-area:focus {
-  outline: none;
+  outline: 0;
 }
 :host(.user-is-tabbing) .duet-tooltip-content-area:focus {
-  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);
 }
-:host(.user-is-tabbing) .duet-theme-turva .duet-tooltip-content-area: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) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tooltip-content-area:focus, :host(.user-is-tabbing) .duet-tooltip-content-area:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tooltip-content-area::-webkit-scrollbar {
   width: 4px;
@@ -169,42 +171,47 @@
   margin: 0 !important;
   line-height: normal;
   color: rgb(8, 42, 77);
+  -webkit-appearance: none;
+  appearance: none;
   cursor: pointer;
   background: rgb(245, 248, 250);
   border-radius: 50%;
-  -webkit-appearance: none;
-  appearance: none;
 }
 .duet-tooltip-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-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva, .duet-theme-turva2 .duet-tooltip-close:focus, .duet-tooltip-close:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
-.duet-theme-turva .duet-tooltip-close:focus {
+.duet-theme-turva .duet-tooltip-close {
   color: rgb(23, 28, 58);
-  box-shadow: 0 0 0 2px #171c3a !important;
 }
 :host(.duet-theme-turva2) .duet-tooltip {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip.duet-theme-turva {
-  color: #172a3b;
-  border-color: #d4dde2;
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.top::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-start::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.top-end::before {
-  border-top: 11px solid #d4dde2;
+  border-top: 11px solid rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-start::before,
 :host(.duet-theme-turva2) .duet-tooltip .arrow-container.bottom-end::before {
-  border-bottom: 11px solid #d4dde2;
+  border-bottom: 11px solid rgb(212, 221, 226);
 }
 :host(.duet-theme-turva2) .duet-tooltip-content-area::-webkit-scrollbar-thumb {
-  background: #d4dde2;
+  background: rgb(212, 221, 226);
 }
-:host(.duet-theme-turva2) .duet-tooltip-close:focus {
-  color: #172a3b;
+:host(.duet-theme-turva2) .duet-tooltip-close {
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-tooltip/duet-tooltip-popup.js CHANGED Viewed

@@ -57,7 +57,10 @@ export class DuetTooltipPopup {
                 "duet-tooltip": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-tooltip-active": this.active === true,
-            } }, h(FocusGuard, { key: '428ef9ad1157017747e93d3b0f6b45e6dd4d8854', moveFocusTo: this.buttonEl }), h("div", { key: '28ce9b1d024d91bab1ac7af6db333d1d1775e908', ref: element => (this.contentEl = element), class: "duet-tooltip-content-area", tabindex: -1, id: this.tooltipId }, h("slot", { key: '56d9eda1be312a281c52a61b6b84c2305b9ce1a2' })), h("div", { key: '9d066d667b47bb9df4e9381c1a197bbcd77ce2c7', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '6c538ccbe0b07edb774ba32eea5469c00711acc4', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: 'd91f29b8ca30a2d47ba8076e225df778d9edd44b', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: 'a8a7db77b6704d554dec98260e2ea01010d01769', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '854e0be682bc2a61ffa1ae6e2ac1355225184f7b' }, this.accessibleCloseLabel)), h(FocusGuard, { key: '185c9ca3637fce42ff0d5c6f3c4e4bf6656218d1', moveFocusTo: this.contentEl }))));
+            } }, h(FocusGuard, { key: '428ef9ad1157017747e93d3b0f6b45e6dd4d8854', moveFocusTo: this.buttonEl }), h("div", { key: 'cf4af07ba0054be6658c5724c7552854b3471472', ref: element => (this.contentEl = element), class: {
+                "duet-tooltip-content-area": true,
+                "duet-theme-turva": this.theme === "turva",
+            }, tabindex: -1, id: this.tooltipId }, h("slot", { key: '3d21605221e8f16c59a2a62790dfce1a9cd15ea5' })), h("div", { key: 'e2e7ae6376f8dd497ef19ff673f22b699f8a55e6', ref: element => (this.arrowEl = element), class: { arrow: true, [this.placement]: true }, style: this.arrowStyles }, h("div", { key: '0bd6b8b42c5e1b2b6eaf89c19a5ad2a968f3e541', class: { "arrow-container": true, [this.placement]: true } })), h("button", { key: '1b7be53d18b09050af7fc192f65c2e9e01ec62a8', type: "button", class: "duet-tooltip-close", onClick: this.handleCloseClick, ref: el => (this.buttonEl = el) }, h("duet-icon", { key: '91636953a64d83fc88e888dab06b1ca482f47dd4', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xxx-small" }), h("duet-visually-hidden", { key: '487a4c4b37a1891f07f203bb5cf22f8dc999c8e5' }, this.accessibleCloseLabel)), h(FocusGuard, { key: 'cd18c3c009967eca235de7d7d5e9f7208692bb56', moveFocusTo: this.contentEl }))));
     }
     static get is() { return "duet-tooltip-popup"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tooltip/duet-tooltip.css CHANGED Viewed

@@ -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;
   z-index: 200;
   display: inline-flex;
   width: auto;

package/lib/collection/components/duet-tray/duet-tray.css CHANGED Viewed

@@ -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%;
 }
@@ -31,6 +31,7 @@
   left: 0;
   z-index: 399;
   display: flex;
+  visibility: hidden;
   flex-direction: column;
   max-height: calc(100% - 8rem);
   padding: 16px 20px 16px 24px;
@@ -39,13 +40,23 @@
   font-weight: 400;
   line-height: 1.5;
   color: rgb(8, 42, 77);
-  visibility: hidden;
   background: rgb(240, 247, 250);
   border-bottom: 1px solid rgb(212, 223, 229);
   box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07);
   opacity: 0;
-  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
   transform: translateY(-4rem);
+  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms ease;
+}
+.duet-tray:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tray:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tray:focus, :host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tray:focus, :host(.user-is-tabbing) .duet-tray:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
   .duet-tray {
@@ -57,15 +68,6 @@
     padding: 16px 52px 16px 60px;
   }
 }
-.duet-tray:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tray:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-tray.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: rgb(23, 28, 58);
@@ -104,20 +106,20 @@
 .duet-tray-expandable {
   position: relative;
   z-index: 100;
+  visibility: hidden;
   width: calc(100% + 46px);
   max-height: 0;
   overflow-y: auto;
-  visibility: hidden;
+  scrollbar-width: none;
   opacity: 0;
   transition: opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;
-  scrollbar-width: none;
 }
 .duet-tray-expandable::-webkit-scrollbar {
   display: none;
 }
 .duet-tray-expandable.active {
-  max-height: 500px;
   visibility: visible;
+  max-height: 500px;
   opacity: 1;
 }
@@ -145,6 +147,17 @@
   transition: transform 300ms ease;
   -webkit-tap-highlight-color: transparent;
 }
+.duet-tray-button:focus {
+  outline: 0;
+}
+:host(.user-is-tabbing) .duet-tray-button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva :host(.user-is-tabbing) .duet-tray-button:focus, :host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tray-button:focus, :host(.user-is-tabbing) .duet-tray-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 @media (min-width: 62em) {
   .duet-tray-button {
     margin-right: 16px;
@@ -161,28 +174,19 @@
 .duet-tray-button.duet-tray-is-expanded {
   transform: rotate(-180deg);
 }
-.duet-tray-button:focus {
-  outline: 0;
-}
-:host(.user-is-tabbing) .duet-tray-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
-:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-tray-button:active {
   box-shadow: none;
   opacity: 0.75;
 }
 :host(.duet-theme-turva2) .duet-tray.duet-theme-turva {
-  color: #172a3b;
-  background: #fdf7f2;
-  border-color: #fbe1d1;
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+  border-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tray-expandable-content {
-  border-color: #fbe1d1;
+  border-color: rgb(251, 225, 209);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-tray-button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-upload/duet-upload.css CHANGED Viewed

@@ -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;
 }
 ::slotted([slot=header]) {
@@ -42,11 +42,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-upload-item-size {
   font-size: 0.75rem;

package/lib/collection/components/duet-visually-hidden/duet-visually-hidden.css CHANGED Viewed

@@ -2,17 +2,17 @@
   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: 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;
+  clip: rect(1px, 1px, 1px, 1px) !important;
 }

package/lib/collection/utils/slot-utils.js CHANGED Viewed

@@ -15,6 +15,10 @@ export const hasSlot = (element, slotName) => {
         ? getElementsFromNamedSlot(element, slotName).length > 0
         : getElementsFromDefaultSlot(element).length > 0;
 };
+export const getSlotTextContent = (element, slotName, separator) => {
+    const elements = slotName ? getElementsFromNamedSlot(element, slotName) : getElementsFromDefaultSlot(element);
+    return elements.map(e => e.textContent.trim()).join(separator !== null && separator !== void 0 ? separator : ", ");
+};
 /**
  * Check if the slotted element matches the given selector.
  * If not, log a warning, or log a error and remove the element.