@duetds/components 8.3.0 → 8.4.0

package/lib/collection/components/duet-promo-card/duet-promo-card.css

@@ -99,4 +99,14 @@
 }
 .duet-promo-card.duet-theme-turva .content-wrapper:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+
+.duet-promo-card-link {
+  transition: box-shadow 300ms ease;
+}
+.duet-promo-card-link:hover {
+  box-shadow: 0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1);
+}
+.duet-promo-card-link:hover.duet-theme-turva {
+  box-shadow: 0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15);
 }

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -3,7 +3,7 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @slot pre-heading - Slot for pre-heading content.
@@ -26,13 +26,17 @@ export class DuetPromoCard {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        this.hasPreHeadingSlot = !!this.element.querySelector('[slot="pre-heading"]');
-        this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
-        this.hasDescriptionSlot = !!this.element.querySelector('[slot="description"]');
-        this.hasActionSlot = !!this.element.querySelector('[slot="action"]');
+        this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
+        this.hasHeadingSlot = hasSlot(this.element, "heading");
+        this.hasDescriptionSlot = hasSlot(this.element, "description");
+        this.hasActionSlot = hasSlot(this.element, "action");
+        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "description", "span");
     }
     /**
-     * Sets focus on underlying a element when url attribute is used.
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
      */
     async setFocus(options) {
         if (this.url && this.aOrDivElement) {
@@ -53,7 +57,8 @@ export class DuetPromoCard {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
-            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "description", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
+                "duet-promo-card-link": !!this.url,
+            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "description" }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }
@@ -249,7 +254,7 @@ export class DuetPromoCard {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Sets focus on underlying a element when url attribute is used.",
+                    "text": "Sets focus on underlying a element.\nAvailable only when url attribute is used.\nUse this method instead of the native `focus()`.",
                     "tags": []
                 }
             }

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -3,7 +3,7 @@
  */
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 /**
  * @slot tooltip - Use to place a tooltip alongside the label.
@@ -72,6 +72,7 @@ export class DuetRadioGroup {
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
     }
     /**
      * Local methods.
@@ -115,7 +116,7 @@ export class DuetRadioGroup {
         if (Build.isServer) {
             return;
         }
-        return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip", onSlotchange: ev => slotElementCheck(ev, this, "duet-tooltip") }), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+        return (h(Host, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), h("div", { class: { "duet-radio-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
     }
     static get is() { return "duet-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,7 +4,7 @@
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 function isOptionGroup(item) {
     return "options" in item;
@@ -113,6 +113,7 @@ export class DuetSelect {
     componentWillLoad() {
         inheritGlobalTheme(this);
         this.isCaptionVisible = !!this.caption;
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         this.refresh();
     }
     /**
@@ -163,7 +164,7 @@ export class DuetSelect {
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, 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-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { name: "tooltip" }), this.caption && (h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
         }))), h("div", { class: {
                 "duet-select": true,

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

@@ -67,19 +67,19 @@
     width: 100%;
     height: 100%;
     visibility: hidden;
-    background: rgba(0, 41, 77, 0.6);
+    background: rgb(0, 41, 77);
     opacity: 0;
     transition: 600ms ease;
   }
   .duet-slideout .desktop-bg:not(.hidden) {
     visibility: visible;
-    opacity: 1;
+    opacity: 0.3;
     transition: 600ms ease;
   }
 }
 @media (min-width: 62em) {
   .duet-slideout.duet-theme-turva .desktop-bg {
-    background: rgba(23, 28, 58, 0.6);
+    background: rgb(23, 28, 58);
   }
 }
 .duet-slideout .dialog {

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

@@ -3,11 +3,11 @@
  */
 import { Build, h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
-import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { hasSlot } from "../../utils/slot-utils";
 import { Teleport } from "../../utils/teleport";
 import { getColorByName } from "../../utils/token-utils";
 /**

package/lib/collection/components/duet-slideout-panel/duet-slideout-panel.js

@@ -2,10 +2,10 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
-import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { FocusGuard } from "../../utils/focus-utils";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
+import { hasSlot } from "../../utils/slot-utils";
 import { getColorByName } from "../../utils/token-utils";
 /**
  * @slot sticky-header - Content will be fixed to the top of the modal when scrolling.

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

@@ -141,7 +141,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  background: rgba(0, 41, 77, 0.6);
+  background: rgb(0, 41, 77);
+  opacity: 0.3;
 }
 @media (min-width: 62em) {
   .duet-submenu-bar .mobile-background {
@@ -159,7 +160,7 @@
   background: rgb(245, 245, 247);
 }
 .duet-submenu-bar.duet-theme-turva .mobile-background {
-  background: rgba(23, 28, 58, 0.6);
+  background: rgb(23, 28, 58);
 }
 .duet-submenu-bar.duet-theme-turva .shadow-container .top-shadow {
   box-shadow: 0 2px 6px 0 rgba(23, 28, 58, 0.07);

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

@@ -5,7 +5,7 @@ import { Build, h, Host, } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue } from "../../utils/input-utils";
-import { slotElementCheck } from "../../utils/slot-utils";
+import { checkNamedSlotElement } from "../../utils/slot-utils";
 const CharacterCount = ({ value, maxlength, label, theme }) => {
     if (maxlength == null) {
         return;
@@ -130,6 +130,7 @@ export class DuetTextarea {
         inheritGlobalTheme(this);
         this.disallowedPatternChange();
         this.isCaptionVisible = !!this.caption;
+        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
         if (this.counter && this.maxlength == null) {
             console.warn("[DUET WARNING]: counter will only take effect if maxlength is set");
         }
@@ -166,7 +167,7 @@ export class DuetTextarea {
                 "duet-label-hidden": this.labelHidden,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-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", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
+            } }, h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-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", theme: this.theme === "turva" ? "turva" : "default" }, this.caption)), h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy ? `${this.labelId} ${this.accessibleLabelledBy}` : this.labelId, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), h("duet-grid", { alignment: "stretch" }, h("duet-grid-item", { margin: "none", fill: true }, h("div", { class: "duet-textarea-help", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", null, this.error))), h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))), this.counter && (h("duet-visually-hidden", { class: "duet-visually-hidden", id: this.characterCountId, ref: el => {
                 this.hiddenCounterLabel = el;
             } })))));
     }

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

@@ -5,23 +5,74 @@ import { formatViolations, options as axeRunOptions, testWithAxe } from "../../u
 describe("[a11y] duet-toolbar", () => {
     it("should render an accessible component", async () => {
         const result = await testWithAxe(`
-        <duet-toolbar>
+        <duet-toolbar accessible-label="Secondary">
           <div slot="left">
-            <duet-toolbar-link active>Henkilöasiakkaat</duet-toolbar-link>
-            <duet-toolbar-link href="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-link>
-            <duet-toolbar-dropdown icon="navigation-language">
-              <span slot="label">Yhtiöryhmä</span>
-              <duet-toolbar-dropdown-link>Valinta</duet-toolbar-dropdown-link>
-              <duet-toolbar-dropdown-link>Valinta</duet-toolbar-dropdown-link>
-            </duet-toolbar-dropdown>
+            <duet-toolbar-item url="#henkiloasiakkaat" active>Henkilöasiakkaat</duet-toolbar-item>
+            <duet-toolbar-item url="#yritysasiakkaat">Yritysasiakkaat</duet-toolbar-item>
+            <duet-toolbar-item url="#maatila-asiakkaat">Maatila-asiakkaat</duet-toolbar-item>
+            <duet-toolbar-item leading-icon="navigation-language" id="toolbar-item-yhtioryhma">Yhtiöryhmä</duet-toolbar-item>
+            <duet-popup-menu controller="toolbar-item-yhtioryhma" accessible-role="list" skip-teleport>
+              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem">Valinta</duet-popup-menu-item>
+            </duet-popup-menu>
           </div>
           <div slot="right">
-            <duet-toolbar-link id="search" href="#search" icon="form-search">Hae</duet-toolbar-link>
-            <duet-toolbar-dropdown icon="navigation-language">
-              <span slot="label">FI</span>
-              <duet-toolbar-dropdown-link active>Suomeksi</duet-toolbar-dropdown-link>
-              <duet-toolbar-dropdown-link>På Svenska</duet-toolbar-dropdown-link>
-            </duet-toolbar-dropdown>
+            <duet-toolbar-item id="desktop-search-opener" url="#search" icon="form-search">Hae</duet-toolbar-item>
+            <duet-slideout opener="desktop-search-opener" accessible-role="generic">
+              <div slot="sticky-header">
+                <duet-grid alignment="center" style="gap: var(--space-small)">
+                  <duet-icon name="form-search" size="medium" margin="none"></duet-icon>
+                  <duet-heading visual-level="h3" fixed-size margin="none">Haku</duet-heading>
+                </duet-grid>
+                <duet-spacer></duet-spacer>
+                <duet-input type="text" expand label="Haku" label-hidden clear="true"></duet-input>
+              </div>
+              <duet-spacer size="x-small"></duet-spacer>
+              <div>
+                <duet-heading level="h3" visual-level="h6">Usein haettua</duet-heading>
+                <div role="list">
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Autovakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Lapsiturva</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Rahastosäästäminen</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Henkivakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="navigation-arrow-right" leading-icon-color="primary" url="#" accessible-role="listitem">Varainhoito</duet-popup-menu-item>
+                </div>
+              </div>
+              <duet-divider></duet-divider>
+              <div>
+                <duet-heading level="h3" visual-level="h6" color="gray-darker">Ehdotetut haut</duet-heading>
+                <div role="list">
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>vakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem">sähkö<b>auto</b>n vakuutus</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>maattinen korvauskäsittely</duet-popup-menu-item>
+                  <duet-popup-menu-item leading-icon="form-search" leading-icon-color="primary" accessible-role="listitem"><b>auto</b>tie</duet-popup-menu-item>
+                </div>
+              </div>
+              <duet-spacer size="large"></duet-spacer>
+              <div>
+                <duet-heading level="h3" visual-level="h6" color="gray-darker">Hakutulokset termillä 'auto' (93)</duet-heading>
+                <ul style="list-style: none; padding: 0;">
+                  <li style="padding: var(--space-medium) 0;">
+                    <duet-button url="#" variation="plain" margin="none" padding="none" fixed>Autovakuutus</duet-button>
+                    <duet-paragraph margin="none">Halvin autovakuutus ei aina ole järkevin vaihtoehto. Suosittelemme vakuutusten sisällön vertailua ja huomioimaan erityisesti...</duet-paragraph>
+                    <duet-spacer size="xx-small"></duet-spacer>
+                    <duet-breadcrumbs variation="plain" color="gray-darker">
+                      <span><duet-breadcrumb icon="">Henkilöasiakas</duet-breadcrumb></span>
+                      <span><duet-breadcrumb >Vakuutukset</duet-breadcrumb></span>
+                      <span><duet-breadcrumb>Ajoneuvot</duet-breadcrumb></span>
+                      <span><duet-breadcrumb>Autovakuutus</duet-breadcrumb></span>
+                    </duet-breadcrumbs>
+                  </li>
+                </ul>
+              </div>
+            </duet-slideout>
+            <duet-toolbar-item accessible-label="Valitse kieli" leading-icon="navigation-language" id="toolbar-item-language">FI</duet-toolbar-item>
+            <duet-popup-menu controller="toolbar-item-language" accessible-role="list" skip-teleport>
+              <duet-popup-menu-item accessible-role="listitem" accessible-label="Vaihda kieli suomeksi" active>Suomeksi</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem" accessible-label="Byt språk till svenska" target-language="sv">På Svenska</duet-popup-menu-item>
+              <duet-popup-menu-item accessible-role="listitem" accessible-label="Change language to English" target-language="en">In English</duet-popup-menu-item>
+            </duet-popup-menu>
           </div>
         </duet-toolbar>
       `, axeRunOptions);

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

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

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

@@ -18,19 +18,6 @@ export class DuetToolbar {
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
-        const children = Array.from(this.element.children);
-        for (const child of children) {
-            if (child.getAttribute("slot") === "left") {
-                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");
-                }
-            }
-        }
     }
     /**
      * render() function

package/lib/collection/components/duet-toolbar-dropdown/duet-toolbar-dropdown.js

@@ -50,7 +50,7 @@ export class DuetToolbarDropdown {
             itemsAlign = this.element.parentElement.getAttribute("slot") === "left" ? "right" : "left";
         }
         const variation = this.variation === "negative" ? "negative" : "white";
-        return (h(Host, null, h("div", { class: {
+        return (h(Host, { role: "listitem" }, h("div", { class: {
                 "duet-toolbar-dropdown": true,
                 "duet-theme-turva": this.theme === "turva",
                 [itemsAlign]: true,

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

@@ -35,7 +35,7 @@ export class DuetToolbarDropdownLink {
                 "duet-toolbar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
-            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, href: this.href, lang: this.targetLanguage, hreflang: this.targetLanguage, role: "link menuitem", "aria-label": this.accessibleLabel, "aria-current": this.active ? "true" : "false", onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("span", { class: "label" }, h("slot", null)), this.active && (h("duet-icon", { name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-toolbar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-toolbar-item/duet-toolbar-item.css

@@ -0,0 +1,122 @@
+*,
+*::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-toolbar-item {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 16px;
+  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: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: rgb(0, 77, 128);
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.duet-toolbar-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-toolbar-item:focus, .duet-toolbar-item:focus.duet-theme-turva {
+  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+.duet-toolbar-item[aria-expanded=true] .trailing-icon.rotate {
+  transform: rotate(180deg);
+}
+.duet-toolbar-item.negative {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-item.negative duet-icon {
+  color: rgb(205, 229, 241);
+}
+.duet-toolbar-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";
+  color: rgb(23, 28, 58);
+}
+.duet-toolbar-item.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+}
+.duet-toolbar-item.duet-theme-turva.negative duet-icon {
+  color: rgb(244, 207, 214);
+}
+.duet-toolbar-item:hover {
+  color: rgb(0, 41, 77);
+  background: rgb(243, 249, 252);
+}
+.duet-toolbar-item:hover.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(0, 41, 77, 0.2);
+}
+.duet-toolbar-item:hover.duet-theme-turva {
+  color: rgb(23, 28, 58);
+  background: rgb(245, 245, 247);
+}
+.duet-toolbar-item:hover.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-item.active {
+  color: rgb(0, 41, 77);
+}
+.duet-toolbar-item.active.negative {
+  font-weight: 600;
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}
+.duet-toolbar-item.active.negative::after {
+  display: none;
+}
+.duet-toolbar-item.active::after {
+  position: absolute;
+  top: auto;
+  bottom: 1px;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 1px;
+  content: "";
+  background: rgb(0, 119, 179);
+  transition: 300ms ease;
+  transform: translateY(1px);
+}
+.duet-toolbar-item.active::after.duet-theme-turva {
+  background: rgb(198, 12, 48);
+}
+.duet-toolbar-item.active.duet-theme-turva {
+  color: rgb(23, 28, 58);
+}
+.duet-toolbar-item.active.duet-theme-turva::after {
+  background: rgb(198, 12, 48);
+}
+.duet-toolbar-item.active.duet-theme-turva.negative {
+  color: rgb(255, 255, 255);
+  background: rgba(23, 28, 58, 0.2);
+}