@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -43,6 +43,79 @@ export class DuetMultiselect {
             fi: "Vihje",
             sv: "Tips",
         };
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedItems = [];
+        this.processedGroups = [];
+        this.checkboxesVisible = false;
+        this.activeDescendant = "";
+        // Used only to select from selectedLangObject
+        this.language = getLanguage();
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Display the select in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Value of multiselect
+         */
+        this.value = [];
+        /**
+         * Theme of the select.
+         */
+        this.theme = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Adds a unique identifier for the select.
+         */
+        this.identifier = createID("DuetMultiselect");
+        /**
+         * If set, the multiselect will display buttons to select or deselect all items.
+         * This should be used when there are many items, consider when the number of items is more than 5.
+         */
+        this.allControls = false;
+        /**
+         * Hint text to display.
+         */
+        this.placeholder = "";
+        /**
+         * Makes the select component disabled. This prevents users from being able
+         * to interact with the select, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * Label for the select.
+         */
+        this.label = "label";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
         /**
          * Component event handling.
          */
@@ -135,30 +208,6 @@ export class DuetMultiselect {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.processedItems = [];
-        this.processedGroups = [];
-        this.checkboxesVisible = false;
-        this.activeDescendant = "";
-        this.language = getLanguage();
-        this.margin = "auto";
-        this.error = "";
-        this.accessibleLiveError = "polite";
-        this.expand = false;
-        this.value = [];
-        this.theme = "";
-        this.labelHidden = false;
-        this.identifier = createID("DuetMultiselect");
-        this.allControls = false;
-        this.placeholder = "";
-        this.caption = undefined;
-        this.items = undefined;
-        this.disabled = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -224,23 +273,23 @@ export class DuetMultiselect {
      */
     render() {
         var _a;
-        return (h(Host, { key: '1b13e9b24543872be153e64448b3bb2b39e6ecfa', class: {
+        return (h(Host, { key: '67ddcbeb2bcf7fd5b4c147097c5cabfba3613950', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '148190880c310174f1ed2dc45c1b7c5ca7982b7e', class: {
+            } }, h("div", { key: 'a54d376060dfbddff29662ae568673f2aead4a5a', class: {
                 "duet-multiselect-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '35cd85ac5dc7968e292e5eb933ed48b019dfc082', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '452e8f79d16ed35179561fd9fa825e801c507feb', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '32f0a1109ad84ef710d7a2aace8e03f379c5b9b1', name: "tooltip" }), this.caption && (h("duet-caption", { key: '9ba0a2c54c3ad861040ae2e14125a3ddc6cd5b92', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'bee1499120506543ecbac607eb0b0306f7fcfbd3', class: "duet-multiselect-wrapper" }, h("button", { key: 'b3e6894a5a491d6e356cf50dfd58ed57db236fd0', 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", { key: 'b865f7a0b5603a2a935e2649ad7b3ae854abe6d8', 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", { key: 'e8bc27379ed2a2c31bee87eed60d21b7cb9557a7', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '6e21a7842a61e51aec25e639404c7bf077e16a92' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: 'e69223cfb0e77ad42d993efe14e38b545cf3a229', 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", { key: 'a03919b6f6aec79f2b154c6cbdec5394c1ceaf41', 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", { key: 'd30b64085be0ade634ec6e386eb5e783eb3b79f0', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '28d4d354951615891335fc0ea72267a95402b2a9', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: this.identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '4abf88e4efcaa7d8ac7d3761389d291fb737bb90', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'd0fbab3c690c4c1049d402425942358644675442', name: "tooltip" }), this.caption && (h("duet-caption", { key: '80c6e3987c3d532129b62b8a101624a9650aa57d', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'fd7d501c4304a998f90203a0fef97f69659d5aa6', class: "duet-multiselect-wrapper" }, h("button", { key: 'ab72d3ec292db9a86e2e165db427702697043d23', 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", { key: '541f6bb2d46d313b0820aa608f3e8595e4d9d709', 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", { key: '9de6b81f34e6b79bbe3f6d8cf825378a9cb1b840', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'c92f7fb9a3d4e14fbb655c1fb87250e9c69d5e01' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '210050ff44ce316b94dbaa156a7dffc7e4b65f3b', 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", { key: '85ba92d7e5a4130d1bfa809e539132afe34d6d32', 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", { key: 'b38ee820cc9e9340d0b369d7b52176567d628228', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
                 "duet-multiselect-checkboxes": true,
                 "duet-multiselect-checkboxes-active": this.checkboxesVisible,
-            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: '40ad894b3d59aa5abf6fa669f5618b437cc00f4b', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '358f2c22e2464177f04a70259dfa600769259fdb', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '46e3c1b0935603c8d55dde1b42b74c29e9eeb37c', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
+            }, "aria-activedescendant": this.activeDescendant, "aria-multiselectable": "true" }, ((_a = this.processedItems) === null || _a === void 0 ? void 0 : _a.length) && this.allControls && (h("div", { key: 'cecb7f5fb535c40313928e7dffd071ead9b74d0e', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '34d051c56097c082c42e05c2f699e1f62bd4f238', class: "duet-multiselect-select-all", onClick: this.handleSelectAllClick, id: this.getOptionIdentifier(-2), onKeyDown: (e) => this.onCheckboxKeyDown(e, -2) }, this.selectAllLabel[this.language]), h("button", { key: '3ec52e1f61e9ac1f6fd5c9b0d35d8525c28ffbf4', class: "duet-multiselect-clear-all", onClick: this.handleClearAllClick, id: this.getOptionIdentifier(-1), onKeyDown: (e) => this.onCheckboxKeyDown(e, -1) }, this.clearAllLabel[this.language]))), this.processedItems &&
             this.processedGroups.map(group => (h("fieldset", null, group.label && h("legend", null, group.label), group.items.map((item, key) => {
                 var _a, _b;
                 return (h("duet-checkbox", { identifier: this.getOptionIdentifier(key), role: "option", label: item.label, value: item.value, key: item.value, checked: (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item), "accessible-selected": ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(item)) ? "true" : undefined, disabled: !this.checkboxesVisible || item.disabled, onDuetChange: e => this.toggleCheckbox(e, item), onKeyDown: (e) => this.onCheckboxKeyDown(e, key), theme: this.theme }));
-            })))))), h("span", { key: 'c3c35d45455da55d81b525e818ca55637515947e', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '2ae201bcc57bb193bdd5124911af931a2694817a' }, this.error)))));
+            })))))), h("span", { key: 'd2d8ae7ca08a4cfd5ea9c2bc5cca2b62ddb13cf9', class: "duet-multiselect-help duet-multiselect-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '180fb990985b0564ce82c53d3b3901552a529108' }, this.error)))));
     }
     static get is() { return "duet-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -258,6 +307,7 @@ export class DuetMultiselect {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -278,12 +328,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -298,12 +348,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"\""
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -318,12 +368,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -338,12 +388,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "unknown",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetMultiselectItem[]",
@@ -351,7 +401,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         }
                     }
