@duetds/components 8.3.0 → 8.4.0

package/lib/collection/components/duet-date-picker/date-picker-input.js

@@ -3,12 +3,11 @@
  */
 import formDateIcon from "@duetds/icons/lib/assets/form-date";
 import { h } from "@stencil/core";
-import { slotElementCheck } from "../../utils/slot-utils";
 import i18n from "./date-i18n";
 export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, echoPlaceholder, caption, }) => {
     const { buttonLabel, selected, formatterLong } = i18n[language];
     return (h("div", { class: {
             "duet-theme-turva": theme === "turva",
             "duet-date-input": true,
-        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -150,13 +150,13 @@
     top: 0;
     right: 0;
     bottom: 0;
-    background: rgba(0, 41, 77, 0.75);
+    background: rgba(0, 41, 77, 0.3);
     transition: opacity 400ms ease, visibility 400ms ease;
     transform: translateZ(0);
     transform-origin: bottom center;
   }
   .duet-date-dialog.duet-theme-turva {
-    background: rgba(23, 28, 58, 0.75);
+    background: rgba(23, 28, 58, 0.3);
   }
 }
 .duet-date-dialog.active {

package/lib/collection/components/duet-date-picker/duet-date-picker.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 import i18n from "./date-i18n";
 import { DatePickerInput } from "./date-picker-input";
 import { DatePickerMonth } from "./date-picker-month";
@@ -178,6 +179,7 @@ export class DuetDatePicker {
         inheritGlobalTheme(this);
         this.determineValidity(parseISODate(this.value));
         this.updateInternalValue();
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     componentDidUpdate() {
         // we want to run this code _after_ render

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

@@ -2,9 +2,9 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
-import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
+import { hasSlot } from "../../utils/slot-utils";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot tooltip - Use to place a tooltip alongside the fieldset label.

package/lib/collection/components/duet-hero/duet-hero.a11y.e2e.js

@@ -12,7 +12,7 @@ describe("[a11y] duet-hero", () => {
           button-label="Vaihda e-laskutukseen"
           button-url="#"
           >
-          <div slot="heading">Laskut</div>
+          <span slot="heading">Laskut</span>
         </duet-hero>
 
         <script>
@@ -36,8 +36,8 @@ describe("[a11y] duet-hero", () => {
           image="https://www.duetds.com/assets/img/example-bg1.jpg"
             variation="campaign"
         >
-          <div slot="heading">Terveys ensin</div>
-          <div slot="subheading">Varmista oma ja perheesi toimeentulo vahingon varalta</div>
+          <span slot="heading">Terveys ensin</span>
+          <span slot="subheading">Varmista oma ja perheesi toimeentulo vahingon varalta</span>
           <duet-button variation="primary" margin="none">Tutustu terveysvakuutuksiin</duet-button>
         </duet-hero>
       `, axeRunOptions);
@@ -60,7 +60,7 @@ describe("[a11y] duet-hero", () => {
             ></span>
             21.3.2023
           </span>
-          <div slot="heading">Lorem ipsum dolor sit</div>
+          <span slot="heading">Lorem ipsum dolor sit</span>
           <duet-button variation="plain"  icon="action-arrow-right" icon-right margin="none">Link to service</duet-button>
         </duet-hero>
       `, axeRunOptions);

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -69,9 +69,12 @@ export class DuetHero {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
-        this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
-        this.hasSubHeadingSlot = !!this.element.querySelector('[slot="subheading"]');
+        this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        this.hasSubHeadingSlot = hasSlot(this.element, "subheading");
+        checkNamedSlotElement(this.element, "pre-heading", "span");
+        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "subheading", "span");
         this.refresh();
     }
     connectedCallback() {
@@ -179,7 +182,7 @@ export class DuetHero {
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading", onSlotchange: ev => slotElementCheck(ev, this, "span") })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("div", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("div", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&

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

@@ -9,7 +9,7 @@ import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEnterKey, isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, } from "../../utils/language-utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 const icons = {
     search: searchIcon,
     email: emailIcon,
@@ -225,6 +225,7 @@ export class DuetInput {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     componentDidLoad() {
         if (this.variation === "revealable" && this.nativeInput.form) {
@@ -319,7 +320,7 @@ export class DuetInput {
                 "has-clear": this.clear,
                 "has-focus": this.isFocused,
                 disabled: this.disabled,
-            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
+            } }, h("div", { class: "duet-input-label-container" }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { class: "duet-input-tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label, theme: this.theme === "turva" ? "turva" : "default" }, this.tooltip)), h("slot", { name: "tooltip" })), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-input-relative" }, this.placeholder && this.echoPlaceholder && (this.value || this.type === "time") && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-input-placeholder", margin: "none", size: "small" }, this.placeholder)), h("input", Object.assign({ ref: input => (this.nativeInput = input), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, type: this.getInputType(), class: {
                 "duet-input": true,
                 disabled: this.disabled,
                 "is-number": this.component === "number",

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

@@ -77,11 +77,10 @@ export class DuetLink {
         if (this.accessibleLabel) {
             return this.accessibleLabel;
         }
-        if (!this.element.innerHTML) {
-            return "";
+        if (this.external && this.element.textContent) {
+            return `${this.element.textContent}. ${this.accessibleLabelExternal}.`;
         }
-        const capitalized = this.element.innerHTML[0].toUpperCase() + this.element.innerHTML.slice(1);
-        return `${capitalized}. ${this.external ? `${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" }))))));

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);
+  }
+}