@duetds/components 8.1.3 → 8.1.4

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

@@ -27,6 +27,7 @@
   display: inline-flex;
   width: auto;
   max-width: 100%;
+  font-size: 0;
   vertical-align: bottom;
   -webkit-tap-highlight-color: transparent;
 }
@@ -39,23 +40,51 @@
   }
 }
 
+:host(.square) {
+  margin-right: 12px !important;
+}
+:host(.square):last-child, :host(.square):last-of-type {
+  margin-right: 0 !important;
+}
+
 :host(.input-button) {
   z-index: 250;
 }
 
-:host(.duet-small) {
-  margin-right: 2px !important;
+:host(.duet-small),
+:host(.duet-x-small) {
+  margin-right: 4px !important;
   margin-bottom: 8px !important;
 }
-:host(.duet-small):last-child, :host(.duet-small):last-of-type {
+:host(.duet-small):last-child, :host(.duet-small):last-of-type,
+:host(.duet-x-small):last-child,
+:host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
 @media (max-width: 35.9375em) {
-  :host(.duet-small) {
+  :host(.duet-small),
+  :host(.duet-x-small) {
     width: auto;
   }
 }
 
+:host(.duet-x-small) {
+  margin-right: 2px !important;
+}
+:host(.duet-x-small):last-child, :host(.duet-x-small):last-of-type {
+  margin-right: 0 !important;
+}
+
+:host(.square.duet-small),
+:host(.square.duet-x-small) {
+  margin-right: 8px !important;
+}
+:host(.square.duet-small):last-child, :host(.square.duet-small):last-of-type,
+:host(.square.duet-x-small):last-child,
+:host(.square.duet-x-small):last-of-type {
+  margin-right: 0 !important;
+}
+
 :host(.duet-expand) {
   width: 100% !important;
 }
@@ -78,19 +107,17 @@
 }
 
 .duet-button {
-  padding: 14px 27px 15px !important;
   -webkit-user-select: none;
   user-select: none;
   position: relative;
   z-index: 100;
-  display: block;
+  display: flex;
+  align-items: center;
   width: 100%;
   min-width: 8rem;
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 1rem;
   font-weight: 600;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.1;
   color: rgb(0, 119, 179) !important;
   text-align: center;
@@ -98,9 +125,8 @@
   cursor: pointer;
   background: transparent;
   border-style: solid;
-  border-width: 2px;
-  border-radius: 12.5px;
-  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease;
+  border-width: 1px;
+  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, outline 300ms ease, padding 300ms ease, box-shadow 300ms ease;
 }
 .duet-button.duet-p-0 {
   padding: 0 !important;
@@ -115,6 +141,48 @@
 .duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
 }
+.duet-button.duet-button-size-medium {
+  height: 50px;
+  padding-right: 24px;
+  padding-left: 24px;
+  font-size: 1rem;
+  border-radius: 12.5px;
+}
+.duet-button.duet-button-size-medium.icon-left {
+  padding-left: 18px;
+}
+.duet-button.duet-button-size-medium.icon-right {
+  padding-right: 18px;
+}
+.duet-button.duet-button-size-small {
+  height: 40px;
+  padding-right: 18px;
+  padding-left: 18px;
+  font-size: 0.875rem;
+  border-radius: 10px;
+}
+.duet-button.duet-button-size-small.icon-left {
+  padding-left: 14px;
+}
+.duet-button.duet-button-size-small.icon-right {
+  padding-right: 14px;
+}
+.duet-button.duet-button-size-x-small {
+  height: 32px;
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 0.75rem;
+  border-radius: 8px;
+}
+.duet-button.duet-button-size-x-small.icon-left {
+  padding-left: 10px;
+}
+.duet-button.duet-button-size-x-small.icon-right {
+  padding-right: 10px;
+}
+.duet-button.plain.duet-p-0 {
+  height: auto;
+}
 .duet-button:not(.input-button-primary, .input-button-secondary, .input-button-embedded) {
   font-variant-numeric: tabular-nums;
 }
@@ -122,10 +190,7 @@
   text-align: center !important;
 }
 .duet-button.duet-button-is-small:not(.duet-button-icon-only) {
-  padding: 9px 19px 10px !important;
   min-width: 48px;
-  font-size: 0.875rem;
-  border-radius: 10px;
 }
 .duet-button.duet-button-is-small:not(.duet-button-icon-only).plain {
   padding-right: 0 !important;
@@ -134,32 +199,27 @@
 .duet-button.duet-button-is-small:not(.duet-button-icon-only).duet-p-0 {
   padding: 0 !important;
 }
-.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon {
-  padding-left: 48px !important;
-}
-.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right {
-  padding-right: 48px !important;
-  padding-left: 20px !important;
-}
 .duet-theme-turva .duet-button {
   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(198, 12, 48) !important;
 }
 .duet-button .duet-button-contents {
   position: relative;
-  display: inline-block;
+  display: flex;
+  gap: 10px;
+  align-items: center;
   margin: 0 auto;
   pointer-events: none;
 }
-.duet-button.duet-no-wrap {
-  white-space: nowrap;
+.duet-button .duet-button-contents.icon-right {
+  flex-direction: row-reverse;
 }
-.duet-button.icon {
-  padding-left: 52px !important;
+.duet-button .duet-button-contents .duet-button-contents-slot {
+  position: relative;
+  top: 0;
 }
-.duet-button.icon-right {
-  padding-right: 52px !important;
-  padding-left: 28px !important;
+.duet-button.duet-no-wrap {
+  white-space: nowrap;
 }
 .duet-button svg {
   width: 100%;
@@ -167,71 +227,31 @@
   fill: currentColor;
 }
 .duet-button .duet-button-icon {
-  position: absolute;
-  top: 50%;
-  left: -28px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin: 0 !important;
-  transform: translateY(-50%);
 }
 .duet-button .duet-button-icon duet-icon {
   width: 16px;
   height: 16px;
 }
-.duet-button .duet-button-icon.right {
-  right: -28px;
-  left: auto;
-}
-.duet-button .duet-button-icon.large {
-  left: -32px;
-  width: 20px;
-  height: 20px;
-}
 .duet-button .duet-button-icon.large duet-icon {
   width: 20px;
   height: 20px;
 }
-.duet-button .duet-button-icon.large.right {
-  right: -32px;
-  left: auto;
-}
-.duet-button .duet-button-icon.medium-small {
-  left: -16px;
-  width: 10px;
-  height: 10px;
-  padding-top: 1px;
-}
 .duet-button .duet-button-icon.medium-small duet-icon {
   width: 10px;
   height: 10px;
 }
-.duet-button .duet-button-icon.medium-small.right {
-  right: -16px;
-  left: auto;
-}
-.duet-button .duet-button-icon.small {
-  left: -16px;
-  width: 7px;
-  height: 7px;
-}
 .duet-button .duet-button-icon.small duet-icon {
   width: 7px;
   height: 7px;
 }
-.duet-button .duet-button-icon.small.right {
-  right: -16px;
-  left: auto;
-}
 .duet-button:active:not([disabled]) {
   opacity: 0.75;
   transition: none;
 }
 .duet-button.default {
-  border-color: rgb(225, 227, 230);
+  border-color: rgb(207, 210, 212);
 }
 .duet-theme-turva .duet-button.default {
   color: rgb(198, 12, 48) !important;
@@ -239,9 +259,12 @@
 }
 .duet-button.default:hover {
   border-color: rgb(0, 119, 179);
+  outline: 2px solid rgb(0, 119, 179);
+  outline-offset: -2px;
 }
 .duet-theme-turva .duet-button.default:hover {
   border-color: rgb(198, 12, 48);
+  outline-color: rgb(198, 12, 48);
 }
 .duet-button.default.duet-button-negative {
   background-color: rgb(255, 255, 255);
@@ -323,6 +346,9 @@
   border-width: 0 !important;
   border-radius: 4px !important;
 }
+.duet-button.input-button {
+  height: auto;
+}
 .duet-button.negative {
   color: rgb(0, 41, 77) !important;
   background: rgb(255, 255, 255);
@@ -397,58 +423,8 @@
   background: transparent;
   border-color: transparent;
 }
-.duet-button.plain.icon {
-  padding-left: 20px !important;
-}
-.duet-button.plain.icon.icon-right {
-  padding-right: 20px !important;
-  padding-left: 0 !important;
-}
-.duet-button.plain.icon.small {
-  padding-left: 20px !important;
-}
-.duet-button.plain.icon.small.icon-right {
-  padding-right: 20px !important;
-  padding-left: 0 !important;
-}
-.duet-button.plain.icon.medium-small {
-  padding-left: 20px !important;
-}
-.duet-button.plain.icon.medium-small.icon-right {
-  padding-right: 20px !important;
-  padding-left: 0 !important;
-}
-.duet-button.plain.icon.medium {
-  padding-left: 24px !important;
-}
-.duet-button.plain.icon.medium.icon-right {
-  padding-right: 24px !important;
-  padding-left: 0 !important;
-}
-.duet-button.plain.icon.large {
-  padding-left: 30px !important;
-}
-.duet-button.plain.icon.large.icon-right {
-  padding-right: 30px !important;
-  padding-left: 0 !important;
-}
-.duet-button.plain .duet-button-icon.left {
-  left: -16.6666666667px !important;
-}
-.duet-button.plain .duet-button-icon.left.medium {
-  left: -24px !important;
-}
-.duet-button.plain .duet-button-icon.left.large {
-  left: -30px !important;
-}
-.duet-button.plain .duet-button-icon.right {
-  right: -16.6666666667px !important;
-}
-.duet-button.plain .duet-button-icon.right.medium {
-  right: -24px !important;
-}
-.duet-button.plain .duet-button-icon.right.large {
-  right: -30px !important;
+.duet-button.plain.duet-p-0 .duet-button-contents {
+  height: auto;
 }
 .duet-button.plain[disabled] {
   color: rgb(101, 119, 135) !important;
@@ -531,19 +507,20 @@
   border-left-width: 0;
 }
 .duet-button.square {
-  width: 48px !important;
+  width: 52px;
   min-width: auto !important;
-  height: 48px !important;
   padding: 0 !important;
-  font-size: 1.25rem;
-  border-color: rgb(225, 227, 230);
+  font-size: 1rem;
+  border-color: rgb(207, 210, 212);
   border-width: 1px;
 }
-.duet-button.square.duet-button-is-small {
-  width: 28px !important;
-  height: 28px !important;
-  padding: 0 !important;
-  font-size: 1rem;
+.duet-button.square.duet-button-size-small {
+  width: 42px;
+  font-size: 0.875rem;
+}
+.duet-button.square.duet-button-size-x-small {
+  width: 34px;
+  font-size: 0.875rem;
 }
 .duet-button.square.duet-button-negative {
   color: rgb(255, 255, 255) !important;
@@ -558,6 +535,18 @@
 .duet-theme-turva .duet-button.square {
   border-color: rgb(228, 228, 230);
 }
+.duet-button.square:hover {
+  border-color: rgb(0, 119, 179);
+  outline: 2px solid rgb(0, 119, 179);
+  outline-offset: -2px;
+}
+.duet-theme-turva .duet-button.square:hover {
+  border-color: rgb(198, 12, 48);
+  outline-color: rgb(198, 12, 48);
+}
+.duet-button.square .duet-button-contents {
+  gap: 0;
+}
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: rgb(101, 119, 135) !important;
   cursor: not-allowed;

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

@@ -147,17 +147,17 @@ export class DuetButton {
      * Always the last one in the class.
      */
     render() {
-        var _a;
+        var _a, _b;
         const isExternalLink = this.external && this.url;
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (h("span", { class: "duet-button-contents", style: { color: getColorByName(this.color) } }, icon && (h("div", { "aria-hidden": "true", class: {
+        const commonChildren = (h("span", { class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: getColorByName(this.color) } }, icon && (h("div", { "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("slot", null)));
+            } }, h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), h("span", { class: "duet-button-contents-slot" }, h("slot", null))));
         const commonProps = {
             onFocus: this.onFocus,
             onBlur: this.onBlur,
@@ -174,9 +174,11 @@ export class DuetButton {
                 "duet-button-text-center": this.centerText,
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
+                "input-button": (_a = this.variation) === null || _a === void 0 ? void 0 : _a.startsWith("input-button"),
                 disabled: this.disabled,
                 icon: !!icon,
                 "icon-right": iconRight,
+                "icon-left": !!icon && !iconRight,
                 [this.getButtonIconSize()]: true,
             },
             "aria-controls": this.accessibleControls,
@@ -192,9 +194,11 @@ export class DuetButton {
         return (h(Host, { onClick: this.handleClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
+                "duet-x-small": this.size === "x-small",
                 "duet-fixed": this.fixed,
                 "duet-expand": this.expand,
-                "input-button": (_a = this.variation) === null || _a === void 0 ? void 0 : _a.startsWith("input-button"),
+                [this.variation]: true,
+                "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
             } }, h("div", { class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
@@ -540,7 +544,7 @@ export class DuetButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls the padding of the component."
+                    "text": "Controls the padding of the plain variation button - has no effect for other variations."
                 },
                 "attribute": "padding",
                 "reflect": false,
@@ -956,7 +960,7 @@ export class DuetButton {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetButtonSize",
-                    "resolved": "\"medium\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\" | \"x-small\"",
                     "references": {
                         "DuetButtonSize": {
                             "location": "local",

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

@@ -62,8 +62,8 @@ export class DuetHeading {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DuetHeadingLevel",
-                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "original": "DuetHeadingLevel | \"div\"",
+                    "resolved": "\"div\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
                     "references": {
                         "DuetHeadingLevel": {
                             "location": "import",

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

@@ -3,12 +3,14 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
 export class DuetLabel {
     constructor() {
         this.theme = "";
         this.for = undefined;
         this.margin = "auto";
         this.size = "medium";
+        this.color = "";
     }
     /**
      * Component lifecycle events.
@@ -24,13 +26,14 @@ export class DuetLabel {
         if (Build.isServer) {
             return;
         }
+        const color = getColorByName(this.color);
         return (h(Host, { class: {
                 "duet-label": true,
                 "duet-label-small": this.size === "small",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-small-margin": this.margin === "small",
                 "duet-m-0": this.margin === "none",
-            } }, h("label", { htmlFor: this.for }, h("span", null, h("slot", null)))));
+            } }, h("label", { htmlFor: this.for, style: { color } }, h("span", null, h("slot", null)))));
     }
     static get is() { return "duet-label"; }
     static get encapsulation() { return "scoped"; }
@@ -134,6 +137,30 @@ export class DuetLabel {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom color to be used for text, as a design token entered in camelCase or kebab-case.\nExample: \"color-primary\"."
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "\"\""
             }
         };
     }

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

@@ -165,10 +165,20 @@
   min-height: 24px;
 }
 .duet-multiselect .duet-multiselect-badge {
-  position: relative;
-  bottom: 2px;
-  height: 20px;
-  margin-left: 4px;
+  padding: 4px 8px 4px;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: rgb(0, 41, 77);
+  background: #d9ebf4;
+  border-radius: 20rem;
+}
+.duet-theme-turva .duet-multiselect .duet-multiselect-badge {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-weight: 700;
+  color: rgb(23, 28, 58);
+  background: #e8e8eb;
 }
 .duet-multiselect .duet-multiselect-icon {
   margin-left: 12px;

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

@@ -201,7 +201,7 @@ export class DuetMultiselect {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("duet-badge", { class: "duet-multiselect-badge", margin: "none", theme: this.theme }, this.value.length, " ", this.selectedLangObject[this.language], h("duet-visually-hidden", null, ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-multiselect-wrapper" }, h("button", { id: this.identifier, ref: el => (this.multiselectElement = el), class: { "duet-multiselect": true, "duet-multiselect-active": this.checkboxesVisible }, tabindex: "0", onClick: () => this.toggleCheckboxes(), onFocus: e => this.onFocus(e), onBlur: e => this.onBlur(e), role: "combobox", "aria-expanded": this.checkboxesVisible ? "true" : "false", "aria-haspopup": "listbox", "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-owns": `${this.identifier}-checkboxes`, onKeyDown: (e) => this.onMultiselectInputKeyDown(e), disabled: this.disabled }, h("span", { role: "textbox", "aria-readonly": "true", "aria-multiline": "false", "aria-autocomplete": "none", "aria-controls": `${this.identifier}-checkboxes`, "aria-label": this.placeholderLabel[this.language], class: "duet-multiselect-label" }, this.placeholder), this.value && this.value.length > 0 && (h("span", { class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", null, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { class: { "duet-multiselect-icon": true, "duet-multiselect-icon--rotate": this.checkboxesVisible }, fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), h("div", { id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
             }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, this.processedItems && this.allControls && (h("div", { class: "duet-multiselect-all-control-buttons" }, h("button", { class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&

package/lib/collection/components/duet-popup-menu-item/duet-popup-menu-item.js

@@ -31,6 +31,7 @@ export class DuetPopupMenuItem {
         this.external = false;
         this.value = undefined;
         this.leadingIcon = undefined;
+        this.leadingIconColor = undefined;
         this.trailingIcon = undefined;
         this.trailingText = undefined;
         this.active = false;
@@ -60,7 +61,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -194,6 +195,30 @@ export class DuetPopupMenuItem {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
+            "leadingIconColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left icon color."
+                },
+                "attribute": "leading-icon-color",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
             "trailingIcon": {
                 "type": "string",
                 "mutable": false,