@@ -368,6 +418,7 @@ export class DuetMultiselect {
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -388,12 +439,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -408,12 +459,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -428,12 +479,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "createID(\"DuetMultiselect\")"
             },
             "allControls": {
                 "type": "boolean",
+                "attribute": "all-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -448,12 +499,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "all-controls",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -468,12 +519,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -488,11 +539,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "items": {
                 "type": "string",
+                "attribute": "items",
                 "mutable": false,
                 "complexType": {
                     "original": "string | DuetMultiselectItem[] | DuetMultiselectItemGroup[]",
@@ -500,12 +551,12 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectItem": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItem"
                         },
                         "DuetMultiselectItemGroup": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectItemGroup"
                         }
                     }
@@ -518,11 +569,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -537,12 +588,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -557,12 +608,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -577,11 +628,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -602,11 +653,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -621,11 +672,11 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -640,12 +691,12 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -666,7 +717,6 @@ export class DuetMultiselect {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }
@@ -698,7 +748,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -719,7 +769,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }
@@ -740,7 +790,7 @@ export class DuetMultiselect {
                     "references": {
                         "DuetMultiselectEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-multiselect/duet-multiselect.tsx",
                             "id": "src/components/duet-multiselect/duet-multiselect.tsx::DuetMultiselectEvent"
                         }
                     }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
 }
 
