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

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -10,6 +10,22 @@ export class DuetSubmenuBar {
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
         this.previousYScroll = 0;
+        this.hidden = false;
+        this.mobile = true;
+        this.bodyScroll = true;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Makes the submenu bar hide on top of the window when page is scrolled down
+         * Should be used only with sticky navigation.
+         */
+        this.hideOnScroll = false;
+        /**
+         * Open
+         */
+        this.open = false;
         this.handleMobileView = () => {
             if (this.mql[0].matches) {
                 this.mobile = false;
@@ -47,13 +63,6 @@ export class DuetSubmenuBar {
             const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
             return hasDropdownLinks || hasLinks || hasItems;
         };
-        this.hidden = false;
-        this.mobile = true;
-        this.bodyScroll = true;
-        this.theme = "";
-        this.hideOnScroll = false;
-        this.open = false;
-        this.accessibleLabel = undefined;
     }
     watchOpenStateHandler(newValue) {
         const open = newValue;
@@ -122,19 +131,19 @@ export class DuetSubmenuBar {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a63e21429e735858870de3a6c6b4f1d641ea0536' }, h("nav", { key: 'ec81c1ea9da9a6a1f976e4f809a44f5a0cc9129f', class: {
+        return (h(Host, { key: '7a77f62cb36c92c38db357ef5fabe1e5c935cc9b' }, h("nav", { key: 'cdbf70223355009908f9d61da89245c37328b044', class: {
                 "duet-submenu-bar": true,
                 "duet-theme-turva": this.theme === "turva",
                 hidden: this.hidden,
-            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '9c7afa7571d91d251c0a9ed320dcfaefe4ff10ec', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
+            }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { key: '3efbc8761447223494a0c0787a5625cd2797cb0b', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("span", { key: '670e006fcab56b5057addd32c86e78c488a6a954', class: "label" }, h("slot", { key: '6aeb5157b136b0d51ea614df7170db9901d7159a', name: "label" }), h("duet-icon", { key: 'd7801a42f75a4b6dfde7c1bd197b5c4aafb7eb03', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: 'b527227c328438130d7ec32a80c7d9ac8ee472b2', class: {
+            }, onClick: this.onClick }, h("span", { key: 'c9380b45a8b5d3cb499b88fea51726513c6dd37a', class: "label" }, h("slot", { key: '399042df2b0d6a34b3d110b6d54172b6d287926f', name: "label" }), h("duet-icon", { key: 'b45e07003987ddffd6f33ba63d9ab771b0d65479', theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { key: '8f0450f8e75fce5e3761c7328da207bdafe9587b', class: {
                 "menu-container": true,
                 hidden: !this.open,
-            }, role: "presentation" }, h("div", { key: '60bcdce4e176cf742905e6eb6e50d4dc8046b1be', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
+            }, role: "presentation" }, h("div", { key: 'b1862765e933e4d898af65e31d697052219d47a4', role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {
                 items: true,
                 hidden: !this.open,
-            }, ref: element => (this.itemsContainer = element) }, h("div", { key: '69d9ea394265451a554e19db4e5105e21027a61e', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: '95f8cedf2b0590010f0a6560531e9306350b2c37' }), h("div", { key: '780946443cd19822597df52bd006d3d3a30c2e5f', class: "list-padding" }))), h("duet-overlay", { key: '19734aa5ac1dd7c03192d3310518173fa8a43c07', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
+            }, ref: element => (this.itemsContainer = element) }, h("div", { key: 'a7dc8b551b252ddefd205f98675de931a9f95623', class: "list", role: this.mobile ? "presentation" : "list" }, h("slot", { key: 'f6141dd74e409dcc2264efd7e0d3c2686b7cbd6a' }), h("div", { key: '79d986136735ee080a4d1ce27721d4fb83d140fd', class: "list-padding" }))), h("duet-overlay", { key: '8af59698847e9c1c404bf2645787ac5e79b92ad6', "keep-stacking-context": true, visible: this.open, "display-device": "not-large", transition: "immediate" })))));
     }
     static get is() { return "duet-submenu-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -152,6 +161,7 @@ export class DuetSubmenuBar {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -172,12 +182,12 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "hideOnScroll": {
                 "type": "boolean",
+                "attribute": "hide-on-scroll",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -192,12 +202,12 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-scroll",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -212,12 +222,12 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -232,7 +242,6 @@ export class DuetSubmenuBar {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-submenu-bar-dropdown/duet-submenu-bar-dropdown.js

@@ -12,6 +12,23 @@ export class DuetSubmenuBarDropdown {
          */
         this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
         this.boundMqlFunctions = [];
+        this.isDesktop = false;
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Active
+         */
+        this.active = false;
+        /**
+         * Open
+         */
+        this.open = false;
+        /**
+         * Icon
+         */
+        this.icon = undefined;
         this.checkIsDesktop = () => {
             if (this.mql[0].matches) {
                 this.isDesktop = true;
@@ -35,11 +52,6 @@ export class DuetSubmenuBarDropdown {
                 this.open = true;
             }
         };
-        this.isDesktop = false;
-        this.theme = "";
-        this.active = false;
-        this.open = false;
-        this.icon = undefined;
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -96,18 +108,18 @@ export class DuetSubmenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '950ec986065630156024e30fc4ff3808bd83331e', role: "listitem" }, h("div", { key: '8aa74d12b0b0e63f82062c705b61f3881a130ece', class: {
+        return (h(Host, { key: 'a0b56d4ebb2d1c5df8d9b2e8cf27affa087b4ad0', role: "listitem" }, h("div", { key: '9fa18e8eb4746914b9bbd8b77a786142a65f896c', class: {
                 "duet-submenu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 open: this.open,
                 active: this.active,
-            } }, h("button", { key: '06132dc834775c0f78a00690e71381f2f8bc48dd', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
+            } }, h("button", { key: '65727462474ac673daf4945a57d6d089feb24770', ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", "aria-current": this.active ? "true" : "false", id: "button", type: "button", class: {
                 open: this.open,
                 active: this.active,
-            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '5808b4d746aacc6834d5c7cfc886cb2318ca11bf', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '4d1a960326bb00837cdffa7d7968d1a09c246656', class: "label" }, h("span", { key: '0b0fab9353193d5f65ba7a40474548653b0bd233', class: "label-text" }, h("slot", { key: '6270448ade06bfe7555500c63eba0c0dd4bc589a', name: "label" })), h("duet-icon", { key: '445ce13635b1ac94a6059dfa0cc74925bdb42829', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '72428c05d80b77b7443611c15548731847faf492', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+            }, onClick: this.onClick, onKeyUp: e => this.handleEscape(e) }, this.icon && (h("duet-icon", { key: '7b5238adee0fa36156adf8b1e43e3be149fc42d2', class: "submenu-bar-dropdown-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'c42ee85e8115f998e10fb8d21a43ae65d3ba18d6', class: "label" }, h("span", { key: 'd9c98e3bf2362fa2ab87a95c603b458b24bef4eb', class: "label-text" }, h("slot", { key: 'f4a84ac14a4dae1b1ddfdcf3625f0f069d64a583', name: "label" })), h("duet-icon", { key: '754b9942d5a00c2a6d9e989ddd7c126106637d53', class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { key: '5701fa024b859daccdc7f1cc498e3a5ef2f93394', tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
                 items: true,
                 hidden: !this.open,
-            } }, h("slot", { key: 'da23085cb0178dc3a796bfef1127aff57a055703' })))));
+            } }, h("slot", { key: 'd2a04e17bf6dc4960d9d51fdddbc549be609001c' })))));
     }
     static get is() { return "duet-submenu-bar-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -125,6 +137,7 @@ export class DuetSubmenuBarDropdown {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -145,12 +158,12 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -165,12 +178,12 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -185,12 +198,12 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -205,7 +218,6 @@ export class DuetSubmenuBarDropdown {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js

@@ -6,11 +6,29 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetSubmenuBarDropdownLink {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * Highlight
+         */
         this.highlight = false;
     }
     /**
@@ -31,12 +49,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a746efa1453d4cec928e66f4122f1a1b593e8442' }, h("a", { key: '6c959b9aad16526f25fa0f8c94d544e47850a69b', class: {
+        return (h(Host, { key: '75f6487ec2bbf8eeb446c4c65b833d2dc48fb1e2' }, h("a", { key: '32a7cd56700d1cc6902ebe3f9a03d2ef1ef10cdb', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'c0fc8773a756787903d3e312ebabdae1f5854445', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'e3970bb855fdb008fe5c71d5b70ffaa0c95c6ca1', class: "label-container" }, h("span", { key: '615e56e9b3b4c900b96ae2e77435dcfd29a9a321', class: "label" }, h("slot", { key: '66142de58ca0b982f962787e57583acf2645acd2' })), this.caret && h("duet-icon", { key: '690f5210ff9271e47c36a9ec86fbe0c427a7e823', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '019e32fdb4672495348327df056ff55e5654c91d', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '5a65a3c825180c0abc1fd8eb827c19324ac5c3e9', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '8e82790b08d1f8a0b49198de3a7e97205f95fb9f', class: "label-container" }, h("span", { key: '973d01b758e7c4b6421dd3469fc19f801ac0faa5', class: "label" }, h("slot", { key: 'bf5d6d0a7fdb87957b544f069d1b4d5aa87080a2' })), this.caret && h("duet-icon", { key: '064cd0726b52a5db37d2bd370dd6bd849d6d1c3c', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '097a091017a3ee323645c9b5b7f31e7ba07e1bfd', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }
@@ -54,6 +72,7 @@ export class DuetSubmenuBarDropdownLink {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -74,12 +93,12 @@ export class DuetSubmenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -94,12 +113,12 @@ export class DuetSubmenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -114,12 +133,12 @@ export class DuetSubmenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -134,12 +153,12 @@ export class DuetSubmenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "caret": {
                 "type": "boolean",
+                "attribute": "caret",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -154,12 +173,12 @@ export class DuetSubmenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caret",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "highlight": {
                 "type": "boolean",
+                "attribute": "highlight",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -174,7 +193,6 @@ export class DuetSubmenuBarDropdownLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "highlight",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.js

@@ -10,16 +10,39 @@ import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLocaleString, } from "../../utils/language-utils";
 export class DuetSubmenuBarItem {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
-        this.url = undefined;
+        /**
+         * Left icon.
+         */
         this.leadingIcon = undefined;
+        /**
+         * Right icon.
+         */
         this.trailingIcon = undefined;
-        this.accessibleLabel = undefined;
-        this.accessibleExpanded = undefined;
+        /**
+         * Use this property to add an aria-haspopup attribute to a button.
+         */
         this.accessiblePopup = "false";
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
     }
     /**
@@ -57,7 +80,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: 'bbd6de093fd02cb675b6a27822e8fd64ae2e6e36', role: "listitem" }, h(TagName, { key: '857df988d8c2d9ee3c830455d97496903f43af24', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '77a2683b345776fdd073d562025d01ad7b42b8cf', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'e5e54d900b8e9861fd7f687c302a83e9a5d26087', class: "label" }, h("span", { key: '7b8893ae6bd4a6209763cd1e88606495db78f84e', class: "label-text" }, h("slot", { key: 'bd0380cd2eee95bed2c16884fdc77827a7748da2' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '94315f7a4d4ab2444536fec20724bbbeaee83a65', class: {
+        return (h(Host, { key: '370695c59ae2c72b80448e6ffbde885b8bbcd5bb', role: "listitem" }, h(TagName, { key: '88562dedb76c53aa7e92ad5e39f69207f7f3e311', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: 'f3d30ed5ad267e32097c4720d5304c2fe20bd32d', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: '8a2fe0ab0b1a6dd364b0f424f888035fb50cf162', class: "label" }, h("span", { key: '3b89da848876ac3fa698f4fdc002f16c9622a8d0', class: "label-text" }, h("slot", { key: '6a23c689fd733f0af5106498a43c72e0e1f6c1c0' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '2cbabd44623fb631ad656f57941ab7324a4d05e2', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,
@@ -80,6 +103,7 @@ export class DuetSubmenuBarItem {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -100,12 +124,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -120,12 +144,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "url": {
                 "type": "string",
+                "attribute": "url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -140,11 +164,11 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "url",
                 "reflect": false
             },
             "leadingIcon": {
                 "type": "string",
+                "attribute": "leading-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -165,12 +189,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "leading-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "trailingIcon": {
                 "type": "string",
+                "attribute": "trailing-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -191,12 +215,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "trailing-icon",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -211,11 +235,11 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -230,11 +254,11 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": true
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -249,12 +273,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -278,12 +302,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -301,12 +325,12 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "external": {
                 "type": "boolean",
+                "attribute": "external",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -321,7 +345,6 @@ export class DuetSubmenuBarItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "external",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -6,9 +6,21 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 export class DuetSubmenuBarLink {
     constructor() {
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
     }
     /**
@@ -29,7 +41,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd500cddc2f019854bae1756301dc68ae23835b10', role: "listitem" }, h("a", { key: '3688cdd47046d93cae4ad667a348881d35449cb8', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'c620d6cac216344f07879ad271f2488f9e4a3036', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '82438bf5ee24adf621d9e342de9886829f193176', class: "label" }, h("slot", { key: '5ee0ae247c68b887845ce939e812e7923b994be8' })))));
+        return (h(Host, { key: 'f4da1cd65dbe2f088141166020a139beb7452755', role: "listitem" }, h("a", { key: '5d4bf8c00270d156cba453eeb3c0c7702f8a6cf0', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: 'e94a09f686e295d469564fa59c43e649183e31ac', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '78e1a857c4920dd0ec412738320487cab1630722', class: "label" }, h("slot", { key: '205e4258cb628c01123fb10bf5dfed66f25e84b5' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }
@@ -47,6 +59,7 @@ export class DuetSubmenuBarLink {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -67,12 +80,12 @@ export class DuetSubmenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "active": {
                 "type": "boolean",
+                "attribute": "active",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -87,12 +100,12 @@ export class DuetSubmenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "active",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -107,12 +120,12 @@ export class DuetSubmenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -127,7 +140,6 @@ export class DuetSubmenuBarLink {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
             }