@duetds/components 6.7.1 → 6.8.1

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

@@ -1,6 +1,7 @@
 /*!
  * Built with Duet Design System
  */
+import chevronIcon from "@duetds/icons/lib/assets/action-arrow-right";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
@@ -11,6 +12,7 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
  */
 export class DuetLink {
   constructor() {
+    this.variation = "default";
     this.accessibleLabel = undefined;
     this.language = getLanguage();
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
@@ -20,6 +22,8 @@ export class DuetLink {
     this.url = "#";
     this.external = false;
     this.tabToLink = false;
+    this.icon = undefined;
+    this.padding = "auto";
   }
   /**
    * Component lifecycle events.
@@ -34,6 +38,12 @@ export class DuetLink {
   async setFocus(options) {
     this.nativeLink.focus(options);
   }
+  renderContent() {
+    return (h(Fragment, null, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: 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: "x-small", name: this.icon, margin: "none", color: "currentColor" }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -41,12 +51,18 @@ export class DuetLink {
   render() {
     // Notice that the external icon needs to be places right after the last word of the link.
     // This is why we use &nbps; to keep everything on the same line.
-    return (h(Host, null, h("a", { href: this.url, class: {
+    return (h(Host, { class: {
+        "duet-link-block": this.variation === "block",
+      } }, h("a", { href: this.url, class: {
         "duet-link": true,
         "duet-link-is-external": this.external,
+        "duet-link-has-icon": !!this.icon,
         "duet-tab-to-link": this.tabToLink,
         "duet-theme-turva": this.theme === "turva",
-      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, h("slot", null), Build.isBrowser && this.external && (h(Fragment, null, "\u00A0\u00A0", h("duet-visually-hidden", null, this.accessibleLabelExternal), "\u00A0", h("span", { class: "duet-link-external" }, "\u00A0", h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+        "duet-p-0": this.padding === "none",
+        [this.padding]: true,
+        [this.variation]: true,
+      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, 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"; }
@@ -63,6 +79,29 @@ export class DuetLink {
   }
   static get properties() {
     return {
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLinkVariation",
+          "resolved": "\"block\" | \"default\"",
+          "references": {
+            "DuetLinkVariation": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the link."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "accessibleLabel": {
         "type": "string",
         "mutable": false,
@@ -249,6 +288,51 @@ export class DuetLink {
         "attribute": "tab-to-link",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetIconName",
+          "resolved": "string",
+          "references": {
+            "DuetIconName": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon to display on the left side of the ink text. (only with variations other than \"default\")"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPadding",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetPadding": {
+              "location": "import",
+              "path": "../../common-types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the padding of the component (only with variations other than \"default\")"
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       }
     };
   }

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

@@ -58,6 +58,10 @@ export class DuetList {
       this.toggleClass(item, "duet-list-breakpoint-large", this.breakpoint === "large");
       // Create zebra striping if striped variation is used
       this.toggleClass(item, "duet-list-striped", this.variation === "striped");
+      // Create borders if bordered variation is used
+      this.toggleClass(item, "duet-list-bordered", this.variation === "bordered");
+      // Create inner borders if inner-bordered variation is used
+      this.toggleClass(item, "duet-list-inner-bordered", this.variation === "inner-bordered");
       // Finally apply turva theme if necessary
       this.toggleClass(item, "duet-theme-turva", this.theme === "turva");
     });
@@ -203,7 +207,7 @@ export class DuetList {
         "mutable": false,
         "complexType": {
           "original": "DuetListVariation",
-          "resolved": "\"default\" | \"striped\"",
+          "resolved": "\"bordered\" | \"default\" | \"inner-bordered\" | \"striped\"",
           "references": {
             "DuetListVariation": {
               "location": "local",

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

@@ -112,6 +112,30 @@
   background: rgb(245, 245, 247);
 }
 
+:host(.duet-list-bordered) {
+  border-block-start: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-bordered:last-child) {
+  border-block-end: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-bordered.duet-theme-turva) {
+  border-block-start: 1px solid rgb(228, 228, 230);
+}
+
+:host(.duet-list-bordered.duet-theme-turva:last-child) {
+  border-block-end: 1px solid rgb(228, 228, 230);
+}
+
+:host(.duet-list-inner-bordered:not(:last-child)) {
+  border-block-end: 1px solid rgb(225, 227, 230);
+}
+
+:host(.duet-list-inner-bordered.duet-theme-turva:not(:last-child)) {
+  border-block-end: 1px solid rgb(228, 228, 230);
+}
+
 :host(.duet-list-width-30) dt {
   flex-basis: 33%;
 }

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

@@ -157,7 +157,7 @@ slot[name=center] {
 }
 .duet-theme-turva slot[name=center] {
   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(148, 9, 37);
+  color: rgb(23, 28, 58);
 }
 
 slot[name=right] {
@@ -168,5 +168,5 @@ slot[name=right] {
 }
 .duet-theme-turva slot[name=right] {
   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(148, 9, 37);
+  color: rgb(23, 28, 58);
 }

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

@@ -23,7 +23,13 @@ export class DuetMenuBar {
       this.rightMoreVisible = this.container.scrollLeft !== this.container.scrollWidth - this.container.clientWidth;
     };
     this.scrollToActive = () => {
-      const active = this.element.querySelector("[active]");
+      const actives = this.element.querySelectorAll("[active]");
+      let active;
+      actives.forEach(a => {
+        if (a.active) {
+          active = a;
+        }
+      });
       if (active && active.offsetLeft) {
         if (active.offsetLeft > 50) {
           this.container.scrollLeft = active.offsetLeft - this.element.offsetWidth / 2 + active.offsetWidth / 2;

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

@@ -73,7 +73,7 @@ export class DuetMenuBarButton {
     return (h(Host, { 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", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
+      }, "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))));
   }
   static get is() { return "duet-menu-bar-button"; }
   static get encapsulation() { return "shadow"; }

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

@@ -45,7 +45,6 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  min-height: 5rem;
   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: 0.875rem;
@@ -121,7 +120,7 @@
 }
 .duet-menu-bar-dropdown.duet-theme-turva button {
   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(148, 9, 37);
+  color: rgb(23, 28, 58);
 }
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
   color: rgb(198, 12, 48);

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

@@ -1,10 +1,24 @@
 /*!
  * 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 DuetMenuBarDropdown {
   constructor() {
+    /**
+     * Own Properties.
+     */
+    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.onClick = () => {
       this.open = !this.open;
     };
@@ -19,6 +33,7 @@ export class DuetMenuBarDropdown {
           return "right";
       }
     };
+    this.iconSize = "x-small";
     this.accessibleLabel = undefined;
     this.theme = "";
     this.open = false;
@@ -36,6 +51,26 @@ export class DuetMenuBarDropdown {
   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 = [];
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -48,7 +83,7 @@ export class DuetMenuBarDropdown {
         [`duet-menu-bar-dropdown--slot-${this.getVariant()}`]: true,
       } }, h("button", { "aria-label": this.accessibleLabel, "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+      }, onClick: this.onClick }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
         hidden: !this.open,
       } }, h("slot", null)))));