@@ -31,6 +31,10 @@
 .container {
   position: relative;
   z-index: 400;
+  pointer-events: none;
+}
+.container * {
+  pointer-events: auto;
 }
 
 ::slotted(*[slot=mobile]) {

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

@@ -10,7 +10,14 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
  */
 export class DuetNav {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Makes navigation sticky so it stays on top.
+         * when page is being scrolled. Works only for mobile.
+         */
         this.sticky = false;
     }
     /**
@@ -24,7 +31,7 @@ export class DuetNav {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '18c30d07ccac6e0656b4ba4c6feb5ddb07c6b06c' }, h("div", { key: '16eac13a9c78bccfdac8a70aff193d775ec1a1e6', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6b0fbbbab38fb9fc7e634878f424d238f8f6fab4' }), h("slot", { key: 'b6cf57d0876c972a5ccbce533217241277c402bf', name: "mobile" }), h("slot", { key: '2ad38e43fa1db17085c50ba3cfc3423dc0fdd880', name: "desktop" }))));
+        return (h(Host, { key: '524bb027510763efb06f908c78bb6dbc1ff1e24d' }, h("div", { key: '7c86cae3a491c2c568ec09ab7a7dacc935d906be', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'dae33a4dfc1ddd973d4639adc9b711a99bb0256c' }), h("slot", { key: 'ac0da76490e7c39bee65dc53ed368afdecb640a7', name: "mobile" }), h("slot", { key: '5081c449ebbba8d68dec069e18155f8fce9ad87e', name: "desktop" }))));
     }
     static get is() { return "duet-nav"; }
     static get encapsulation() { return "shadow"; }
@@ -42,6 +49,7 @@ export class DuetNav {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -62,12 +70,12 @@ export class DuetNav {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "sticky": {
                 "type": "boolean",
+                "attribute": "sticky",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -82,7 +90,6 @@ export class DuetNav {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sticky",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }
@@ -36,13 +36,13 @@
   cursor: pointer;
 }
 :host(:first-of-type) .duet-notification {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--notification-border-top-radius, 8px);
+  border-top-right-radius: var(--notification-border-top-radius, 8px);
 }
 :host(:last-of-type) .duet-notification {
   border-bottom: 0;
-  border-bottom-right-radius: 8px;
-  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: var(--notification-border-bottom-radius, 8px);
+  border-bottom-left-radius: var(--notification-border-bottom-radius, 8px);
 }
 .duet-notification.duet-theme-turva {
   color: rgb(23, 28, 58);
@@ -69,11 +69,13 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-notification:focus-within {
+  outline: 2px solid;
+  outline-offset: -2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   z-index: 1;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-:host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-notification:focus-within, :host(.user-is-tabbing) .duet-notification:focus-within.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-notification-container {
@@ -83,22 +85,11 @@
   border-bottom: 1px solid rgb(212, 223, 229);
 }
 
-.duet-notification-badge-container {
+.duet-indicator-container {
   position: relative;
-  width: 16px;
-}
-
-.duet-notification-badge {
-  position: absolute;
-  top: 6px;
-  left: -2px;
-  width: 8px;
-  height: 8px;
-  background: rgb(0, 119, 179);
-  border-radius: 50%;
-}
-.duet-theme-turva .duet-notification-badge {
-  background: rgb(198, 12, 48);
+  width: 10px;
+  margin-top: 6px;
+  margin-left: 6px;
 }
 
 .duet-notification-content {
@@ -154,4 +145,20 @@
 
 ::slotted(duet-paragraph) {
   margin-bottom: 2px !important;
+}
+
+:host(.duet-theme-turva2) .duet-notification.duet-theme-turva {
+  color: rgb(23, 42, 59);
+  border-bottom-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-notification.duet-notification-highlight.duet-theme-turva {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-notification-badge.duet-theme-turva {
+  background: rgb(230, 23, 64);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-notification:hover.duet-theme-turva {
+    background: rgb(251, 235, 225);
+  }
 }