@duetds/components 9.2.0 → 9.2.1

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

@@ -47,7 +47,7 @@
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
-  color: rgb(0, 41, 77);
+  color: rgb(8, 42, 77);
   vertical-align: top;
   cursor: pointer;
   background: transparent;
@@ -91,7 +91,7 @@
   vertical-align: top;
   content: "";
   background: rgb(255, 255, 255);
-  border: 1px solid rgb(0, 41, 77);
+  border: 1px solid rgb(8, 42, 77);
   border-radius: 4px;
 }
 .duet-theme-turva .duet-checkbox + label::before {
@@ -112,12 +112,12 @@
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 .duet-checkbox[aria-invalid=true] + label::before {
-  background: #fdf4f7;
-  border-color: rgb(222, 35, 98);
+  background: #fdf4f6;
+  border-color: rgb(214, 28, 82);
 }
 .duet-theme-turva .duet-checkbox[aria-invalid=true] + label::before {
-  background: #fdf4f3;
-  border-color: rgb(224, 42, 13);
+  background: #fdf4f6;
+  border-color: rgb(214, 28, 82);
 }
 .duet-checkbox + label {
   position: static;
@@ -138,24 +138,24 @@
   cursor: default;
 }
 .duet-checkbox[disabled] + label {
-  color: rgb(101, 119, 135);
+  color: rgb(98, 121, 138);
 }
 .duet-theme-turva .duet-checkbox[disabled] + label {
-  color: rgb(116, 116, 117);
+  color: rgb(143, 147, 158);
 }
 .duet-checkbox[disabled] + label::before {
-  border-color: rgb(207, 210, 212);
+  border-color: rgb(181, 198, 208);
 }
 .duet-theme-turva .duet-checkbox[disabled] + label::before {
-  border-color: rgb(207, 207, 209);
+  border-color: rgb(199, 202, 207);
 }
 .duet-checkbox[disabled]:checked + label::before {
-  background: rgb(144, 149, 153);
-  border: 1px solid rgb(144, 149, 153);
+  background: rgb(127, 150, 165);
+  border: 1px solid rgb(127, 150, 165);
 }
 .duet-theme-turva .duet-checkbox[disabled]:checked + label::before {
-  background: rgb(116, 116, 117);
-  border-color: rgb(116, 116, 117);
+  background: rgb(143, 147, 158);
+  border-color: rgb(143, 147, 158);
 }
 
 .duet-checkbox-error {
@@ -164,12 +164,12 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.25;
-  color: rgb(222, 35, 98);
+  color: rgb(214, 28, 82);
   border-radius: 4px;
 }
 .duet-theme-turva .duet-checkbox-error {
   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(224, 42, 13);
+  color: rgb(214, 28, 82);
 }
 
 .duet-label-hidden .duet-label span,

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

@@ -535,7 +535,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -556,7 +556,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }
@@ -577,7 +577,7 @@ export class DuetCheckbox {
                     "references": {
                         "DuetCheckboxEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-checkbox/duet-checkbox.tsx",
                             "id": "src/components/duet-checkbox/duet-checkbox.tsx::DuetCheckboxEvent"
                         }
                     }

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

@@ -50,11 +50,11 @@
   padding: 1px;
   hyphens: none;
   line-height: 1.1;
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   text-align: center;
   cursor: pointer;
   background: rgb(255, 255, 255);
-  border-color: rgb(207, 210, 212);
+  border-color: rgb(181, 198, 208);
   border-style: solid;
   border-width: 1px;
   border-radius: 8px;