@@ -145,6 +180,11 @@ export class DuetMenuBarDropdown {
       }
     };
   }
+  static get states() {
+    return {
+      "iconSize": {}
+    };
+  }
   static get elementRef() { return "element"; }
   static get listeners() {
     return [{

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

@@ -35,7 +35,7 @@ export class DuetMenuBarDropdownLink {
         "duet-menu-bar-dropdown-link": true,
         [`duet-menu-bar-dropdown-link--slot-${this.getVariant()}`]: true,
         "duet-theme-turva": this.theme === "turva",
-      }, href: this.href, role: "menuitem" }, this.icon && h("duet-icon", { name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("slot", null))));
+      }, href: this.href, role: "menuitem" }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: "x-small", margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-dropdown-link"; }
   static get encapsulation() { return "shadow"; }

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

@@ -60,7 +60,7 @@ export class DuetMenuBarLink {
         "duet-menu-bar-link": true,
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
-      }, href: this.href }, this.icon && h("duet-icon", { size: this.iconSize, name: this.icon, margin: "none" }), h("slot", null))));
+      }, href: this.href }, this.icon && (h("duet-icon", { theme: this.theme, size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-menu-bar-link"; }
   static get encapsulation() { return "shadow"; }

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

@@ -122,6 +122,9 @@
   width: 100%;
   padding: 36px 28px;
 }
+.duet-modal-body.duet-modal-gutter-none {
+  padding: 0 !important;
+}
 .duet-modal-body.duet-modal-gutter-small {
   padding: 36px 20px;
 }

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

@@ -50,6 +50,7 @@ export class DuetModal {
     this.size = "medium";
     this.accessibleDescribedBy = undefined;
     this.accessibleLabelledBy = undefined;
+    this.accessibleLabel = undefined;
     this.accessibleDetails = undefined;
     this.accessibleDescription = undefined;
     this.gutterSize = "medium";
@@ -167,23 +168,23 @@ export class DuetModal {
       iconColor = "primary-turva";
       closeColor = "secondary-turva";
     }
-    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy ? `${this.slotDefaultId} ${this.accessibleDescribedBy}` : this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+    return (h("div", { ref: modal => (this.modalEl = modal), "aria-label": this.accessibleLabel, "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
         "duet-modal-overlay": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-modal-active": this.open,
-      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { class: {
+      } }, h(FocusGuard, { moveFocusTo: this.buttonEl }), h("div", { ref: modalInner => (this.modalInnerEl = modalInner), class: {
         "duet-modal-inner": true,
         "duet-modal-large": this.size === "large",
-      }, role: "document", onClick: e => {
+      }, onClick: e => {
         if (this.closeOnBlur) {
-          this.closeModal(e);
-        }
-      } }, h("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
-        if (this.closeOnBlur) {
-          e.stopPropagation();
+          const source = e.target || e.srcElement;
+          if (source === this.modalInnerEl) {
+            this.closeModal(e);
+          }
         }
-      } }, h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
+      } }, h("div", { class: { "duet-modal": true, [this.size]: true } }, this.gutterSize !== "none" && h("duet-spacer", null), h("div", { class: "duet-modal-close" }, h("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h("div", { class: {
         "duet-modal-body": true,
+        "duet-modal-gutter-none": this.gutterSize === "none",
         "duet-modal-gutter-small": this.gutterSize === "small",
         "duet-modal-gutter-medium": this.gutterSize === "medium",
         "duet-modal-gutter-large": this.gutterSize === "large",
@@ -336,6 +337,23 @@ export class DuetModal {
         "attribute": "accessible-labelled-by",
         "reflect": false
       },
+      "accessibleLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "By default the heading is used as target for aria-labelledby, and it overrides this label.\nIf you wish to skip the heading, you must set this label."
+        },
+        "attribute": "accessible-label",
+        "reflect": false
+      },
       "accessibleDetails": {
         "type": "string",
         "mutable": false,
@@ -376,8 +394,8 @@ export class DuetModal {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "DuetModalSize",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "original": "DuetModalSize | \"none\"",
+          "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
           "references": {
             "DuetModalSize": {
               "location": "local",
@@ -389,7 +407,7 @@ export class DuetModal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Size of the modal window."
+          "text": "Size of the modal window's padding."
         },
         "attribute": "gutter-size",
         "reflect": false,

package/lib/collection/components/duet-page-heading/duet-page-heading.css

@@ -117,7 +117,7 @@
 .duet-page-heading .background .brand-shape {
   position: absolute;
   top: -157px;
-  right: -10%;
+  right: -20px;
   width: 185px;
   height: 185px;
   background: rgb(0, 119, 179);
@@ -128,15 +128,15 @@
 }
 @media (min-width: 48em) {
   .duet-page-heading .background .brand-shape {
-    top: -260px;
-    right: -5%;
+    top: -280px;
+    right: -40px;
     width: 325px;
     height: 325px;
   }
 }
 .duet-page-heading .background .brand-shape.second-shape {
   top: -182px;
-  right: 25%;
+  right: 100px;
   width: 207px;
   height: 207px;
   background: rgb(11, 114, 136);
@@ -145,6 +145,7 @@
 @media (min-width: 48em) {
   .duet-page-heading .background .brand-shape.second-shape {
     top: -325px;
+    right: 200px;
     width: 365px;
     height: 365px;
   }

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

@@ -78,6 +78,13 @@
   font-size: 1.5rem;
   font-weight: 800;
 }
+.duet-slideout-link .label {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
 
 slot[name=description]::slotted(*) {
   display: block;

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

@@ -31,7 +31,7 @@ export class DuetSlideoutLink {
         "duet-theme-turva": this.theme === "turva",
         active: this.active,
         [this.size]: true,
-      }, href: this.href, role: this.menuItem && "menuitem", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: this.menuItem && "currentColor", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && h("duet-icon", { name: "action-arrow-right", color: "primary", size: "x-small", margin: "none" }))));
+      }, href: this.href, role: this.menuItem && "menuitem", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": this.accessibleLabel }, this.icon && (h("duet-icon", { name: this.icon, color: this.menuItem && "currentColor", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { class: "label" }, h("span", null, h("slot", null), h("slot", { name: "description" })), this.caret && (h("duet-icon", { name: "action-arrow-right", color: "primary", size: "x-small", margin: "none" }))))));
   }
   static get is() { return "duet-slideout-link"; }
   static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class DuetSubmenuBar {
   render() {
     return (h(Host, null, h("div", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, role: "menubar" }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), h("div", { role: "menu", id: "menu", "aria-labelledby": "button", "aria-expanded": this.open ? "true" : "false", class: {
+      }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { role: "menu", id: "menu", "aria-labelledby": "button", "aria-expanded": this.open ? "true" : "false", class: {
         items: true,
         hidden: !this.open,
       } }, h("slot", null)))));

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

@@ -149,20 +149,20 @@
   color: rgb(23, 28, 58);
 }
 @media (min-width: 62em) {
-  .duet-submenu-bar-dropdown.duet-theme-turva button {
-    color: rgb(148, 9, 37);
-  }
   .duet-submenu-bar-dropdown.duet-theme-turva button:hover {
-    color: rgb(23, 28, 58);
     background: rgb(228, 228, 230);
   }
 }
-.duet-submenu-bar-dropdown.duet-theme-turva button.active {
-  color: rgb(198, 12, 48);
+@media (min-width: 62em) {
+  .duet-submenu-bar-dropdown.duet-theme-turva button.active {
+    color: rgb(148, 9, 37);
+  }
 }
 .duet-submenu-bar-dropdown.duet-theme-turva button.active::after {
-  background: rgb(198, 12, 48);
+  background: rgb(148, 9, 37);
 }
-.duet-submenu-bar-dropdown.duet-theme-turva .items {
-  background: rgb(245, 245, 247);
+@media (min-width: 62em) {
+  .duet-submenu-bar-dropdown.duet-theme-turva .items {
+    background: rgb(255, 255, 255);
+  }
 }

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

@@ -66,7 +66,7 @@ export class DuetSubmenuBarDropdown {
   render() {
     return (h(Host, null, h("div", { class: { "duet-submenu-bar-dropdown": true, "duet-theme-turva": this.theme === "turva", active: this.open } }, h("button", { "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
         active: this.open,
-      }, onClick: this.onClick }, this.icon && h("duet-icon", { name: this.icon, size: this.iconSize, margin: "none" }), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
+      }, onClick: this.onClick }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { class: "caret", theme: this.theme, name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" }))), h("div", { tabindex: "-1", role: "menu", id: "menu", "aria-labelledby": "button", class: {
         items: true,
         hidden: !this.open,
       } }, h("slot", null)))));

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

@@ -57,12 +57,12 @@
   }
   .duet-submenu-bar-dropdown-link:hover.duet-theme-turva {
     color: rgb(148, 9, 37);
-    background: rgb(228, 228, 230);
+    background: rgb(245, 245, 247);
   }
 }
 .duet-submenu-bar-dropdown-link.highlight {
   color: rgb(0, 119, 179);
 }
 .duet-submenu-bar-dropdown-link.highlight.duet-theme-turva {
-  color: rgb(198, 12, 48);
+  color: rgb(148, 9, 37);
 }

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

@@ -59,11 +59,6 @@
   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);
 }
-@media (min-width: 62em) {
-  .duet-submenu-bar-link.duet-theme-turva {
-    color: rgb(148, 9, 37);
-  }
-}
 @media (min-width: 62em) {
   .duet-submenu-bar-link:hover {
     color: rgb(0, 41, 77);

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

@@ -55,7 +55,7 @@ export class DuetSubmenuBarLink {
    * Always the last one in the class.
    */
   render() {
-    return (h(Host, null, h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && h("duet-icon", { name: this.icon, size: this.iconSize, margin: "none" }), h("slot", null))));
+    return (h(Host, null, h("a", { class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva" }, href: this.href, role: "menuitem" }, this.icon && (h("duet-icon", { theme: this.theme, name: this.icon, size: this.iconSize, margin: "none", color: "currentColor" })), h("slot", null))));
   }
   static get is() { return "duet-submenu-bar-link"; }
   static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tab-group/duet-tab-group.css

@@ -201,6 +201,7 @@
   width: auto;
   padding-right: 0;
   padding-left: 0;
+  margin-left: 0;
   border: 0;
   border-radius: 0;
   transition: none;

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

@@ -55,7 +55,7 @@ export class DuetTabGroup {
       return renderedTabs;
     };
     this.tabs = [];
-    this.selected = 0;
+    this.selected = undefined;
     this.theme = "";
     this.scrolls = false;
     this.collapses = true;

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

@@ -38,6 +38,17 @@ duet-table table {
   border-spacing: 0;
   border-collapse: separate;
 }
+duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead,
+duet-table.duet-table-hide-head-visually.duet-table-hide-head-visually thead * {
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
 duet-table.duet-theme-turva table {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }