@duetds/components 5.4.2 → 6.0.1

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-782371bf.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-782371bf.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-782371bf.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-782371bf.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

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

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

package/lib/cjs/{index-60a8ec8a.js → index-782371bf.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.1"};
 
 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-782371bf.js');
 const appGlobals = require('./app-globals-a032b236.js');
 
 /*

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

@@ -3,9 +3,11 @@
  */
 import { Component, Event, h, Host, Prop, State } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { createID } from "../../utils/create-id";
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetAlert {
   constructor() {
+    this.descriptiveId = createID("DuetAlert");
     /**
      * Theme of the card.
      */
@@ -85,7 +87,7 @@ export class DuetAlert {
   render() {
     const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
     const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
-    return (h(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined },
+    return (h(Host, { class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined },
       h("div", { class: {
           "duet-alert": true,
           "duet-alert-has-icon": !!this.icon,
@@ -98,10 +100,10 @@ export class DuetAlert {
         h("div", { class: "duet-alert-container" },
           this.icon && (h("div", { class: "duet-alert-icon" },
             h("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))),
-          h("span", null,
+          h("span", { id: this.descriptiveId },
             h("slot", null))),
         this.dismissible && (h("div", { class: "duet-alert-dismiss" },
-          h("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
+          h("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, accessibleDescribedBy: this.descriptiveId, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
   }
   static get is() { return "duet-alert"; }
   static get encapsulation() { return "shadow"; }

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

@@ -124,6 +124,11 @@
   border-radius: 4px;
   transition: background-color 150ms ease;
 }
+.duet-choice-label.has-before-text .duet-choice-card-icon,
+.duet-choice-label.has-before-text .duet-choice-card-text {
+  align-self: flex-start;
+  margin-top: 0.25rem;
+}
 .duet-choice-label > div:last-child {
   flex: 1;
   align-self: flex-start;

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

@@ -11,6 +11,8 @@ import { isEscapeKey, isKeyboardClick, isQuestionKey } from "../../utils/keyboar
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
+ * @slot label - Label content.
+ * @slot before-text - Content before text can be for example icons or images.
  * @slot info - Info content. Anything inserted into this slot is displayed in a collapsible info box.
  * @slot collapsible_header - header that is only added to collapsible element, this header should be used when the components collapsible area contains additional interactive elements (such as form items) and should be user for a short description of the content below it, it is mandatory for good accessibility to use this - and aria-decribe-by will point to it. If you use the collapsible area with simple text - describe-by will point to this area
  * @slot additional - Additional content. Anything inserted into this slot is displayed as additional content under the label and caption
@@ -205,6 +207,8 @@ export class DuetChoice {
     this.hasInfo = !!this.element.querySelector("[slot='info']");
     this.hasHeader = !!this.element.querySelector('[slot="header"]');
     this.hasAdditional = !!this.element.querySelector("[slot='additional']");
+    this.hasLabel = !!this.element.querySelector("[slot='label']");
+    this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
   }
   /**
    * Component event handling.
@@ -300,11 +304,12 @@ export class DuetChoice {
             "duet-p-0": this.padding === "none",
           } },
           h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.nativeInput = input) }),
-          h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering }, onClick: this.onClick },
+          h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick },
+            this.hasBeforeText && h("slot", { name: "before-text" }),
             this.icon && (h("div", { class: "duet-choice-card-icon" },
               h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))),
-            h("div", null,
-              h("div", null, this.label),
+            h("div", { class: "duet-choice-card-text" },
+              h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label),
               this.caption && (h("div", null,
                 h("duet-spacer", { size: "xx-small" }),
                 h("duet-caption", { margin: "none", selected: this.checked }, this.caption))),

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

@@ -4,6 +4,7 @@
 import { Build, Component, Element, h, Host, Prop, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
+const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice)";
 export class DuetChoiceGroup {
   constructor() {
     /**
@@ -49,6 +50,9 @@ export class DuetChoiceGroup {
      * makes sure that contents are stacked vertically on mobile.
      */
     this.responsive = false;
+    this.getChoices = () => {
+      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
+    };
     /**
      * Component event handling.
      */
@@ -74,7 +78,7 @@ export class DuetChoiceGroup {
     }
     const el = this.element;
     if (this.value === undefined) {
-      const choice = findCheckedOption(el, ":scope > duet-choice");
+      const choice = findCheckedOption(el, duetChoiceSelector);
       if (choice !== undefined) {
         await choice.componentOnReady();
         if (this.value === undefined) {
@@ -82,10 +86,13 @@ export class DuetChoiceGroup {
         }
       }
     }
-    this.mutationO = watchForOptions(el, ":scope > duet-choice", newOption => {
+    this.mutationO = watchForOptions(el, duetChoiceSelector, newOption => {
       if (newOption !== undefined) {
         newOption.componentOnReady().then(() => {
-          this.value = newOption.value;
+          const choices = this.getChoices();
+          if (choices.includes(newOption)) {
+            this.value = newOption.value;
+          }
         });
       }
       else {
@@ -114,7 +121,7 @@ export class DuetChoiceGroup {
      * Make sure we get all choices first so values are up to date prior
      * to caching the choice group value
      */
-    const choices = Array.from(this.element.querySelectorAll(":scope > duet-choice, :scope .duet-choice-group > duet-choice"));
+    const choices = this.getChoices();
     const { value } = this;
     let hasChecked = false;
     // Walk the DOM in reverse order, since the last selected one wins

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),