@duetds/components 9.2.0 → 9.2.1

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,
@@ -823,7 +912,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputType"
                         }
                     }
@@ -847,7 +936,7 @@ export class DuetInput {
                     "references": {
                         "DuetVariationType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetVariationType"
                         }
                     }
@@ -1089,7 +1178,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputComponentType": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputComponentType"
                         }
                     }
@@ -1268,7 +1357,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1289,7 +1378,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1310,7 +1399,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1331,7 +1420,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }
@@ -1352,7 +1441,7 @@ export class DuetInput {
                     "references": {
                         "DuetInputEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-input/duet-input.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-input/duet-input.tsx",
                             "id": "src/components/duet-input/duet-input.tsx::DuetInputEvent"
                         }
                     }

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-label/duet-label.js

@@ -101,7 +101,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelMargin": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelMargin"
                         }
                     }
@@ -125,7 +125,7 @@ export class DuetLabel {
                     "references": {
                         "DuetLabelSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-label/duet-label.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-label/duet-label.tsx",
                             "id": "src/components/duet-label/duet-label.tsx::DuetLabelSize"
                         }
                     }

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

@@ -127,7 +127,7 @@ export class DuetLayout {
                     "references": {
                         "DuetLayoutStickyDistance": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-layout/duet-layout.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-layout/duet-layout.tsx",
                             "id": "src/components/duet-layout/duet-layout.tsx::DuetLayoutStickyDistance"
                         }
                     }

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

@@ -46,7 +46,7 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-style: normal;
   font-weight: 400;
-  color: rgb(0, 98, 154);
+  color: rgb(0, 97, 155);
   text-decoration: underline;
   border-radius: 4px;
   transition: 300ms ease;
@@ -60,14 +60,14 @@
 }
 .duet-link.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(173, 11, 43);
+  color: rgb(164, 4, 40);
 }
 .duet-link:hover {
-  color: rgb(0, 77, 128);
+  color: rgb(0, 75, 129);
   text-decoration: none;
 }
 .duet-link:hover.duet-theme-turva {
-  color: rgb(148, 9, 37);
+  color: rgb(126, 2, 35);
 }
 .duet-link:active {
   opacity: 0.75;
@@ -141,7 +141,7 @@ button {
   align-items: start;
   padding: 16px;
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-decoration: none;
 }
 .block.duet-link.duet-link-has-icon {
@@ -177,9 +177,9 @@ button {
   line-height: 1.25;
   text-decoration: none;
   background-color: rgb(255, 255, 255);
-  border: solid 1px rgb(207, 210, 212);
+  border: solid 1px rgb(181, 198, 208);
   border-radius: 12px;
-  outline: 0 solid rgb(207, 210, 212);
+  outline: 0 solid rgb(181, 198, 208);
   outline-offset: -2px;
   transition: all 300ms ease;
 }
@@ -191,7 +191,7 @@ button {
   flex-shrink: 1;
   font-size: 1rem;
   font-weight: 600;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   text-align: left;
 }
 .duet-link.button .icon-wrap {
@@ -233,7 +233,7 @@ button {
   }
 }
 .duet-link.button.duet-theme-turva {
-  border-color: rgb(207, 207, 209);
+  border-color: rgb(199, 202, 207);
 }
 .duet-link.button.duet-theme-turva .duet-link-content {
   color: rgb(23, 28, 58);

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

@@ -8,6 +8,7 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getAccessibleLinkLabel } from "../../utils/a11y-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { breakpointToToken, getColorByName } from "../../utils/token-utils";
 /**
@@ -95,18 +96,6 @@ export class DuetLink {
     screenTest(event) {
         this.isSmallScreen = event.matches;
     }
-    getAccessibleLabel() {
-        if (this.accessibleLabel) {
-            return this.accessibleLabel;
-        }
-        if ((!!this.download || this.download === "") && this.element.textContent) {
-            return `${this.element.textContent}. ${this.accessibleLabelDownload}.`;
-        }
-        if (this.external && this.element.textContent) {
-            return `${this.element.textContent}. ${this.accessibleLabelExternal}.`;
-        }
-        return null;
-    }
     resolveDownload() {
         if (this.download === "") {
             return this.url.split("/").pop();
@@ -144,10 +133,10 @@ export class DuetLink {
     render() {
         const Tag = !this.url ? "button" : "a";
         const isButton = Tag === "button";
-        return (h(Host, { key: 'd41fb8c7164bbecec224e9e2fa972eb7b1a293d6', class: {
+        return (h(Host, { key: 'ec5433304f9679e5b88eaff914e6bddf9f9b5aa9', class: {
                 [`duet-link-${this.variation}`]: true,
                 "duet-m-0": this.margin === "none",
-            } }, h(Tag, { key: 'e6918074f43470311a133ff2141b23ec25e927a0', href: this.url, class: {
+            } }, h(Tag, { key: '491399aa70b38266a7377c118c8b15281ca2b0ae', href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
@@ -158,7 +147,7 @@ export class DuetLink {
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null && isButton ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null && isButton ? this.accessiblePopup.toString() : undefined, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }