@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.20

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: 'f026bdeb8bb0f3a21e0d475184c114d991c8d34e', class: {
+        return (h(Host, { key: '48ee754bd0231a05f00d9f15a2beb729b57dc393', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
-            } }, h("div", { key: '569bc0190751f00772059cbd51ba08f2d62777ee', class: {
+            } }, h("div", { key: '212fe92eabb76004eb018b36ef0dbc825a21f8be', 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: '9ccfbdef3eda53f54915bceb8be96f0d54747856', 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: '4a8d21958a685c3cd6315993fd5b3d494dacd199', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '319372a0fc0afb4677c04ccb1299051cd37b10b7', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'e49778d6f971a2470b56dafa5d9c366547b0d97d', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c16590fa2fe0ba12853e17418cba4fc448118cda', class: "duet-multiselect-wrapper" }, h("button", { key: '3efc98df5282fb803d1bc6a0c523fda27d73733c', 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: '4db581abd2111bf21ba6a9a1558e31d08941a829', 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: '204ef6ae4834f01ecc5cdddd5e1c2ad17d748e13', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: '613f579cc5815b7afc078625a9950c4b2ff50678' }, this.selectedLangObject[this.language], ", ", this.value.map(item => item.label).join(", ")))), h("svg", { key: '84f2d116cc6e8174dd4f2195188328eaf14bde41', 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: '28e23226381c96642cca173e6e38f4f643dd408a', 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: 'bd781fbf42bf6c0123228368f0018b16904e754c', id: `${this.identifier}-checkboxes`, role: "listbox", class: {
+            }, onKeyDown: (e) => this.onMultiselectKeyDown(e) }, h(DuetInternalLabel, { key: '7530455602172e9f450cf2c51ffef4e9e8b095ee', 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: '04100890a4421ee2a24a62f33cc740f009b0e2aa', class: "duet-multiselect-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '610363ef1c5df18e0404ecf30527ab542101b5dc', name: "tooltip" }), this.caption && (h("duet-caption", { key: 'd227786dacc1c8de9e749445de99aa9927834c3a', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: 'c102e3f30f45087f11c2de41e32765174d699c45', class: "duet-multiselect-wrapper" }, h("button", { key: '2788939db68491aa050265beb0970377fa6a3c76', 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: '08ac22ccf0ede5b5594ff44d2e7a3bea6177bdd8', 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: '20a565fd927ca30250641a8d60973757faf7a3b7', class: "duet-multiselect-badge" }, this.value.length, h("duet-visually-hidden", { key: 'b967c4f19809b18216a7633769365d44c35b9d2c' }, this.selectedLangObject[this.language], ",", " ", Array.isArray(this.value) ? this.value.map(item => item.label).join(", ") : ""))), h("svg", { key: '0df538e14bb2e05548305020f1deece8ca2c3eb5', 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: '3cf7cde5c4c357222200e5e8da29bc4b2195013b', 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: '8719382a8c45c297d64e21afd2e6894b4baf1d00', 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: '0ede9f28954863adf658287122fa470e9e8ed06d', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '3fc7f60c219943b97faf4d68e0bafd82c9ec2e07', 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: 'ca0f4aaaf9206e4474d72f0c70b6292200566f64', 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: '2fdfba244f04d2a65357a2f71778ba11fab0c4b0', class: "duet-multiselect-all-control-buttons" }, h("button", { key: '0f85adc72c37c3912907195d4401aa2e2aa07696', 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: '1c36a865118112bdb3abcfdba4191aa17f290ebc', 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: 'e467be93fd702a5c5a902e1d2458f4fe25447083', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'ec391ad7dbf44a8b305a55fd7db7edf3497e6d71' }, this.error)))));
+            })))))), h("span", { key: '7cc61fa058955273a790d926301d3a6d08ee2f0b', class: "duet-multiselect-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '299dae214efe69bea63d811aae8701e2e7ac34ed' }, 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,
                 "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[]",
@@ -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[]",
@@ -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\""
             }

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: 'c5ab5dae2e7d22ca95bc16e28afef27ae15afcb0' }, h("div", { key: '4dce1e440de9e33921a8d156dd2a7e524e6a6f19', class: { container: true, sticky: this.sticky } }, h("slot", { key: '6172b6cf2f4def6008bcf4738d66aff2042e9a0a' }), h("slot", { key: 'd363f92ea1b28f1d09b413affc48e6780fb6374b', name: "mobile" }), h("slot", { key: '6a7323e9949b9d2c68ddf41048c23aefa4873f0d', name: "desktop" }))));
+        return (h(Host, { key: 'da435b2c67678918ad047ec518e5e7ce4248ad46' }, h("div", { key: '7fd627c796cbea3540a34b81dd33aa389f24f434', class: { container: true, sticky: this.sticky } }, h("slot", { key: 'fa2f7460016778ef6aa8e41fa846b26d7c6f76a9' }), h("slot", { key: 'd706503a7934a3bd8bf2e0c568194c53cea0e220', name: "mobile" }), h("slot", { key: '82756ef7543bcba00695435414503b1cf1d2089b', 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.js

@@ -7,17 +7,46 @@ import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/ke
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetNotification {
     constructor() {
+        /**
+         * The currently active language.
+         * Used for announcing unread notifications to screen readers.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Property to change accessibleLabelUnread defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelUnread when needed
+         */
         this.accessibleLabelUnreadDefaults = {
             en: "Unread",
             fi: "Lukematon",
             sv: "Oläst",
         };
+        /**
+         * Adds accessible label for tooltip that is shown over unread counter
+         * @default { en: "Unread", fi: "Lukematon", sv: "Oläst" }
+         */
         this.accessibleLabelUnread = getLocaleString(this.accessibleLabelUnreadDefaults, this.language);
+        /**
+         * The url to open on notification click.
+         */
         this.url = "#";
+        /**
+         * The date of the notification.
+         */
         this.date = "";
+        /**
+         * Should the notification be visually highlighted?
+         */
         this.highlight = false;
+        /**
+         * Should the link open in a new window?
+         */
         this.external = false;
+        /**
+         * Theme of the notification.
+         */
         this.theme = "";
     }
     /**
@@ -43,11 +72,11 @@ export class DuetNotification {
         this.linkElement.focus(options);
     }
     render() {
-        return (h("div", { key: '890f3393ed0551fe1b939f89f6d2f04e892c4913', role: "listitem", class: {
+        return (h("div", { key: 'ca3ab09712e8c37bccd234d83b8685864fe9c6e2', role: "listitem", class: {
                 "duet-notification": true,
                 "duet-notification-highlight": this.highlight,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("a", { key: 'cc685fd8b8b81325ed7e98bc08ae5503066ac612', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '0e5be7a64538f4da436284ad7284230f1f86028d', class: "duet-notification-container" }, h("div", { key: '307f2270705569eefc4200d8b2b0ff452116821d', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: 'bbdb2452de67bf6e56bd8540ad0d34fc0a8d77e1', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: 'f01eee90a99d84210a27e271e3b2338cd35bb524' }, this.accessibleLabelUnread, ":")))), h("div", { key: '6173ca5bd3321cffdcaee2ae9e8fa48c84c46651', class: "duet-notification-content" }, h("slot", { key: '10edf0a272da934786f59453fb9700e5f8a53de0' })), h("div", { key: '2dfad6249fe5be7e28f37fa6ddfb665f7cbd04f3', class: "duet-notification-date" }, this.date)))));
+            } }, h("a", { key: '2042476b8c42b4cb9a4aec6057dbe563772fb9ec', ref: element => (this.linkElement = element), href: this.url, target: this.external ? "_blank" : "_self" }, h("div", { key: '082ba1ab481221f0954c6a9a59e07856af32898c', class: "duet-notification-container" }, h("div", { key: 'dde13f7597e7114096d5bae94ebc1b282154de8a', class: "duet-notification-badge-container" }, this.highlight && (h("div", { key: '4b70454b825191fe9a40450c7739bce6cdd059b4', class: "duet-notification-badge" }, h("duet-visually-hidden", { key: '8c038435ee5b35b2d35095eafa7f4b833de4e57f' }, this.accessibleLabelUnread, ":")))), h("div", { key: '7c8f2d236a8d922e6b21f65585b00f096134a8f3', class: "duet-notification-content" }, h("slot", { key: '911e94ff943e9ace002dd0cda2579a80ae42eda1' })), h("div", { key: 'dc50e21df86731f26269d4778e18b08a19444d01', class: "duet-notification-date" }, this.date)))));
     }
     static get is() { return "duet-notification"; }
     static get encapsulation() { return "shadow"; }
@@ -65,6 +94,7 @@ export class DuetNotification {
         return {
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -91,12 +121,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelUnreadDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-label-unread-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -121,6 +151,7 @@ export class DuetNotification {
             },
             "accessibleLabelUnread": {
                 "type": "string",
+                "attribute": "accessible-label-unread",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -138,12 +169,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-unread",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelUnreadDefaults,\n    this.language\n  )"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -158,12 +189,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "date": {
                 "type": "string",
+                "attribute": "date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,12 +209,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "date",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "highlight": {
                 "type": "boolean",
+                "attribute": "highlight",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -198,12 +229,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "highlight",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -218,12 +249,12 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -244,7 +275,6 @@ export class DuetNotification {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }