@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -6,7 +6,7 @@ import { h } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
+import { checkNamedSlotElement, getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -21,60 +21,179 @@ import { parsePossibleJSON } from "../../utils/string-utils";
 export class DuetHero {
     constructor() {
         /**
-         * Component event handling.
+         * State() variables
+         * Inlined decorator, alphabetical order.
          */
-        this.handleClick = (ev, data) => {
-            if (data && data.analytics) {
-                this.duetAnalytics.emit({
-                    component: "duet-hero",
-                    analyticsId: data.analytics,
-                });
-            }
-            this.emitChange(ev, data);
-        };
         this.processedListItems = null;
         this.processedActions = null;
         this.processedBack = null;
+        /**
+         * Theme of the hero area.
+         */
         this.theme = "";
+        /**
+         * The heading of the hero area, rendered in an H1 tag. P.S. you can control
+         * the level of the HTML heading by using “level” prop. If empty, heading
+         * will be hidden. There is also a heading slot that can be used.
+         */
         this.heading = "";
+        /**
+         * The headline shown before heading.
+         */
         this.preHeading = "";
+        /**
+         * The level of the heading.
+         */
         this.level = "h1";
+        /**
+         * The level of the heading. Only usable with campaign, section variations.
+         */
         this.subHeadingLevel = "h2";
+        /**
+         * The description of the hero area, rendered in a P tag. If empty, description
+         * will be hidden.
+         */
         this.description = "";
+        /**
+         * Icon to display to the left of the button content. If empty, icon will be hidden.
+         */
         this.icon = "";
+        /**
+         * Icon size for the button.
+         */
         this.iconSize = "medium";
+        /**
+         * Show icon on the right side of the button content.
+         */
         this.iconRight = false;
+        /**
+         * Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden.
+         */
         this.categoryIcon = "";
+        /**
+         * Icon color to use for the category icon that can be used in gray hero area variation.
+         */
         this.categoryIconColor = "category-pet";
+        /**
+         * Text label shown inside the button. If empty, button will be hidden.
+         */
         this.buttonLabel = "";
+        /**
+         * The currently active language. This setting changes the accessible labels to match the
+         * chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * URL that the button links to.
+         */
         this.buttonUrl = "#";
+        /**
+         * ID for the button.
+         */
         this.buttonId = "";
-        this.buttonData = undefined;
+        /**
+         * Centers the text in hero area.
+         */
         this.textCenter = false;
+        /**
+         * Forces all items in the header to be leftAligned
+         * This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices
+         * or allways leftAligned (you must manually switch this parameter if you need special breakpoints)
+         * this nullifies textCenter prop
+         */
         this.leftAlign = false;
+        /**
+         * URL of the image shown inside the hero area. For normal hero areas the width of the displayed image
+         * should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of
+         * Hero Area the required image size is 1200x1200px (1:1 ratio). If this
+         * property is left empty, image will be hidden.
+         */
         this.image = "";
+        /**
+         * Image sizing.
+         */
         this.imageSize = "auto";
+        /**
+         * Image position.
+         */
         this.imagePosition = "auto";
+        /**
+         * Style variation of the hero area.
+         */
         this.variation = "default";
-        this.back = undefined;
-        this.listItems = undefined;
-        this.actions = undefined;
+        /**
+         * Layout.
+         */
         this.layout = "narrow";
+        /**
+         * Component event handling.
+         */
+        this.handleClick = (ev, data) => {
+            if (data && data.analytics) {
+                this.duetAnalytics.emit({
+                    component: "duet-hero",
+                    analyticsId: data.analytics,
+                });
+            }
+            this.emitChange(ev, data);
+        };
+        this.getPreHeadingText = () => {
+            if (this.preHeading) {
+                return this.preHeading;
+            }
+            if (this.hasPreHeadingSlot) {
+                const slotContents = getElementsFromNamedSlot(this.element, "pre-heading");
+                return slotContents.map(s => s.textContent).join(" ");
+            }
+        };
+        this.getHeadingText = () => {
+            if (this.heading) {
+                return this.heading;
+            }
+            if (this.hasHeadingSlot) {
+                const slotContents = getElementsFromNamedSlot(this.element, "heading");
+                return slotContents.map(s => s.textContent).join(" ");
+            }
+        };
+        this.getAccessibleHeading = () => {
+            const preHeadingText = this.getPreHeadingText();
+            if (!preHeadingText) {
+                return null;
+            }
+            const headingText = this.getHeadingText();
+            return `${preHeadingText} ${headingText}`;
+        };
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
+        const headings = "h1, h2, h3, h4, h5, h6";
         inheritGlobalTheme(this);
         this.hasPreHeadingSlot = hasSlot(this.element, "pre-heading");
         this.hasHeadingSlot = hasSlot(this.element, "heading");
         this.hasSubHeadingSlot = hasSlot(this.element, "subheading");
         checkNamedSlotElement(this.element, "pre-heading", "span");
-        checkNamedSlotElement(this.element, "heading", "span");
+        checkNamedSlotElement(this.element, "heading", `span, ${headings}`);
         checkNamedSlotElement(this.element, "subheading", "span");
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings)) {
+            this.hasHeadingSlotNative = true;
+        }
+        if (this.hasSubHeadingSlot && getElementsFromNamedSlot(this.element, "subheading")[0].matches(headings)) {
+            this.hasSubHeadingSlotNative = true;
+        }
         this.refresh();
     }
     connectedCallback() {
@@ -122,6 +241,12 @@ export class DuetHero {
             backgroundSize: imageSizeIsCover ? "cover" : null,
             backgroundPosition: imagePositionIsCenter ? "center" : null,
         };
+        const bgImgA11yAttrs = this.image && this.imageAlt
+            ? {
+                role: "img",
+                ["aria-label"]: this.imageAlt,
+            }
+            : {};
         const buttonStyles = {
             transform: "translateX(-8px)",
         };
@@ -158,7 +283,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'e94f90e20a29e2d621f86ee213f6c2243d162445', role: "region", class: {
+        return (h("div", { key: 'a872538e09667dd29910e010ec8ccc159fc15193', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -176,17 +301,17 @@ export class DuetHero {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: 'd2805e8c50587b1d9429e1fb547cd6bd3c2f0caa', class: "background-area" }, h("div", { key: 'c9a3b0cf5625a51b6aa1e1f6ed724af21f849843', class: "background-container" }, h("div", { key: 'b8b95accc3dc9da76f14f281dc2ab4bc02313342', class: "background" }, h("img", { key: '41740e87fe1763274cc824723be0a18fde8f913d', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '324aca6d2bb6f53c9fdba4b3f47d43f354a3db9e', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'b31b3eb18d3a11bfbe0460ed69b8744732850bcd', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '97fc7ad7186b000694d126a1cb3689224c662fac', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '34a2a34d6ae23cdd9ff7b58359d63277c752c1d7', class: { background: true, [this.layout]: true } }, h("div", { key: 'fcd72c89b529c5fee2e7e8028fa190c7a915e79f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'cca68e8548c8cd174cc7cc8b7e63b2e53afb8aeb', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'd76e7b9ae4edc17cfe4fad1e251b84d5c85ba57a', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '183d07b9496cd97c0876f38952e5a00eb38bb027', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '109ae295f586d933c705f0fd68483683a1bf1952', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '01aa5b4d12e7da5eaa9fa2e15dcba0d5ed2ca690', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'e2f95e5602e26bd54c22573cf774a128121a9f86', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '1d19d92c16528ed5d12db36fe10f7def13671929', class: "background-area" }, h("div", { key: 'b1226899172307df0f7dfeaae3ce2c085e92c029', class: "background" }, h("div", { key: '441d8603995a0733a541e29ad09e972d0cb15ba6', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'f25ad10e9820803be974b2bcab9ae47b4548fb1c', class: "brand-shape" }), h("div", { key: '67daae3aa88aa2c7688d40fb2a01a31569043c1d', class: "brand-shaped-image" }, h("div", { key: '20e1761bbdcb1a8de0bb7ad849d89bb79274de29', class: "brand-shaped-image-wrapper" }, h("div", { key: '175dddd394e91859ed9acb84069a5f663de45784', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'e52f7ce7723142caca1199d63054b05aeb46b487', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c3c5e67c1673454493b6f87022b58fab436af214', class: "duet-hero-image-mask" }, h("div", { key: 'ccc3fada5d524e9b40252a8b4ae2eaa8fc83b2b4', class: "duet-hero-image-wrapper" }, h("div", { key: '8260b76e2982ce1ced990c617ed3eecaf6ebc02b', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'db59a2dc4d31b5d96938f5fe3388674c0c8e23a0', class: "duet-hero-back" }, h("duet-button", { key: '17b285351662cedc0ab18fb9c917456360c07875', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '5fce1acae0804c6aa76b81868cac88f4de370591', class: "background-area" }, h("div", { key: '26bc63e00bbe21bc2529a0a6b74b73df20d529c0', class: "background-container" }, h("div", { key: '89f29c709d599b57c3b3897291587bd4a572042a', class: "background" }, h("img", { key: '6b18c9f0c48c5ce6f552a8d10e587587872307c9', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'caaa93907f9d4a2f49f7b3f16b61dbbdbcd61c7c', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '763eaabf43c0bf0d6a18c070e393a03dca0d4238', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '9e62908d2cbff9a8ce2bd5434b07baf8828a9214', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '68716ca1d4bbb642c486676fa44b089e03c3426c', class: { background: true, [this.layout]: true } }, h("div", { key: '36e338bcd659d3fc9a2a326f9352f24956c43256', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '0dc480d5857ee243dc06ce057cc781529bcdb973', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '2d7de37e7d6f03f9e6c0d87dbe74a809531341bf', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'a80f4df7139b1dc0c164a6533aa742ee4a1df05e', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: '8507b8c3105846c34aebf25805475ceb753186e0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '890b16f5971cfa309d72560f7e74f8d9fc319f66', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'b0f2677fe1a4b696c44cbe9d3439ff62f2cbce4b', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '1e6981b9b8e33f2074418ccd073b295e6089e9ed', class: "background-area" }, h("div", { key: '5d80662daab0e2a82fe04cef22fd6810efcf8546', class: "background" }, h("div", { key: 'c1900e8ff166fda36b996ddbc3f440c629e9f035', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '138a86337de478e6349b92624f09e7a54cb0e931', class: "brand-shape" }), h("div", { key: '2bb8747411e19ad3dd8b3ac634dd0726e4183e0d', class: "brand-shaped-image" }, h("div", { key: '5e6c1579f9e9662a700d602582d3034a818b3693', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: 'd7209ba3a4242b87c9d447c73a2879dfbc7d9d06', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '21e9a6acecfc916399a76bf19e00835d28fe7c0a', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'da6ce766831a1d2a717fe419ec433aa1f91b03de', class: "duet-hero-image-mask" }, h("div", { key: '7cf7a7dc580dc783f9f5f50bcbf72d41b15eb378', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: 'd4ae32f29a59ee2f6430d31a34b8958f467155d4', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '6863cbe7678662d81cf79c318cb3b75de005f314', class: "duet-hero-back" }, h("duet-button", { key: '55e2dc9e3964c7dde235ddff6a95443997c99305', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: 'cd47afcdd3ad0b29ab77e4a6607d67912b7ad622', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '146703fafb1fc4dc9ea2f2d2fa046e9c5f6a83ca', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '2bac2c1aaefc60820bc76520f0b29b3b48436c75', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: '8b6cad2e6fca42922483e23dfca68f42d7089f5c', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '06038a734f66a0155cae26f98da0b4fcf2f9401a', theme: this.theme, level: this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto" }, this.heading ? (this.heading) : (h("span", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '6e179e7350e2c2507c1ff603b45e0b268da217ba', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", { key: '260ebb7f3ba965307c42633d1de47996c63171f1' }, h("slot", { key: '907759e2d96ebbb092071621861990327d37a9c2', name: "subheading" })))), this.description && (h("duet-paragraph", { key: '40dbf2c1f5b744b8e296ed56ff7510c144fa5e95', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '94d5c36f4e16c448afb625cab0aa6528b95f5fda', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: 'e63f1c64ddd9bc34028ff6a4453664b523332d20', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '07a78ea1daea8738a89cd4d238a094e7f073aafa' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '8891d77fc3cd9d49d6b087b6ff6a6b08e5836187', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (h("duet-icon", { key: '5f76b32e9c37115a665dba180113bfaf8d706e1b', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '3c5b2a7062ef0a22c8c78fc2bb5c4a0f4d5e351e', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'ffb0037467d7a1f483b3bd21fc274ec83e790f1a', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading" }))))), h("slot", { key: 'ccd809ffdd2d4fc7ac48632759b604b647add40e', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'bc6c130c314bf164c42fc8cb87fda199967c9237', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '963c8438ec6323eef745e2405dba51c660bf3437', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'c3de01174e3976af162c9cd8610bc5028bf94a2a', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '356d3bdf54e70df94df7588bddd1b11d4b506826', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '7368b837749d30ef0f82ab3c896bbbfc5407f797', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (h("duet-list-item", null, h("span", { slot: "label" }, item.label), h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (h("duet-button", { key: '9995622873298d66e258e9de20e03d7eed3ace16', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), h("slot", { key: '595b3c8c2b34fe4ce259d69876c3da3a1ef0e826' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '9b5bc347f7ae36979655a300f74943ac226f6516', class: "duet-hero-links" }, this.processedActions.map(item => (h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, h("div", { class: "duet-hero-action-icon" }, h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), h("span", null, item.label), item.external && h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (h("div", { class: "duet-hero-action-arrow" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && h("div", { key: '660cc6236529deef09e28fda903d13b7b46a82be', class: "duet-hero-image", style: styles }), h("slot", { key: '545f334b84334546dd98f2d1fa53f32f16858912', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '19a6e4b9ec23150728f38a1ddca45980bbf9deb0', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: 'df6fbc1b019210185ffefc3df52dcb8c197de8f3', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -204,6 +329,7 @@ export class DuetHero {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -224,12 +350,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -239,20 +365,17 @@ export class DuetHero {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "please use heading slot instead.\nThe heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading\nwill be hidden."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The heading of the hero area, rendered in an H1 tag. P.S. you can control\nthe level of the HTML heading by using \u201Clevel\u201D prop. If empty, heading\nwill be hidden. There is also a heading slot that can be used."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "preHeading": {
                 "type": "string",
+                "attribute": "pre-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -267,12 +390,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pre-heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "level": {
                 "type": "string",
+                "attribute": "level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -293,12 +416,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "level",
                 "reflect": false,
                 "defaultValue": "\"h1\""
             },
             "subHeadingLevel": {
                 "type": "string",
+                "attribute": "sub-heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -319,12 +442,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sub-heading-level",
                 "reflect": false,
                 "defaultValue": "\"h2\""
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -339,12 +462,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -365,12 +488,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroIconSize",
@@ -391,12 +514,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "iconRight": {
                 "type": "boolean",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -411,12 +534,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-right",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "categoryIcon": {
                 "type": "string",
+                "attribute": "category-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -437,12 +560,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "category-icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "categoryIconColor": {
                 "type": "string",
+                "attribute": "category-icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -463,12 +586,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "category-icon-color",
                 "reflect": false,
                 "defaultValue": "\"category-pet\""
             },
             "buttonLabel": {
                 "type": "string",
+                "attribute": "button-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -483,12 +606,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -515,12 +638,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "accessibleLabelExternalDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-external-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -544,12 +667,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelExternal": {
                 "type": "string",
+                "attribute": "accessible-label-external",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -567,12 +690,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-external",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
             },
             "buttonUrl": {
                 "type": "string",
+                "attribute": "button-url",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -587,12 +710,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-url",
                 "reflect": false,
                 "defaultValue": "\"#\""
             },
             "buttonId": {
                 "type": "string",
+                "attribute": "button-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -607,12 +730,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-id",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "buttonData": {
                 "type": "unknown",
+                "attribute": "button-data",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroButtonData",
@@ -636,6 +759,7 @@ export class DuetHero {
             },
             "textCenter": {
                 "type": "boolean",
+                "attribute": "text-center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -650,12 +774,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-center",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "leftAlign": {
                 "type": "boolean",
+                "attribute": "left-align",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -670,12 +794,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "left-align",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -690,12 +814,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "imageSize": {
                 "type": "string",
+                "attribute": "image-size",
                 "mutable": false,
                 "complexType": {
                     "original": "\"auto\" | \"cover\"",
@@ -710,12 +834,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image-size",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "imagePosition": {
                 "type": "string",
+                "attribute": "image-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"auto\" | \"center\"",
@@ -730,12 +854,31 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image-position",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroVariation",
@@ -756,12 +899,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "back": {
                 "type": "any",
+                "attribute": "back",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -776,11 +919,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "back",
                 "reflect": false
             },
             "listItems": {
                 "type": "any",
+                "attribute": "list-items",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -795,11 +938,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "list-items",
                 "reflect": false
             },
             "actions": {
                 "type": "any",
+                "attribute": "actions",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -814,11 +957,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "actions",
                 "reflect": false
             },
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": true,
                 "complexType": {
                     "original": "\"narrow\" | \"fluid\"",
@@ -833,7 +976,6 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "\"narrow\""
             }