@duetds/components 8.3.1 → 8.4.1

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

@@ -2,9 +2,10 @@
  * Built with Duet Design System
  */
 import chevronIcon from "@duetds/icons/lib/assets/action-arrow-right";
+import downloadIcon from "@duetds/icons/lib/assets/action-download-small";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
-import { DuetStringsExternalDefaults } from "../../common-strings";
+import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 import { breakpointToToken } from "../../utils/token-utils";
@@ -20,10 +21,13 @@ export class DuetLink {
         this.language = getLanguage();
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        this.accessibleLabelDownloadDefaults = DuetStringsDownloadLinkDefaults;
+        this.accessibleLabelDownload = getLocaleString(this.accessibleLabelDownloadDefaults);
         this.identifier = undefined;
         this.theme = "";
         this.url = "#";
         this.external = false;
+        this.download = false;
         this.tabToLink = false;
         this.icon = undefined;
         this.iconColor = "currentColor";
@@ -77,13 +81,16 @@ export class DuetLink {
         if (this.accessibleLabel) {
             return this.accessibleLabel;
         }
+        if (!!this.download && this.element.textContent) {
+            return `${this.element.textContent}. ${this.accessibleLabelDownload}.`;
+        }
         if (this.external && this.element.textContent) {
             return `${this.element.textContent}. ${this.accessibleLabelExternal}.`;
         }
         return null;
     }
     renderContent() {
-        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && this.external && (h(Fragment, null, h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
+        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.download || this.external) && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.download ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
     renderGrid() {
         return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
@@ -100,13 +107,14 @@ export class DuetLink {
             } }, h("a", { href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
+                "duet-link-is-download": !!this.download,
                 "duet-link-has-icon": !!this.icon,
                 "duet-tab-to-link": this.tabToLink,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.external ? "_blank" : "_self", "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
+            }, target: this.download ? null : this.external ? "_blank" : "_self", download: this.download, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }
@@ -242,6 +250,54 @@ export class DuetLink {
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
+            "accessibleLabelDownloadDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Defaults for accessibleLabelDownload"
+                },
+                "attribute": "accessible-label-download-default",
+                "reflect": false,
+                "defaultValue": "DuetStringsDownloadLinkDefaults"
+            },
+            "accessibleLabelDownload": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}"
+                        }],
+                    "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
+                },
+                "attribute": "accessible-label-download",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.accessibleLabelDownloadDefaults)"
+            },
             "identifier": {
                 "type": "string",
                 "mutable": false,
@@ -319,6 +375,24 @@ export class DuetLink {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "download": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Causes the browser to treat the linked URL as a download. Can be used with or without a filename value.\nWith a value, it will be used as the name for the downloaded file. Without a value, the browser will suggest a name.\nNOTE: this attribute only works for same-origin URLs, or the blob: and data: schemes."
+                },
+                "attribute": "download",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "tabToLink": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -250,7 +250,7 @@ export class DuetList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the column width of the first column in percentages."
+                    "text": "Set the column width of the first column in percentages.\nFor automatic sizing of the column you can use class \"duet-list\" with a native <dl> element. See list utilities of the CSS framework."
                 },
                 "attribute": "label-width",
                 "reflect": false,

package/lib/collection/components/duet-menu-bar/duet-menu-bar.a11y.e2e.js

