@duetds/components 5.4.2 → 6.0.0

package/lib/cjs/duet-hero.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
 const commonStrings = require('./common-strings-de17f887.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
@@ -139,6 +139,7 @@ const DuetHero = class {
    */
   componentWillLoad() {
     themeableComponent.inheritGlobalTheme(this);
+    this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
     this.refresh();
   }
   /**
@@ -209,7 +210,7 @@ const DuetHero = class {
         href: this.processedBack.href,
         id: this.processedBack.id,
         analyticsId: this.processedBack.analyticsId,
-      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (index.h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), index.h("div", { class: "duet-hero-text" }, this.preHeading && (index.h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)), index.h("slot", { name: "badge" }), index.h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : index.h("slot", { name: "heading" })), this.description && (index.h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (index.h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (index.h("duet-list-item", null, index.h("span", { slot: "label" }, item.label), index.h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (index.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)), index.h("span", { class: "duet-hero-slot-unnamed" }, index.h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (index.h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (index.h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, index.h("div", { class: "duet-hero-action-icon" }, index.h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), index.h("span", null, item.label), item.external && index.h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (index.h("div", { class: "duet-hero-action-arrow" }, index.h("duet-icon", { icon: actionNewWindowSmall.actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image && this.variation !== "image" && index.h("div", { class: "duet-hero-image", style: styles }), index.h("slot", { name: "bottom" }))));
+      }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (index.h("duet-icon", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), index.h("div", { class: "duet-hero-text", part: "duet-hero-text" }, this.preHeading && (index.h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)), index.h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (index.h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : index.h("slot", { name: "heading" }))), this.description && (index.h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (index.h("duet-list", { theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (index.h("duet-list-item", null, index.h("span", { slot: "label" }, item.label), index.h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (index.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)), index.h("span", { class: "duet-hero-slot-unnamed" }, index.h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (index.h("div", { class: "duet-hero-links" }, this.processedActions.map(item => (index.h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, index.h("div", { class: "duet-hero-action-icon" }, index.h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), index.h("span", null, item.label), item.external && index.h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (index.h("div", { class: "duet-hero-action-arrow" }, index.h("duet-icon", { icon: actionNewWindowSmall.actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image && this.variation !== "image" && index.h("div", { class: "duet-hero-image", style: styles }), index.h("slot", { name: "bottom" }))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/lib/cjs/duet-icon.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const tokenUtils = require('./token-utils-fef5b4eb.js');
 require('./tokens.module-ef598645.js');

package/lib/cjs/duet-input_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const formSearch = require('./form-search-d61b2843.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-layout.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
 
 const duetLayoutCss = "*,*::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;display:block;flex:1 0 auto;width:100%}:host(.duet-middle){display:flex}:host(.duet-middle) .duet-layout{padding:36px 28px !important}@media (min-width: 36em){:host(.duet-middle) .duet-layout{padding:48px 36px !important}}@media (min-width: 62em){:host(.duet-middle) .duet-layout{padding:56px !important}}:host(.duet-ie){height:100%}:host(.duet-middle.duet-ie){height:auto}.duet-layout{position:relative;padding:0 16px;margin:48px auto 36px}@media (min-width: 36em){.duet-layout{margin-top:72px}}.duet-layout.duet-layout-has-top{margin-top:0}.duet-layout.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout.duet-center{display:flex;align-items:center;justify-content:center;width:100%;max-width:888px}@media (min-width: 36em){.duet-layout.duet-center{padding:0 48px}}@media (min-width: 48em){.duet-layout.duet-center{padding:0 72px}}@media (min-width: 62em){.duet-layout.duet-center{width:100%}}@media (min-width: 36em){.duet-layout{padding:0 28px}}@media (min-width: 62em){.duet-layout{display:flex;flex-direction:row;padding:0 56px;margin-bottom:48px}}@media (min-width: 76.25em){.duet-layout{max-width:1110px;padding:0}}.duet-main,.duet-sidebar,.duet-layout-top,.duet-layout-bottom{display:block;width:100%}.duet-layout-top{position:relative;display:block;width:100%;margin:72px auto 0}.duet-layout-top.duet-m-0{margin-top:0 !important;margin-bottom:0 !important}.duet-layout-top .duet-layout-top-wrapper{padding:0 20px;margin:0 auto}@media (min-width: 36em){.duet-layout-top .duet-layout-top-wrapper{padding:0 28px}}@media (min-width: 62em){.duet-layout-top .duet-layout-top-wrapper{padding:0 56px}}@media (min-width: 76.25em){.duet-layout-top .duet-layout-top-wrapper{max-width:1110px;padding:0}}.duet-center .duet-layout-top-wrapper{max-width:888px}@media (min-width: 36em){.duet-center .duet-layout-top-wrapper{padding:0 48px}}@media (min-width: 48em){.duet-center .duet-layout-top-wrapper{padding:0 72px}}@media (min-width: 62em){.duet-main{min-width:600px;margin:0 auto}.has-sidebar .duet-main{max-width:734px;margin-right:20px}}@media (min-width: 62em){.duet-sidebar{min-width:256px;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container{width:auto;max-width:356px}}@media (min-width: 62em){.duet-sidebar-container.has-tabs{margin-top:89px}}@media (min-width: 62em){.duet-sidebar-container.sticky{position:sticky}.duet-sidebar-container.sticky.with-links{top:calc(3rem + 20px)}.duet-sidebar-container.sticky.without-links{top:calc(4rem + 20px)}}";

package/lib/cjs/duet-list_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 

package/lib/cjs/duet-modal.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const bodyScrollLock_es6 = require('./bodyScrollLock.es6-6ef1142a.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const focusUtils = require('./focus-utils-9226aef7.js');
+const focusUtils = require('./focus-utils-fed98b6a.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 require('./string-utils-5cadd058.js');

package/lib/cjs/duet-notification_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const actionArrowDownSmall = require('./action-arrow-down-small-ef77a2d1.js');

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-pagination_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const jsUtils = require('./js-utils-134e0318.js');

package/lib/cjs/duet-progress.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');

package/lib/cjs/duet-radio_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const watchOptions = require('./watch-options-d88afac0.js');

package/lib/cjs/duet-range-slider.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const tokens_module = require('./tokens.module-ef598645.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-scrollable_3.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-select.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');

package/lib/cjs/duet-step_2.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-textarea.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const inputUtils = require('./input-utils-b5e8f524.js');

package/lib/cjs/duet-toggle.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 

package/lib/cjs/duet-tooltip.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');

package/lib/cjs/duet-tray.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const tokens_module = require('./tokens.module-ef598645.js');
 const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');

package/lib/cjs/duet-upload-aria-status.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 
 const DuetUploadAriaStatus = class {
   constructor(hostRef) {

package/lib/cjs/duet-visually-hidden.cjs.entry.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 
 const duetVisuallyHiddenCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;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}";
 

package/lib/cjs/duet.cjs.js

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

package/lib/cjs/{focus-utils-9226aef7.js → focus-utils-fed98b6a.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 
 const focusElement = (element) => {
   if ("setFocus" in element) {

package/lib/cjs/{index-60a8ec8a.js → index-b5a163e2.js}

@@ -24,7 +24,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.5.2"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"3.0.0"};
 
 let scopeId;
 let contentRef;

package/lib/cjs/loader.cjs.js

@@ -5,7 +5,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-60a8ec8a.js');
+const index = require('./index-b5a163e2.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

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

@@ -94,6 +94,13 @@ export class DuetFooter {
       this.handleClick(e);
       this.duetItemClick.emit(e);
     };
+    this.emitDuetEvent = (ev, data) => {
+      this.duetEvent.emit({
+        component: "duet-footer",
+        data,
+        originalEvent: ev,
+      });
+    };
   }
   /**
    * Component lifecycle events.
@@ -127,7 +134,7 @@ export class DuetFooter {
           this.variation !== "simple" && (h("duet-logo", { href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })),
           this.processedItems &&
             this.variation !== "simple" &&
-            this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item) },
+            this.processedItems.map(item => (h("a", { class: "duet-footer-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) },
               h("div", { class: "duet-footer-icon" },
                 h("duet-icon", { size: "medium", margin: "none", name: item.icon, color: "currentColor" })),
               h("span", null, item.label),
@@ -138,7 +145,7 @@ export class DuetFooter {
         h("slot", { name: "extra" }),
         h("p", { class: "duet-footer-menu", part: "menu" },
           h("span", { class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`),
-          h("div", { class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, null, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item) },
+          h("div", { class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, null, this.processedMenu.map(item => (h("a", { href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) },
             item.label,
             item.external && (h(Fragment, null,
               h("duet-visually-hidden", null,
@@ -458,6 +465,25 @@ export class DuetFooter {
           }
         }
       }
+    }, {
+      "method": "duetEvent",
+      "name": "duetEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "General event stream for the following events:\nitem: onMouseEnter, onTouchDown;\nmenuItem: onMouseEnter, onTouchDown;.\nYou can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
+      },
+      "complexType": {
+        "original": "DuetFooterChangeEvent",
+        "resolved": "{ component: \"duet-footer\"; data: DuetFooterItem | DuetFooterIconItem; originalEvent: Event; }",
+        "references": {
+          "DuetFooterChangeEvent": {
+            "location": "local"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{

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

@@ -330,6 +330,13 @@ export class DuetHeader {
         }, 300);
       }
     };
+    this.emitDuetEvent = (ev, data) => {
+      this.duetEvent.emit({
+        component: "duet-header",
+        data,
+        originalEvent: ev,
+      });
+    };
   }
   /**
    * Component lifecycle events.
@@ -589,7 +596,7 @@ export class DuetHeader {
                       !this.openMenu &&
                       item.items &&
                       !item.items.some(s => s.active === true)),
-                }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item) },
+                }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) },
                 item.label,
                 item.badge && h("div", { class: "duet-header-badge" })),
               item.items &&
@@ -607,7 +614,7 @@ export class DuetHeader {
                       secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
                           "duet-header-item": true,
                           active: thirdLevelItem.active === true,
-                        }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" },
+                        }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" },
                         thirdLevelItem.icon && (h("div", { class: "duet-header-icon" },
                           h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))),
                         h("span", null, thirdLevelItem.label),
@@ -644,7 +651,7 @@ export class DuetHeader {
               skipToLabel(),
               h("div", { class: "logo-and-segment" },
                 h("div", null, largeLogo()),
-                this.processedItems && (h(DuetHeaderDropdown, { id: segmentId, label: activeSegment.label, active: this.isSegmentOpen, isOpen: this.isSegmentOpen, badge: false, toggleRef: el => (this.segmentItemsButtonEl = el), itemsRef: el => (this.segmentItemsEl = el), onToggle: event => this.toggleMenu(event, "segment") }, this.processedItems.map(item => (h("a", { class: { active: activeSegment === item }, role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" },
+                this.processedItems && (h(DuetHeaderDropdown, { id: segmentId, label: activeSegment.label, active: this.isSegmentOpen, isOpen: this.isSegmentOpen, badge: false, toggleRef: el => (this.segmentItemsButtonEl = el), itemsRef: el => (this.segmentItemsEl = el), onToggle: event => this.toggleMenu(event, "segment") }, this.processedItems.map(item => (h("a", { class: { active: activeSegment === item }, role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item), target: item.external ? "_blank" : "_self" },
                   item.icon && (h("div", { class: "duet-header-icon" },
                     h("duet-icon", { margin: "none", size: "x-small", name: item.icon, color: "currentColor" }))),
                   h("span", null, item.label),
@@ -655,7 +662,7 @@ export class DuetHeader {
                   .map((secondLevelItem, secondLevelItemIndex) => {
                   const id = secondLevelItem.id || `segment-item-${secondLevelItemIndex}`;
                   return (h(DuetHeaderDropdown, { id: id, label: secondLevelItem.label, active: (!this.openMenu && secondLevelItem.active === true) || this.openMenu === id, isOpen: this.openMenu === id, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id) }, secondLevelItem.items &&
-                    secondLevelItem.items.map(thirdLevelItem => (h("a", { class: { active: thirdLevelItem.active }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" },
+                    secondLevelItem.items.map(thirdLevelItem => (h("a", { class: { active: thirdLevelItem.active }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), onMouseEnter: event => this.emitDuetEvent(event, thirdLevelItem), onTouchStart: event => this.emitDuetEvent(event, thirdLevelItem), target: thirdLevelItem.external ? "_blank" : "_self" },
                       thirdLevelItem.icon && (h("div", { class: "duet-header-icon" },
                         h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))),
                       h("span", null, thirdLevelItem.label),
@@ -1338,6 +1345,25 @@ export class DuetHeader {
           }
         }
       }
+    }, {
+      "method": "duetEvent",
+      "name": "duetEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "General event stream for the following events:\nitem: onMouseEnter, onTouchDown;\nmenuItem: onMouseEnter, onTouchDown;.\nYou can prevent\nthe default browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via\n**event.detail.data**."
+      },
+      "complexType": {
+        "original": "DuetHeaderChangeEvent",
+        "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+        "references": {
+          "DuetHeaderChangeEvent": {
+            "location": "local"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "closeMenus": {

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

@@ -237,6 +237,10 @@
 .duet-heading.h6.duet-heading-border {
   padding-bottom: 16px;
 }
+.duet-heading.duet-normal, .duet-heading.duet-theme-turva.duet-normal {
+  font-style: normal !important;
+  font-weight: 400 !important;
+}
 .duet-heading.duet-semibold, .duet-heading.duet-theme-turva.duet-semibold {
   font-style: normal !important;
   font-weight: 600 !important;

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

@@ -20,7 +20,7 @@ export class DuetHeading {
      */
     this.border = false;
     /**
-     * This property allows you to set semibold font weight for all sizes
+     * This property allows you to set normal or semibold font weight for all sizes
      * when needed.
      */
     this.weight = "auto";
@@ -55,6 +55,7 @@ export class DuetHeading {
         "duet-heading": true,
         "duet-heading-border": this.border !== false,
         "duet-heading-border-solid": this.border === "solid",
+        "duet-normal": this.weight === "normal",
         "duet-semibold": this.weight === "semibold",
         "duet-heading-hyphenate": this.hyphenate,
         "duet-m-0": this.margin === "none",
@@ -163,7 +164,7 @@ export class DuetHeading {
       "mutable": false,
       "complexType": {
         "original": "DuetHeadingWeight",
-        "resolved": "\"auto\" | \"semibold\"",
+        "resolved": "\"auto\" | \"normal\" | \"semibold\"",
         "references": {
           "DuetHeadingWeight": {
             "location": "local"
@@ -174,7 +175,7 @@ export class DuetHeading {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "This property allows you to set semibold font weight for all sizes\nwhen needed."
+        "text": "This property allows you to set normal or semibold font weight for all sizes\nwhen needed."
       },
       "attribute": "weight",
       "reflect": false,

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

@@ -9,6 +9,7 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
+ * @part duet-hero-text - piercing selector for styling the hero text container
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
  * @slot bottom - This is a slot for content under the main hero content.
@@ -136,6 +137,7 @@ export class DuetHero {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
+    this.hasHeadingSlot = !!this.element.querySelector('[slot="heading"]');
     this.refresh();
   }
   /**
@@ -214,10 +216,10 @@ export class DuetHero {
               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" },
+        h("div", { class: "duet-hero-text", part: "duet-hero-text" },
           this.preHeading && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre" }, this.preHeading)),
           h("slot", { name: "badge" }),
-          h("duet-heading", { theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : h("slot", { name: "heading" })),
+          (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: this.variation === "default" ? "gray-lightest" : "", visualLevel: this.variation === "gray" || this.variation === "minimal" ? "h2" : "h1" }, this.heading ? this.heading : h("slot", { name: "heading" }))),
           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),