@@ -69,7 +69,7 @@
 .duet-chip-container.duet-theme-turva {
   color: rgb(23, 28, 58) !important;
   background: rgb(255, 255, 255);
-  border-color: rgb(207, 207, 209);
+  border-color: rgb(199, 202, 207);
 }
 .duet-chip-container.duet-theme-turva:hover {
   border-color: rgb(198, 12, 48);
@@ -80,23 +80,23 @@
   border-width: 2px;
 }
 .duet-chip-container.duet-chip-disabled {
-  color: rgb(101, 119, 135) !important;
+  color: rgb(98, 121, 138) !important;
   cursor: default;
   background: rgb(245, 248, 250) !important;
   border-color: rgb(245, 248, 250) !important;
 }
 .duet-chip-container.duet-chip-disabled.duet-theme-turva {
-  color: rgb(116, 116, 117) !important;
-  background: rgb(245, 245, 247);
-  border-color: rgb(245, 245, 247);
+  color: rgb(143, 147, 158) !important;
+  background: rgb(245, 247, 250);
+  border-color: rgb(245, 247, 250);
 }
 .duet-chip-container.duet-chip-disabled:hover {
   background: rgb(245, 248, 250);
   border-color: rgb(245, 248, 250);
 }
 .duet-chip-container.duet-chip-disabled:hover.duet-theme-turva {
-  background: rgb(245, 245, 247);
-  border-color: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
+  border-color: rgb(245, 247, 250);
 }
 .duet-chip-container.duet-chip-disabled button,
 .duet-chip-container.duet-chip-disabled label {
@@ -113,7 +113,7 @@
   font-size: 0.875rem;
   font-weight: 600;
   line-height: 1rem;
-  color: rgb(0, 41, 77) !important;
+  color: rgb(8, 42, 77) !important;
   cursor: pointer;
 }
 .duet-chip-container button:focus,
@@ -159,12 +159,12 @@
 }
 .duet-chip-container.duet-chip-filter-checked, .duet-chip-container.duet-chip-radio-checked {
   padding: 0 !important;
-  background: rgb(230, 242, 248);
+  background: rgb(228, 241, 247);
   border-color: rgb(0, 119, 179);
   border-width: 2px;
 }
 .duet-chip-container.duet-chip-filter-checked:hover, .duet-chip-container.duet-chip-radio-checked:hover {
-  background: rgb(205, 229, 241);
+  background: rgb(198, 225, 238);
 }
 .duet-chip-container.duet-chip-filter-checked.chip-has-icon button,
 .duet-chip-container.duet-chip-filter-checked.chip-has-icon label, .duet-chip-container.duet-chip-radio-checked.chip-has-icon button,