@@ -5,19 +5,55 @@ import { formatViolations, options as axeRunOptions, testWithAxe } from "../../u
 describe("[a11y] duet-menu-bar", () => {
     it("should render an accessible component", async () => {
         const result = await testWithAxe(`
-        <duet-menu-bar>
+        <duet-menu-bar id="desktop-menu-bar" accessible-label="Main">
           <div slot="center">
-            <duet-menu-bar-link active>Vakuutukset</duet-menu-bar-link>
-            <duet-menu-bar-link>Sijoittaminen</duet-menu-bar-link>
+            <duet-menu-bar-item active>Vakuutukset</duet-menu-bar-item>
+            <duet-menu-bar-item url="#">Sijoittaminen</duet-menu-bar-item>
+            <duet-menu-bar-item>Rahoitus</duet-menu-bar-item>
+            <duet-menu-bar-item>Asiakkaalle</duet-menu-bar-item>
           </div>
           <div slot="right">
-            <duet-menu-bar-link icon="navigation-user">Omat sivut</duet-menu-bar-link>
-            <duet-menu-bar-dropdown icon="navigation-user">
-              <span slot="label">Etunimi</span>
-              <duet-menu-bar-dropdown-link>Omat tiedot</duet-menu-bar-dropdown-link>
+            <duet-menu-bar-item leading-icon="navigation-user" id="desktop-login-opener">Kirjautuminen</duet-menu-bar-item>
+            <duet-slideout opener="desktop-login-opener">
+              <div slot="sticky-header">
+                <duet-grid alignment="center" style="gap: var(--space-small)">
+                  <duet-icon name="navigation-login" size="medium" margin="none"></duet-icon>
+                  <duet-heading visual-level="h3" fixed-size margin="none">Kirjautuminen</duet-heading>
+                </duet-grid>
+                <duet-spacer></duet-spacer>
+                <duet-tab-group variation="plain" identifier="slideout-tab" margin="none">
+                  <duet-tab label="Henkilöasiakas" selected content-id="desktop-login-tab-private-customer"></duet-tab>
+                  <duet-tab label="Yritysasiakas" content-id="desktop-login-tab-corporate-customer"></duet-tab>
+                </duet-tab-group>
+              </div>
+              <div id="desktop-login-tab-private-customer">
+                <duet-slideout-link size="medium" caret>
+                  Vakuutukset ja vahinkoasiat
+                  <span slot="description">Hallinnoi vakuutuksia, ilmoita vahingosta ja tarkastele korvauspäätöksiäsi.</span>
+                </duet-slideout-link>
+                <duet-spacer></duet-spacer>
+                <duet-divider margin="none"></duet-divider>
+                <duet-spacer></duet-spacer>
+                <duet-slideout-link size="medium" caret>
+                  Säästäminen ja sijoittaminen
+                  <span slot="description">Seuraa sijoitustesi kehitystä, hallinnoi rahastoja ja muita sijoitustuotteitasi.</span>
+                </duet-slideout-link>
+                <duet-spacer></duet-spacer>
+                <duet-divider margin="none"></duet-divider>
+                <duet-spacer></duet-spacer>
+                <duet-slideout-link size="medium" caret>
+                  Ajoneuvorahoitus
+                  <span slot="description">Tarkastele ja tee muutoksia osamaksu- tai leasingrahoitussopimukseesi.</span>
+                </duet-slideout-link>
+              </div>
+              <div id="desktop-login-tab-corporate-customer"></div>
+            </duet-slideout>
+            <duet-menu-bar-item leading-icon="navigation-user" id="desktop-menu-bar-etunimi">Etunimi</duet-menu-bar-item>
+            <duet-popup-menu controller="desktop-menu-bar-etunimi" accessible-role="list" skip-teleport>
+              <duet-popup-menu-item accessible-role="listitem">Omat tiedot</duet-popup-menu-item>
               <duet-divider margin="none"></duet-divider>
-              <duet-menu-bar-dropdown-button icon="messaging-logout">Kirjaudu ulos</duet-menu-bar-dropdown-button>
-            </duet-menu-bar-dropdown>
+              <duet-popup-menu-item leading-icon="messaging-logout" accessible-role="listitem">Kirjaudu ulos</duet-popup-menu-item>
+            </duet-popup-menu>
           </div>
         </duet-menu-bar>
       `, axeRunOptions);

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -20,6 +20,7 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  position: relative;
   width: 100%;
 }
 

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

@@ -69,19 +69,6 @@ export class DuetMenuBar {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        const children = Array.from(this.element.children);
-        for (const child of children) {
-            if (child.getAttribute("slot") === "center") {
-                for (const slotChild of Array.from(child.children)) {
-                    slotChild.setAttribute("role", "listitem");
-                }
-            }
-            else if (child.getAttribute("slot") === "right") {
-                for (const slotChild of Array.from(child.children)) {
-                    slotChild.setAttribute("role", "listitem");
-                }
-            }
-        }
     }
     connectedCallback() {
         this.changeLogoSize();

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

@@ -70,7 +70,7 @@ export class DuetMenuBarButton {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { onfocus: () => this.setFocus() }, h("button", { ref: button => (this.nativeButton = button), class: {
+        return (h(Host, { role: "listitem", onfocus: () => this.setFocus() }, h("button", { ref: button => (this.nativeButton = button), class: {
                 "duet-menu-bar-button": true,
                 "duet-theme-turva": this.theme === "turva",
             }, "aria-controls": this.accessibleControls, "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));

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

@@ -89,7 +89,7 @@ export class DuetMenuBarDropdown {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { role: "listitem" }, h("div", { class: {
                 "duet-menu-bar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.open,

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.css

@@ -0,0 +1,103 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 100%;
+}
+
+.duet-menu-bar-item {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 12px;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  color: inherit;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.duet-menu-bar-item:focus {
+  outline: 0;
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+.duet-menu-bar-item[aria-expanded=true] .trailing-icon.rotate {
+  transform: rotate(180deg);
+}
+.duet-menu-bar-item.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-item {
+    padding: 0 16px;
+  }
+}
+@media (min-width: 76.25em) {
+  .duet-menu-bar-item {
+    padding: 0 28px;
+  }
+}
+.duet-menu-bar-item.active {
+  color: rgb(0, 119, 179);
+}
+.duet-menu-bar-item.active::after {
+  position: absolute;
+  top: auto;
+  bottom: 2px;
+  left: 0;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 1px;
+  content: "";
+  background: rgb(0, 119, 179);
+  transition: 300ms ease;
+  transform: translateY(2px);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-item.active::after {
+    z-index: auto;
+    height: 2px;
+  }
+}
+.duet-menu-bar-item.active.duet-theme-turva {
+  color: rgb(198, 12, 48);
+}
+.duet-menu-bar-item.active.duet-theme-turva::after {
+  background: rgb(198, 12, 48);
+}
+@media (min-width: 62em) {
+  .duet-menu-bar-item:hover {
+    color: rgb(0, 119, 179);
+  }
+  .duet-menu-bar-item:hover.duet-theme-turva {
+    color: rgb(198, 12, 48);
+  }
+}

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

@@ -0,0 +1,286 @@
+/*!
+ * Built with Duet Design System
+ */
+import { media_query_large } from "@duetds/tokens/lib/tokens.json";
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetMenuBarItem {
+    constructor() {
+        this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+        this.boundMqlFunctions = [];
+        this.changeIconSize = () => {
+            if (this.mql[0].matches) {
+                this.iconSize = "x-small";
+            }
+            else {
+                this.iconSize = "small";
+            }
+        };
+        this.iconSize = "x-small";
+        this.theme = "";
+        this.active = false;
+        this.url = undefined;
+        this.leadingIcon = undefined;
+        this.trailingIcon = undefined;
+        this.accessibleLabel = undefined;
+        this.accessibleExpanded = undefined;
+        this.accessiblePopup = "false";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    connectedCallback() {
+        this.changeIconSize();
+        for (let i = 0; i < this.mql.length; i++) {
+            // addEventListener is not available in Stencil hydrate
+            if (this.mql[i].addEventListener) {
+                const bound = this.changeIconSize.bind(this);
+                this.mql[i].addEventListener("change", bound);
+                this.boundMqlFunctions[i] = bound;
+            }
+        }
+    }
+    disconnectedCallback() {
+        for (let i = 0; i < this.mql.length; i++) {
+            // removeEventListener is not available in Stencil hydrate
+            if (this.mql[i].removeEventListener) {
+                this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+            }
+        }
+        this.boundMqlFunctions = [];
+    }
+    /**
+     * Sets focus. Use this method instead of the global focus().
+     */
+    async setFocus(options) {
+        setTimeout(() => this.itemElement.focus(options), 200);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const TagName = this.url ? "a" : "button";
+        return (h(Host, { role: "listitem" }, h(TagName, { ref: element => (this.itemElement = element), class: {
+                "duet-menu-bar-item": true,
+                "duet-theme-turva": this.theme === "turva",
+                active: this.active,
+            }, href: this.url, role: `${TagName === "a" ? "link" : "button"}`, "aria-current": this.active ? "true" : "false", "aria-label": this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }, this.leadingIcon && (h("duet-icon", { size: this.iconSize, name: this.leadingIcon, margin: "none", theme: this.theme, color: "currentColor" })), h("slot", null), this.trailingIcon && (h("duet-icon", { class: {
+                "trailing-icon": true,
+                rotate: this.trailingIcon === "action-arrow-down-small" && this.accessibleExpanded,
+            }, theme: this.theme, name: this.trailingIcon, margin: "none", size: this.trailingIcon === "action-arrow-down-small" ? "xxx-small" : this.iconSize, color: "currentColor" })))));
+    }
+    static get is() { return "duet-menu-bar-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-menu-bar-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-menu-bar-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active"
+                },
+                "attribute": "active",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Url"
+                },
+                "attribute": "url",
+                "reflect": false
+            },
+            "leadingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left icon."
+                },
+                "attribute": "leading-icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "trailingIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetIconName",
+                    "resolved": "string",
+                    "references": {
+                        "DuetIconName": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetIconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Right icon."
+                },
+                "attribute": "trailing-icon",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+                },
+                "attribute": "accessible-label",
+                "reflect": false
+            },
+            "accessibleExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If a button expands or collapses adjacent content, then use the ariaExpanded\nprop to add the aria-expanded attribute to the button. Set the value to convey\nthe current expanded (true) or collapsed (false) state of the content."
+                },
+                "attribute": "accessible-expanded",
+                "reflect": true
+            },
+            "accessiblePopup": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use this property to add an aria-haspopup attribute to a button."
+                },
+                "attribute": "accessible-popup",
+                "reflect": true,
+                "defaultValue": "\"false\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "iconSize": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "(options?: FocusOptions) => Promise<void>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "FocusOptions",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "FocusOptions": {
+                            "location": "global",
+                            "id": "global::FocusOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus. Use this method instead of the global focus().",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -57,7 +57,7 @@ export class DuetMenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, null, h("a", { class: {
+        return (h(Host, { role: "listitem" }, h("a", { class: {
                 "duet-menu-bar-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,