@duetds/components 9.1.2 → 9.2.1

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

@@ -37,7 +37,7 @@
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
-  background: rgb(0, 41, 77);
+  background: rgb(8, 42, 77);
 }
 .duet-hero.duet-p-0 {
   padding: 0 !important;
@@ -72,9 +72,9 @@
   }
 }
 .duet-hero.duet-hero-light, .duet-hero.duet-hero-with-image {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background-color: rgb(255, 255, 255);
-  background-image: linear-gradient(rgb(243, 249, 252), #f9fcfe);
+  background-image: linear-gradient(rgb(240, 247, 250), #f8fbfd);
 }
 .duet-hero.duet-hero-light::before, .duet-hero.duet-hero-with-image::before {
   position: absolute;
@@ -84,21 +84,21 @@
   width: 100%;
   height: 400px;
   content: "";
-  background-image: linear-gradient(#f9fcfe, rgb(255, 255, 255));
+  background-image: linear-gradient(#f8fbfd, rgb(255, 255, 255));
 }
 .duet-hero.duet-hero-light.duet-theme-turva, .duet-hero.duet-hero-with-image.duet-theme-turva {
   color: rgb(23, 28, 58);
-  background-image: linear-gradient(rgb(245, 245, 247), #fafafb);
+  background-image: linear-gradient(rgb(245, 247, 250), #fafbfd);
 }
 .duet-hero.duet-hero-light.duet-theme-turva::before, .duet-hero.duet-hero-with-image.duet-theme-turva::before {
-  background-image: linear-gradient(#fafafb, rgb(255, 255, 255));
+  background-image: linear-gradient(#fafbfd, rgb(255, 255, 255));
 }
 .duet-hero.duet-hero-gray {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   background: rgb(245, 248, 250);
 }
 .duet-hero.duet-hero-gray.duet-theme-turva {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
 }
 @media (min-width: 62em) {
   .duet-hero.duet-hero-gray .duet-hero-text {
@@ -787,7 +787,7 @@
 }
 .duet-hero.duet-hero-product .background .brand-shape {
   position: absolute;
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
   border-radius: 25%;
   mix-blend-mode: normal;
   transform: rotate(7deg);
@@ -1639,7 +1639,7 @@ duet-heading + duet-button {
   color: rgb(0, 119, 179);
   text-align: left;
   text-decoration: none;
-  border-bottom: 1px solid rgb(225, 227, 230);
+  border-bottom: 1px solid rgb(212, 223, 229);
   transition: background-color 300ms ease;
 }
 .duet-hero-link:focus {
@@ -1650,11 +1650,11 @@ duet-heading + duet-button {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-hero-link:hover, .duet-hero-link:hover .duet-hero-action-arrow {
-  color: rgb(0, 77, 128) !important;
+  color: rgb(0, 75, 129) !important;
   background: transparent !important;
 }
 .duet-theme-turva .duet-hero-link:hover, .duet-theme-turva .duet-hero-link:hover .duet-hero-action-arrow {
-  color: rgb(148, 9, 37) !important;
+  color: rgb(126, 2, 35) !important;
 }
 .duet-theme-turva .duet-hero-link {
   color: rgb(198, 12, 48);
@@ -1684,7 +1684,7 @@ duet-heading + duet-button {
   }
 }
 .duet-hero-link:first-of-type {
-  border-top: 1px solid rgb(225, 227, 230);
+  border-top: 1px solid rgb(212, 223, 229);
 }
 @media (min-width: 62em) {
   .duet-hero-link:first-of-type {

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

@@ -97,11 +97,11 @@ export class DuetIcon {
             : {};
         const iconStyles = Object.assign({}, iconRotationStyles);
         const shapeStyle = this.shape === "brand-rotated" ? "duet-icon-shape-brand" : `duet-icon-shape-${this.shape}`;
-        return (h(Host, { key: '31c5135f5c8950e7289e947331edfc1f27086274', class: {
+        return (h(Host, { key: '631e32597ca5d5467b1ded0dfdbcf99b0753ec45', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("span", { key: '5cf6bd4d1d466181ee1e7277a043b1c0bb0d46ef', "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { key: '09145d6d218aec69d036298acb83a65489397944', "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
@@ -110,7 +110,7 @@ export class DuetIcon {
                 [shapeStyle]: true,
                 rotated: this.shape === "brand-rotated" && this.theme !== "turva",
                 "duet-icon-not-responsive": !this.responsive,
-            } }, h("span", { key: '3742ad60c14b0f10d67cc2ca1c22b1446ffc6725', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
+            } }, h("span", { key: '146fe5abe1d3bb753386355783025da7c61ce3df', "aria-hidden": "true", class: { "duet-icon-svg": true, rotated: this.shape === "brand-rotated" && this.theme !== "turva" }, "data-name": this.name, innerHTML: this.svgContent, style: iconStyles }))));
     }
     static get is() { return "duet-icon"; }
     static get encapsulation() { return "shadow"; }

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

@@ -91,7 +91,7 @@ duet-caption:not(:last-of-type) {
   height: 20px;
   font-size: 0;
   line-height: normal;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   pointer-events: none;
   transform: translateY(-50%);
 }
@@ -114,7 +114,7 @@ duet-caption:not(:last-of-type) {
   right: -24px;
   min-width: 48px;
   min-height: 48px;
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
 }
 .duet-input-container.has-clear .duet-input-clear-icon button:focus {
   outline: 0;
@@ -144,7 +144,7 @@ duet-caption:not(:last-of-type) {
   right: 24px;
 }
 .duet-input-container.duet-theme-turva.has-clear .duet-input-clear-icon button {
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
 }
 
 .duet-input-label-container {
@@ -175,11 +175,11 @@ duet-caption:not(:last-of-type) {
   font-weight: 400 !important;
   font-variant-numeric: tabular-nums;
   line-height: 1.5 !important;
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   cursor: initial !important;
   background: rgb(255, 255, 255) !important;
   background-clip: initial !important;
-  border: 1px solid rgb(144, 149, 153) !important;
+  border: 1px solid rgb(127, 150, 165) !important;
   border-radius: 4px !important;
   box-shadow: initial !important;
   transition: box-shadow 150ms ease, border 150ms ease !important;
@@ -203,16 +203,16 @@ duet-caption:not(:last-of-type) {
   padding-left: 8px !important;
 }
 .has-error .duet-input {
-  border-color: rgb(222, 35, 98) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .has-error .duet-input + .duet-input-icon {
-  color: rgb(222, 35, 98) !important;
+  color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-input {
-  border-color: rgb(224, 42, 13) !important;
+  border-color: rgb(214, 28, 82) !important;
 }
 .duet-theme-turva.has-error .duet-input + .duet-input-icon {
-  color: rgb(224, 42, 13) !important;
+  color: rgb(214, 28, 82) !important;
 }
 .has-icon .duet-input {
   padding-right: 48px !important;
@@ -220,7 +220,7 @@ duet-caption:not(:last-of-type) {
 .duet-theme-turva .duet-input {
   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) !important;
-  border-color: rgb(116, 116, 117) !important;
+  border-color: rgb(143, 147, 158) !important;
 }
 .duet-input.align-right {
   text-align: right;
@@ -232,57 +232,57 @@ duet-caption:not(:last-of-type) {
   display: none !important;
 }
 .duet-input::-webkit-input-placeholder {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   opacity: 1 !important;
   transition: color 300ms ease;
 }
 .duet-theme-turva .duet-input::-webkit-input-placeholder {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-input:focus::-webkit-input-placeholder {
-  color: rgb(207, 210, 212);
+  color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-input:focus::-webkit-input-placeholder {
-  color: rgb(207, 207, 209);
+  color: rgb(199, 202, 207);
 }
 .duet-input::-moz-placeholder {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   opacity: 1 !important;
 }
 .duet-theme-turva .duet-input::-moz-placeholder {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-input:focus::-moz-placeholder {
-  color: rgb(207, 210, 212);
+  color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-input:focus::-moz-placeholder {
-  color: rgb(207, 207, 209);
+  color: rgb(199, 202, 207);
 }
 .duet-input:-ms-input-placeholder {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
 }
 .duet-theme-turva .duet-input:-ms-input-placeholder {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-input:focus:-ms-input-placeholder {
-  color: rgb(207, 210, 212);
+  color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-input:focus:-ms-input-placeholder {
-  color: rgb(207, 207, 209);
+  color: rgb(199, 202, 207);
 }
 .duet-input[disabled] {
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   cursor: not-allowed !important;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
   box-shadow: none !important;
   opacity: 1 !important;
-  -webkit-text-fill-color: rgb(0, 41, 77) !important;
+  -webkit-text-fill-color: rgb(8, 42, 77) !important;
 }
 .duet-theme-turva .duet-input[disabled] {
   color: rgb(23, 28, 58) !important;
-  background: rgb(245, 245, 247) !important;
-  border-color: rgb(245, 245, 247) !important;
+  background: rgb(245, 247, 250) !important;
+  border-color: rgb(245, 247, 250) !important;
   -webkit-text-fill-color: rgb(23, 28, 58) !important;
 }
 .duet-input:hover:not(:disabled) {
@@ -340,7 +340,7 @@ duet-caption:not(:last-of-type) {
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
   border-radius: 4px;
 }
 .duet-input-help span {
@@ -349,13 +349,13 @@ duet-caption:not(:last-of-type) {
 }
 .duet-theme-turva .duet-input-help {
   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(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .has-error .duet-input-help {
-  color: rgb(222, 35, 98);
+  color: rgb(214, 28, 82);
 }
 .duet-theme-turva.has-error .duet-input-help {
-  color: rgb(224, 42, 13);
+  color: rgb(214, 28, 82);
 }
 
 .duet-label-hidden duet-label {
@@ -412,13 +412,13 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   box-shadow: initial;
   transition: box-shadow 150ms ease, border 150ms ease;
 }
 .duet-theme-turva .duet-input-variation-revealable .duet-input-relative {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-input-variation-revealable .duet-input-relative duet-button {
   z-index: 250;
@@ -433,14 +433,14 @@ duet-caption:not(:last-of-type) {
 }
 .duet-input-variation-revealable.disabled .duet-input-relative {
   background: rgb(245, 248, 250);
-  border-color: rgb(225, 227, 230);
+  border-color: rgb(212, 223, 229);
   box-shadow: none;
 }
 .duet-input-variation-revealable.has-error .duet-input-relative {
-  border-color: rgb(222, 35, 98);
+  border-color: rgb(214, 28, 82);
 }
 .duet-input-variation-revealable.duet-theme-turva.has-error .duet-input-relative {
-  border-color: rgb(224, 42, 13);
+  border-color: rgb(214, 28, 82);
 }
 .duet-input-variation-revealable.has-focus .duet-input-relative {
   border-color: rgb(0, 119, 179);
@@ -471,17 +471,19 @@ duet-caption:not(:last-of-type) {
   align-items: center;
   justify-content: flex-start;
   width: auto;
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   box-shadow: initial;
   transition: box-shadow 150ms ease, border 150ms ease;
 }
 .duet-theme-turva .duet-input-container.has-chips .duet-input-relative {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .duet-input-container.has-chips .duet-input-relative .duet-input {
   flex-basis: 4rem;
   flex-grow: 1;
+  padding-left: 0 !important;
+  margin-left: 12px !important;
   border-width: 0 !important;
 }
 .duet-input-container.has-chips .duet-input-relative .duet-input:focus, .duet-input-container.has-chips .duet-input-relative .duet-input:hover {

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

@@ -7,8 +7,8 @@ import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
-import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
+import { isArrowLeftKey, isArrowRightKey, isBackspaceKey, isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
+import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { checkNamedSlotElement } from "../../utils/slot-utils";
 const icons = {
     search: searchIcon,
@@ -27,6 +27,7 @@ export class DuetInput {
         this.labelId = createID("DuetLabel");
         this.topCaptionId = createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
+        this.chipCountId = createID("DuetInputChipCount");
         this.errorId = createID("DuetError");
         this.disallowPatternRegex = null;
         this.clearLabel = {
@@ -59,6 +60,11 @@ export class DuetInput {
             fi: "Salasana on piilotettu",
             sv: "Lösenordet är dolt",
         };
+        this.chipsSelectedDesriptionLabel = {
+            en: "selected",
+            fi: "valittu",
+            sv: "valt",
+        };
         /**
          * Component event handling.
          */
@@ -66,6 +72,9 @@ export class DuetInput {
             if (this.disallowPatternRegex) {
                 cleanValue(this.nativeInput, this.disallowPatternRegex);
             }
+            if (this.chips) {
+                this.clearChipSelection();
+            }
             this.value = this.nativeInput.value || "";
             this.duetInput.emit({
                 originalEvent: ev,
@@ -89,6 +98,7 @@ export class DuetInput {
             });
         };
         this.onFocus = (ev) => {
+            this.clearChipSelection();
             this.isFocused = true;
             this.duetFocus.emit({
                 originalEvent: ev,
@@ -106,7 +116,7 @@ export class DuetInput {
         /**
          * Private functions
          */
-        this.getDescribedBy = () => {
+        this.getAriaDescribedBy = () => {
             const describedBy = [];
             if (this.isCaptionVisible && this.topCaptionId) {
                 describedBy.push(this.topCaptionId);
@@ -114,17 +124,24 @@ export class DuetInput {
             if (this.accessibleDescribedBy) {
                 describedBy.push(this.accessibleDescribedBy);
             }
+            if (this.chips) {
+                const currentChips = this.getAllChips();
+                if (currentChips.length) {
+                    describedBy.push(this.chipCountId);
+                    currentChips.forEach(chip => describedBy.push(chip.id));
+                }
+            }
             if (this.error) {
                 describedBy.push(this.errorId);
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.handleClearClick = event => {
+        this.handleClearClick = (event) => {
             const clearing = this.clearInput();
             this.onClear(event);
             return clearing;
         };
-        this.keyHandler = event => {
+        this.keyHandler = (event) => {
             if (isEscapeKey(event) && this.clear) {
                 this.handleClearClick(event);
             }
@@ -136,6 +153,21 @@ export class DuetInput {
                     this.isPasswordRevealed = false;
                 }
             }
+            if (this.chips && this.nativeInput.value.length === 0) {
+                if (isBackspaceKey(event)) {
+                    if (this.isChipSelected()) {
+                        this.getSelectedChip().removeChip();
+                        setTimeout(() => this.selectLastChip());
+                    }
+                    this.selectLastChip();
+                }
+                if (isArrowLeftKey(event)) {
+                    this.selectChipToLeft();
+                }
+                if (isArrowRightKey(event) && this.isChipSelected()) {
+                    this.selectChipToRight();
+                }
+            }
             return event;
         };
         this.togglePasswordRevealed = () => {
@@ -276,6 +308,62 @@ export class DuetInput {
     getAllChips() {
         return Array.from(this.element.querySelectorAll(".duet-input-relative duet-chip"));
     }
+    isChipSelected() {
+        return this.getAllChips().some(chip => chip.selected);
+    }
+    getSelectedChip() {
+        return this.getAllChips().find(chip => chip.selected);
+    }
+    clearChipSelection() {
+        const chips = this.getAllChips();
+        chips.forEach(chip => (chip.selected = false));
+    }
+    /**
+     * If input has chips set the last, rightmost chip as selected
+     */
+    selectLastChip() {
+        const chips = this.getAllChips();
+        if (chips.length) {
+            chips.forEach(chip => (chip.selected = false));
+            chips.at(-1).selected = true;
+        }
+    }
+    /**
+     * If input has chips. and one is selected, set the chip next to the left as selected.
+     * If none was selected before, select the last, rightmost chip.
+     * If the first, leftmost chip was selected before, do nothing.
+     */
+    selectChipToLeft() {
+        const chips = this.getAllChips();
+        const selectedIndex = chips.findIndex(chip => chip.selected);
+        if (chips.length) {
+            chips.forEach(chip => (chip.selected = false));
+            if (selectedIndex === -1) {
+                chips.at(-1).selected = true;
+            }
+            else if (selectedIndex === 0) {
+                chips[0].selected = true;
+            }
+            else {
+                chips[selectedIndex - 1].selected = true;
+            }
+        }
+    }
+    /**
+     * If input has chips. and one is selected, set the chip next to the right as selected.
+     * If none was selected before, do nothing.
+     * If the last, rightmost chip was selected before, unselect it.
+     */
+    selectChipToRight() {
+        const chips = this.getAllChips();
+        const selectedIndex = chips.findIndex(chip => chip.selected);
+        if (chips.length) {
+            chips.forEach(chip => (chip.selected = false));
+            if (selectedIndex > -1 && selectedIndex < chips.length - 1) {
+                chips[selectedIndex + 1].selected = true;
+            }
+        }
+    }
     /**
      * @internal
      * Add a chip to the input
@@ -283,6 +371,7 @@ export class DuetInput {
     async addChip(chip) {
         const container = this.element.querySelector(".duet-input-relative");
         const input = container.querySelector("input:not(duet-chip input)");
+        chip.id = createID("DuetInputChip");
         container.insertBefore(chip, input);
     }
     /**
@@ -356,7 +445,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), this.chips && (h("duet-visually-hidden", { id: this.chipCountId }, ", ", `${this.getAllChips().length} ${getLocaleString(this.chipsSelectedDesriptionLabel)}`, ",")), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",
@@ -364,7 +453,7 @@ export class DuetInput {
                 "after-chip": this.getAllChips().length > 0,
                 "align-right": this.inputAlign === "right",
                 [`input-padding-${this.inputPadding}`]: true,
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.type === "password" ? "off" : this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)), !this.value && hasInputIcon && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))), this.clear && this.value && (h("div", { class: {
                 "duet-input-clear-icon": true,
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,

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

@@ -60,7 +60,7 @@ label {
   font-size: 1rem;
   font-weight: 600 !important;
   line-height: 1.25;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
   word-break: break-word;
 }

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

@@ -87,10 +87,33 @@
   height: auto;
 }
 
+.duet-layout-wrapper {
+  display: block;
+  margin: 48px 0 36px;
+  overflow-x: clip;
+}
+@media (min-width: 36em) {
+  .duet-layout-wrapper {
+    margin-top: 72px;
+  }
+}
+@media (min-width: 62em) {
+  .duet-layout-wrapper {
+    margin-bottom: 48px;
+  }
+}
+.duet-layout-wrapper.duet-m-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.duet-layout-wrapper > * {
+  width: 100%;
+}
+
 .duet-layout {
   position: relative;
   padding: 0 16px;
-  margin: 48px auto 36px;
+  margin: 0 auto;
 }
 @media (max-width: 20.5em) {
   .duet-layout.padding-xxx-small {
@@ -137,18 +160,6 @@
     padding: 0;
   }
 }
-@media (min-width: 36em) {
-  .duet-layout {
-    margin-top: 72px;
-  }
-}
-.duet-layout.duet-layout-has-top {
-  margin-top: 0;
-}
-.duet-layout.duet-m-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
 .duet-layout.duet-center {
   display: flex;
   align-items: center;
@@ -181,7 +192,6 @@
     display: flex;
     flex-direction: row;
     padding: 0 56px;
-    margin-bottom: 48px;
   }
 }
 @media (min-width: 76.25em) {
@@ -203,11 +213,6 @@
   position: relative;
   display: block;
   width: 100%;
-  margin: 72px auto 0;
-}
-.duet-layout-top.duet-m-0 {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
 }
 .duet-layout-top .duet-layout-top-wrapper {
   padding: 0 20px;

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

@@ -47,23 +47,20 @@ export class DuetLayout {
                 center: this.center,
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, this.hasTop && (h("div", { key: '97f256b275cea1d8303d3c2b2fafcbc83ab17227', class: {
+            } }, h("div", { key: '0db8d45f16f7bec516c0b831393cb05f962bfdb8', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, this.hasTop && (h("div", { key: 'b65a92ce153b41318cb757b3457dfc470c11c4c6', class: {
                 "duet-layout-top": true,
-                "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
-            } }, h("div", { key: 'e08dfb887503e2db0e2d315bce69c4243ca0a368', class: "duet-layout-top-wrapper" }, h("slot", { key: 'a0a214dab158a6228b6d8e69a4ae77b51dc3da68', name: "top" })))), h("div", { key: '37a6738ab3a9695408026c8d83bbc1dbeb17490e', class: {
+            } }, h("div", { key: '777fc5b75ff85428b7234d94739f7471f5dc8011', class: "duet-layout-top-wrapper" }, h("slot", { key: '513fa6d80b00980efc02c454889726f24b3af6a9', name: "top" })))), h("div", { key: '8d24cdd9f0a38cadf71cf74df0f44c547a9fb4f3', class: {
                 "duet-layout": true,
-                "duet-layout-has-top": this.hasTop,
                 "has-sidebar": this.hasSidebar,
-                "duet-m-0": this.margin === "none",
                 "duet-center": this.center,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("main", { key: '9250e251d618850e3ca2a16c7e15f0d921b1cc0f', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '6bd2301fc4f57c18bab92ce7278ec037f38971d4', name: "page-heading" }), h("slot", { key: 'd37514f4cc602e46ecbc78e87647076c9e550c94', name: "main" })), this.hasSidebar && (h("aside", { key: '6ad7bd59e98bfe3123a1cccce343fb0f158387e0', class: "duet-sidebar" }, h("div", { key: '6476ae186902b93bac02f5512c33ca2419202d8a', class: {
+            } }, h("main", { key: 'e98b4d6704819e6a07f5ccc7b29227d6623e2bc2', class: "duet-main" }, this.hasPageHeading && h("slot", { key: '642f458827bfce2732c708d5cff00b382180a202', name: "page-heading" }), h("slot", { key: '929847b72cf01ed5be66b9fdc6e0e204281d0eab', name: "main" })), this.hasSidebar && (h("aside", { key: '9cf127c89c37b47642d7d3234476c16d5c38fd11', class: "duet-sidebar" }, h("div", { key: '043863761695cf57b596ab6759e99ae32e09f432', class: {
                 "duet-sidebar-container": true,
                 "has-tabs": this.tabs,
                 sticky: this.sticky,
                 [this.stickyDistance]: this.sticky,
-            } }, h("slot", { key: '4406fe27dbd20dd18448aa76800be82b3333c306', name: "sidebar" })))))));
+            } }, h("slot", { key: '772f164951137306ec8289a095a829fd2fc0a87b', name: "sidebar" }))))))));
     }
     static get is() { return "duet-layout"; }
     static get encapsulation() { return "shadow"; }