@@ -188,11 +188,11 @@
   transform: scaleX(1);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva {
-  background: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
   border-color: rgb(198, 12, 48);
 }
 .duet-chip-container.duet-chip-filter-checked.duet-theme-turva:hover, .duet-chip-container.duet-chip-radio-checked.duet-theme-turva:hover {
-  background: rgb(228, 228, 230);
+  background: rgb(222, 224, 228);
 }
 .duet-chip-container .duet-chip-popup-disclosure {
   padding-right: 4.5px;
@@ -202,38 +202,93 @@
   transition: transform 300ms ease;
 }
 .duet-chip-container.duet-chip-filter-popup-open {
-  background: rgb(243, 249, 252);
-  border-color: rgb(243, 249, 252);
+  background: rgb(240, 247, 250);
+  border-color: rgb(240, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open.duet-theme-turva {
-  background: rgb(245, 245, 247);
-  border-color: rgb(245, 245, 247);
+  background: rgb(245, 247, 250);
+  border-color: rgb(245, 247, 250);
 }
 .duet-chip-container.duet-chip-filter-popup-open .duet-chip-popup-disclosure duet-icon {
   transform: rotate(180deg);
 }
-.duet-chip-container.duet-chip-input {
-  display: flex;
-  align-items: center;
-  padding-right: 0 !important;
+.duet-chip-container.duet-chip-input:hover {
+  padding: 1px !important;
+  border-color: rgb(181, 198, 208);
+  border-width: 1px;
+}
+.duet-chip-container.duet-chip-input.duet-chip-hover, .duet-chip-container.duet-chip-input.duet-chip-selected {
+  padding: 0 !important;
+  border-color: rgb(0, 119, 179);
+  border-width: 2px;
+}
+.duet-chip-container.duet-chip-input.duet-chip-hover .duet-chip-remove-button, .duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button {
+  right: 0;
+  width: 34px;
+  height: 34px;
+  background: transparent;
+}
+.duet-chip-container.duet-chip-input.duet-chip-delete-focus {
+  background: rgb(240, 247, 250);
 }
 .duet-chip-container.duet-chip-input .duet-chip-input-button {
-  flex-grow: 1;
+  margin-right: 22px;
 }
 .duet-chip-container.duet-chip-input .duet-chip-remove-button {
-  width: 26px;
-  padding: 8px 16px 8px 0;
-  margin: -8px 0;
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  width: 36px;
+  height: 36px;
+  padding-left: 10px;
+  border: 3px solid transparent;
+  border-radius: 8px;
+}
+.duet-chip-container.duet-chip-input .duet-chip-remove-button:hover {
+  background: rgb(217, 236, 245);
+  background-clip: padding-box;
+}
+.duet-chip-container.duet-chip-input.duet-chip-selected {
+  background: rgb(240, 247, 250);
+}
+.duet-chip-container.duet-chip-input.duet-chip-selected.duet-chip-hover {
+  background: rgb(217, 236, 245);
+}
+.duet-chip-container.duet-chip-input.duet-chip-selected .duet-chip-remove-button:hover {
+  background: rgb(198, 225, 238);
+  background-clip: padding-box;
+}
+.duet-chip-container.duet-chip-input.duet-theme-turva:hover {
+  border-color: rgb(199, 202, 207);
+}
+.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-hover {
+  border-color: rgb(198, 12, 48);
+}
+.duet-chip-container.duet-chip-input.duet-theme-turva .duet-chip-remove-button:hover {
+  background: rgb(255, 241, 241);
+}
+.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected {
+  background: rgb(255, 241, 241);
+}
+.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected.duet-chip-hover {
+  background: rgb(255, 213, 215);
+  background-clip: padding-box;
+}
+.duet-chip-container.duet-chip-input.duet-theme-turva.duet-chip-selected .duet-chip-remove-button:hover {
+  background: rgb(255, 185, 190);
+  background-clip: padding-box;
 }
 .duet-chip-container.large button,
 .duet-chip-container.large label {
   padding: 15px 22px;
 }
 
-:host(.user-is-tabbing) .duet-chip-focus {
+:host(.user-is-tabbing) .duet-chip-focus,
+:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva {
+:host(.user-is-tabbing) .duet-chip-focus.duet-theme-turva,
+:host(.user-is-tabbing) .duet-chip-delete-focus .duet-chip-remove-button.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
 

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

@@ -5,12 +5,23 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
+import { getLocaleString } from "../../utils/language-utils";
 export class DuetChip {
     constructor() {
         /**
          * Own Properties.
          */
         this.chipId = createID("DuetChip");
+        this.deleteLabels = {
+            fi: "Poista",
+            en: "Remove",
+            sv: "Ta bort",
+        };
+        this.selectedForDeletionLabels = {
+            fi: "Valittu, poista askelpalautinnäppäimellä",
+            en: "Selected, remove with backspace",
+            sv: "Valt, ta bort med backsteg",
+        };
         this.enforceNoDisabledSelected = () => {
             if (this.disabled && this.checked) {
                 console.error("Duet error: pre-selected chip may not be disabled");
@@ -165,8 +176,8 @@ export class DuetChip {
          * Remove input chip
          */
         this.onRemoveClick = (evt) => {
-            evt.stopPropagation();
-            evt.preventDefault();
+            evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+            evt === null || evt === void 0 ? void 0 : evt.preventDefault();
             this.duetRemove.emit({
                 originalEvent: evt,
                 checked: this.checked,
@@ -178,6 +189,8 @@ export class DuetChip {
         this.focus = false;
         this.popupElement = undefined;
         this.popupOpen = undefined;
+        this.inputChipHover = false;
+        this.inputChipDeleteFocus = false;
         this.accessibleLabel = undefined;
         this.variation = "button";
         this.size = "medium";
@@ -187,6 +200,7 @@ export class DuetChip {
         this.identifier = undefined;
         this.value = undefined;
         this.name = undefined;
+        this.selected = false;
         this.checked = false;
         this.disabled = false;
         this.accessibleExpanded = undefined;
@@ -238,12 +252,31 @@ export class DuetChip {
             return this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined;
         }
     }
+    getAccessibleDeleteLabel() {
+        return `${getLocaleString(this.deleteLabels)} ${this.element.textContent}`;
+    }
+    getAccessibleInputChipLabel() {
+        return `${this.element.textContent}${this.selected ? ` (${getLocaleString(this.selectedForDeletionLabels)}) ` : ""},`;
+    }
     /**
      * Sets focus. Use this method instead of the global focus().
      */
     async setFocus(options) {
         setTimeout(() => this.focusableElement.focus(options), 200);
     }
+    /**
+     * @internal
+     */
+    async setDeleteFocus() {
+        setTimeout(() => this.deleteButtonElement.focus(), 200);
+    }
+    /**
+     * Removes input chip. Use this method instead of the native remove() so the component can
+     * emit appropriate event
+     */
+    async removeChip() {
+        this.onRemoveClick();
+    }
     render() {
         var _a;
         const identifier = this.identifier || this.chipId;
@@ -251,6 +284,9 @@ export class DuetChip {
             "duet-chip-container": true,
             [`duet-chip-${this.variation}`]: true,
             "duet-chip-focus": this.focus,
+            "duet-chip-selected": this.selected,
+            "duet-chip-hover": this.inputChipHover,
+            "duet-chip-delete-focus": this.inputChipDeleteFocus,
             "duet-chip-has-icon": !!this.icon,
             "duet-chip-has-popup": this.variation === "filter" && !!this.popupElement,
             "duet-theme-turva": this.theme === "turva",
@@ -265,7 +301,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: '83bf513ef7192b64d92eb428ca47fbdf317468d9', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '750fdb0037f02571a465c86dfed9f81a4e4f1110', class: classes }, h("button", Object.assign({ key: '49d5409a3600f91d6feefdafb207d17e330f53a3', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '609549b8eb1bc7b9c3e7049f94dc9678b9dc259f', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '9167ad7ccd13479061d6849af2938bc868e51677', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f8ab715a57220b96dbdbd2478207c4ba40ba325b' })))), this.variation === "input" && (h("span", { key: '0f1faa69c817a88de8716de8b261fa63688c899b', class: classes }, h("button", Object.assign({ key: '1955c7a24051d1c5b7671bf4a8438ee1c014b7cc', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel }, focusHandlers), h("span", { key: '3d69ad3ec1037f7b8278156392e902a2317f758c', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'c056e4f37ca87f98fb8743d5b723232e8335f83c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f257712ed166db7feb280d894bb1c111fa6fe171' })), h("button", { key: '0735914e5223ab4aed75f03e08e39af6a10ced8e', class: "duet-chip-remove-button", onClick: this.onRemoveClick }, h("duet-icon", { key: '3478c9f87f043e61f96a7595a35db8849c0c730c', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'a656fd6ce69c6201d0dd7407170c88c47e8f2a67', class: classes }, h("input", Object.assign({ key: '51dd1e0898d2af86d493e25b9d623d422a1e3ca8', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '60a550a09fcebb26e886503f0d9c637e6e2447cc', htmlFor: identifier }, this.icon && (h("span", { key: 'ba317cf437844d8c8694956e114687fa0d531daf', class: "duet-chip-icon-container" }, h("duet-icon", { key: '4e6bd4e5e0003bf649929dfdb36ca0f5b00e3e4c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '7d427ed0b6d4d15a1eb1b3c0515e3d0d119a5197', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '943da2eae596920b321008ca6d927411109555db' }), this.popupElement && (h("span", { key: 'ccff1c7a99e9bf1b96449d061526a6f207907dfe', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'b381a2ae097f9de261f971882520688b0857a02f', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '804eec75bc2347e568c5ebe9c994d909df7a6d15', class: classes }, h("slot", { key: '74bef72f091082f56c3cbdc01c6284a347de775f', name: "input" }), h("label", { key: '2a1fb8e4e0da4b7aa89fad54677e8cc3c0ea318f', htmlFor: identifier }, this.icon && (h("span", { key: '6bf61ec47a6647c05ef31fcef2d955740a37e55e', class: "duet-chip-icon-container" }, h("duet-icon", { key: '0c780d8a156ebb569408bbac96838b8627818b79', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'ed9beaf0e2c72f762c8abcc8ebec1a149ce4f31e', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'b1c9725c085d8d27b273eae4eba95b8c911343db' }))))));
+        return (h(Host, { key: 'a1e4d371f57abce15c06aa88bf2faab012bde60a', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '48b8e4b70be8c4511a33be55c6fd25ec850fe1c2', class: classes }, h("button", Object.assign({ key: '1e92c0aff2f7d6817644759f8fc0a338a12e651e', id: identifier, "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: 'f0dfef6892bc184005d490ad2d1d5f9ff5c21fe9', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '490e975ca8e0573278761ac8fe978a5bac7f1188', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '1e44610c8ab2868243517a700bfdb9e5adbd5d0d' })))), this.variation === "input" && (h("span", { key: 'b4340e31757471ddf6e7e326c4738a34f57d668c', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: 'dbb4afd5b7f46baa28a026ff4531db068eac8980', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: '6e871c13f043685a2bd1fbf484256e801437a86b', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '74c2893dc01e6e13a2baf628908c5f92a3bfc9d5', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'f0600d50d6bc3a1b549d9d7b8a3c62d4d02ab53f' })), h("button", { key: '70055da94df9cb43034d6b70e63c2748ca91eee5', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '1201fc54755c07ce2bbadfc2ec8aa29d5faa43eb', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'c6c3ddfc24d0bce8113029c644f01c5eceee6936', class: classes }, h("input", Object.assign({ key: 'dae5813deea4c2b7798852027cc65d2be069fa05', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '5c7534979701b02d02649f0b77aadfae19568c15', htmlFor: identifier }, this.icon && (h("span", { key: 'a92359d55dae65066120c53db2f8fcfa09f89904', class: "duet-chip-icon-container" }, h("duet-icon", { key: '9193a5782a8848231e53276b90b0ce2e665e2812', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '78717f62e085fb0528f6ee7b141691f6c7555f42', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '7c210530d8bb610ac7aaadd0f4a7510ddd020d12' }), this.popupElement && (h("span", { key: '2a6053db849ac7543ce7649c94a3fda09d7dd2f3', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'e21b78ef1b4fca374c1112e4d492ed57f8ab9cab', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: 'a964e2e03bfbf19d8a01f8475ee6d4b81c671c76', class: classes }, h("slot", { key: '3b64cb528868bf3f36b83bfe613df41d7ee17513', name: "input" }), h("label", { key: 'f3f52816c1229c2446f51642bcba073e95d44139', htmlFor: identifier }, this.icon && (h("span", { key: 'e5d0dbadb5b2cc473dd1ad618bdc3f0e00d3f02c', class: "duet-chip-icon-container" }, h("duet-icon", { key: '498cf093393d6b44a60aad4b73520d4f3ebecde2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '153615d1f9923f824ca91a8799dfaebb9489ad47', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '6f89ed2bcee2e5cdf1b6505f04be602fad04b904' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -293,7 +329,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Adds accessible label for the chip that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
+                    "text": "Adds accessible label for the chip that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology. With input variation this is not used,\nas the accessible label is automatically generated."
                 },
                 "attribute": "accessible-label",
                 "reflect": false
@@ -307,7 +343,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipVariation"
                         }
                     }
@@ -316,7 +352,7 @@ export class DuetChip {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nRadio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.\nWARNING: Input variation is still work-in-progress and subject to change."
+                    "text": "Variation of the chip.\nButton should be used to present a list of actions or suggestions. It behaves like a button and must be used\ntogether with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be\nused with a value. Input represents items input by the user, and the chip can be removed with a click.\nRadio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name."
                 },
                 "attribute": "variation",
                 "reflect": false,
@@ -331,7 +367,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipSize": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipSize"
                         }
                     }
@@ -462,6 +498,27 @@ export class DuetChip {
                 "attribute": "name",
                 "reflect": false
             },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Selected state of the input chip. Deleting the input chip with backspace key should be done only for a selected\nchip. If a chip is not selected, backspace key should select it."
+                },
+                "attribute": "selected",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "checked": {
                 "type": "boolean",
                 "mutable": true,
@@ -539,7 +596,9 @@ export class DuetChip {
         return {
             "focus": {},
             "popupElement": {},
-            "popupOpen": {}
+            "popupOpen": {},
+            "inputChipHover": {},
+            "inputChipDeleteFocus": {}
         };
     }
     static get events() {
@@ -559,7 +618,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -580,7 +639,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -601,7 +660,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -622,7 +681,7 @@ export class DuetChip {
                     "references": {
                         "DuetChipEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-chip/duet-chip.tsx",
+                            "path": "/Users/kasimir/Documents/projects/duet-design-system/packages/components/src/components/duet-chip/duet-chip.tsx",
                             "id": "src/components/duet-chip/duet-chip.tsx::DuetChipEvent"
                         }
                     }
@@ -655,6 +714,43 @@ export class DuetChip {
                     "text": "Sets focus. Use this method instead of the global focus().",
                     "tags": []
                 }
+            },
+            "setDeleteFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }]
+                }
+            },
+            "removeChip": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Removes input chip. Use this method instead of the native remove() so the component can\nemit appropriate event",
+                    "tags": []
+                }
             }
         };
     }

package/lib/collection/components/duet-choice/duet-checkmark.css

@@ -3,7 +3,7 @@
   width: 20px;
   height: 20px;
   margin-left: auto;
-  border: 1px solid rgb(144, 149, 153);
+  border: 1px solid rgb(127, 150, 165);
   border-radius: 4px;
   transition: border 300ms ease;
 }
@@ -11,7 +11,7 @@
   margin-right: auto;
 }
 .duet-theme-turva .duet-checkmark-container {
-  border-color: rgb(116, 116, 117);
+  border-color: rgb(143, 147, 158);
 }
 .checked .duet-checkmark-container {
   background: rgb(0, 119, 179);
@@ -26,16 +26,16 @@
   border-radius: 50%;
 }
 [disabled] + label .duet-checkmark-container {
-  border-color: rgb(207, 210, 212) !important;
+  border-color: rgb(181, 198, 208) !important;
 }
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
-  border-color: rgb(207, 207, 209) !important;
+  border-color: rgb(199, 202, 207) !important;
 }
 .checked [disabled] + label .duet-checkmark-container {
-  background: rgb(207, 210, 212) !important;
+  background: rgb(181, 198, 208) !important;
 }
 .duet-theme-turva .checked [disabled] + label .duet-checkmark-container {
-  background: rgb(207, 207, 209) !important;
+  background: rgb(199, 202, 207) !important;
 }
 
 .duet-checkmark {

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -18,11 +18,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '694951f0c8763ee7206e40f195d801b161cb970d', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '81371523be24dcc91313d7933103e74bbab2bda3', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '30578b86f60822622e625e5baf2356f550c33a6d', class: {
+        return (h(Host, { key: '0c46b037eeb1d3a569233716e3931bb9e6d36a3b', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '77315f3c12b6d27a6e2736eac734c6830704d15a', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '1b895cb3066e53481dae93943c90c4fa57fa1f3d', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: 'd5b3c5f15bffdea7d89a80621c1aa4e96ae7ee0f', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '2edba7cb3c44eed2b9af34c9a1afd893cadc3bfa', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {