@duetds/components 10.0.0-alpha.8 → 10.0.0

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,180 @@ 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, "subheading", "span");
+        checkNamedSlotElement(this.element, "heading", `span,${headings.join(",")}`);
+        // for subheadings h1 should not be used, hence slice(1)
+        checkNamedSlotElement(this.element, "subheading", `span, ${headings.slice(1).join(",")}`);
+        if (this.hasHeadingSlot && getElementsFromNamedSlot(this.element, "heading")[0].matches(headings.join(","))) {
+            this.hasHeadingSlotNative = true;
+        }
+        if (this.hasSubHeadingSlot && getElementsFromNamedSlot(this.element, "subheading")[0].matches(headings.join(","))) {
+            this.hasSubHeadingSlotNative = true;
+        }
         this.refresh();
     }
     connectedCallback() {
@@ -122,6 +242,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 +284,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '9317af6b554aff400e94924a85274578a2557f61', role: "region", class: {
+        return (h("div", { key: '83f74edd6dc5f778d2d1b5076cfe43e705f85b0c', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -173,20 +299,20 @@ export class DuetHero {
                 "duet-hero-content": this.variation === "content",
                 "duet-hero-gray-with-actions": !!this.processedActions,
                 "duet-hero-gray-with-back": !!this.processedBack,
-                "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
-                "duet-hero-left-align": this.leftAlign && !campaignOrSection,
+                "duet-hero-text-center": this.variation !== "product" && ((this.textCenter && !this.leftAlign) || campaignOrSection),
+                "duet-hero-left-align": this.variation === "product" || (this.leftAlign && !campaignOrSection),
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (h("div", { key: '8a7f16e42528d3f102b37ef4c6fd5d07b2c83b4c', class: "background-area" }, h("div", { key: 'd1bd227d800f0b6d13132e22c04fa4fcc5f5884f', class: "background-container" }, h("div", { key: 'edcf5211a0f78066a3bb20ed76a7c8c268f74032', class: "background" }, h("img", { key: 'b37a6029d1eb14065fedd721bc5cc9ea79e62e29', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '87315ae16f4aac41a8dc306e8a7dc1e6e451eefa', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '280069c149060c4276fad2af8a5155a76301d8c1', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '8578f05ed6a1510d5b5db627c99037e31e403104', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '58d63a2a2148f2af164e5744dc1096b5b26a7269', class: { background: true, [this.layout]: true } }, h("div", { key: '80a4935ed2027affcfbde3555f10aea44c872355', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: 'd4da7b7e5bc2a773b42beec24a023e35b2d90861', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '6b0b645f0b40c965d048bd5cf460df26548c6335', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'cd17bafddc2c380c4ee4d5a1d34501495bb7e63c', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'e19d97582c2fbf1413544dd50512b28088cea6c6', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '2f57d2fb8c42716d62a836c23113f3b3d0a103f5', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'e6ab45b59f5119dc8e256ddeec5c8a52228ad5a2', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '4f426ddcda2ff72f70e7e9a8c2c36876f8697054', class: "background-area" }, h("div", { key: '045515f210fb3301f83779319fd59bb819c8bc6f', class: "background" }, h("div", { key: 'da7ab6aa0276ce05e3397fa09d6f9a86237f6e98', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'da2a2a66d213946f3c214a6e268c6db5e28180f3', class: "brand-shape" }), h("div", { key: '490a965865cd3ad34843ecbc209118fbb93ae6fc', class: "brand-shaped-image" }, h("div", { key: '30f0436921fd2b3748881134549ec054b58a1f4d', class: "brand-shaped-image-wrapper" }, h("div", { key: '15a47788256b28814a21c05a4d52a13e43e87d00', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '51c084671f6673506b670ae53a5445a7b2deea38', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'c5b4f38228a1a3b2dd943ac52216bb8568e308d9', class: "duet-hero-image-mask" }, h("div", { key: '3a9b764eb6ffb0f803d4642dfa9ee0e0fad9e488', class: "duet-hero-image-wrapper" }, h("div", { key: 'b96dd4b896cca3fea04c453dec2a382a20f61637', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '4c63cc49cc014a447176dc789e16637ae440c74f', class: "duet-hero-back" }, h("duet-button", { key: 'b48dd641d53288bbe1f016296b4c22e7be8a4805', 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: '521aa62c72860b40c124e5e63a9feeba643b7cbd', class: "background-area" }, h("div", { key: '782240a27d1c267976cae1af8cd5d80b947ee927', class: "background-container" }, h("div", { key: '260e615d0be8309a04d6ed99ea82ddd1b40e23f5', class: "background" }, h("img", { key: '071db6447269f00e96627b2324376da03543aa56', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: this.imageAlt || "", role: this.imageAlt ? null : "presentation" })), h("div", { key: 'd5e85d158c189fb4db370560c22776fdf827ba89', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '9ad335dad1a6905faa9575aca5e9887a3af4b283', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '6fa490d420c613db01f91811355e3ebeae4e77bb', class: { "background-container": true, [this.layout]: true } }, h("div", { key: 'c66dc3607627eba702ceb8b11b0bb9ca2b1ff513', class: { background: true, [this.layout]: true } }, h("div", { key: '9adb1d3c25e38a84000c9345e2f727f71610cc83', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '7989b9a0e6925aa21c98d1a09290cfe48def3bc6', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'a1a77403fb035992dcbc2269b0e44deb3b2149e4', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '32c2a03bfff06faa0ef0228742a755fbd18eb3c8', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", Object.assign({ key: 'd2a492432fcbad0be95f151b39ef54a38264480f', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }, bgImgA11yAttrs)))), this.categoryIcon && (h("div", { key: '816e2370f16d7a57a5771608dc2ff0be31a2a5bd', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'db7bdb65058d36d415279b77d84f61a7905d8963', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'a53f217d32e35842410734bafc1dd9e1aebd7436', class: "background-area" }, h("div", { key: 'e7c92df4ee17a61764d4390e95abb9652f315238', class: "background" }, h("div", { key: '0917af8fdfea80a00c5463ea00619d87c949fb2b', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'd7b34b286d6548551596809aebd5e3e0e86a2b23', class: "brand-shape" }), h("div", { key: '93d18efb89d26ef7016f24bae45d16b876e8fcbb', class: "brand-shaped-image" }, h("div", { key: '0649f402b55830bed4bddbe83165d5022451f355', class: "brand-shaped-image-wrapper" }, h("div", Object.assign({ key: '7f23a64e335529b7fadaa5addd0a9c936feeca61', class: "brand-shaped-image-bg", style: styles }, bgImgA11yAttrs))))))), h("div", { key: '6ce72888621a5c553cd2d22cefe134c1b2776ab3', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'a335920dc484565b37c9b92e57b76c82de6f34fe', class: "duet-hero-image-mask" }, h("div", { key: '11894fd603fc66e3e3e056b92d3a1ba05de4c119', class: "duet-hero-image-wrapper" }, h("div", Object.assign({ key: 'b967cedc4ba79e686325ae9865a1fd325e246ae9', class: "duet-hero-image", style: styles }, bgImgA11yAttrs))))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '3badeba2fb74700d4589aae7f89f513cc61ca507', class: "duet-hero-back" }, h("duet-button", { key: '38ac7054f1e14472450d93ab4d7b9999e1e127b3', 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: '735ddee376a35065e1bb9ca8530a1c372a20f905', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'ca1731a19cb5a4ac1d17943345a1affb0152256a', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'ba949b71c511676296be9383ae234c6abd6a86c2', 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: '553bb258d5e205a1283bc39bc53cd336fb3519d8', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '32058dee96286892ae8eefae4a328a7aeea1323b', 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("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '0b1c4c0578a904559da018a5857e8f417d468ca0', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '6c6e069d4fd86dedb4af90d806a69cb6e87b116d', name: "subheading" }))), this.description && (h("duet-paragraph", { key: 'efb4742f9bc597dbf5f42db9e3b82e61544e2031', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '2f4be86967bec69f54bba697f35ebb9dbd7909dd', 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: '1d50ffb6aaf2c7d55f842ff25b75be397212ed58', 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: '3e6319dcb6ca36841431ca04853018e443deb32d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '74d002e92ca236ad9243aa5dac125a928dbc3d7b', 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: '504c6da20c08db1018c73f4be1d6664b295dbc13', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '5921d4626634c481d787254974edc6f77248be40', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '782b401509669bf5c8a0b499b198eee37210827d', 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: 'a5c47e67704e117cb3fd2061c0cc0010263a50a5', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '5f8fab67f0c4cbc1e1ff6eb5106cf7bf44fe69f8', 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: '7a74b425d7f28ef0c72197f0d320e4a027bf5e59', 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: '72120d0684e15b6209748081f8f08e0c812c6304', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '852cbdc35a5a225fbc0db04baa2c03c3e4e9acba', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '71a95fa08165da7281a48a6c16b58a0d8767a7f8', 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: '2def10787421e62f28dd67dd5f346b51b7304a11', 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: 'd2b6f98d3515f008b4136155be3508aafc29e449' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '249c74be9644bbf4df8f2397cfb46acfbd2a446f', 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: 'f40babfcd77edae3e43a8460abd259fdd4c2d77f', class: "duet-hero-image", style: styles }), h("slot", { key: '4d2b296e53af9bca933e171839ac9d871a08d2df', name: "bottom" }))));
+            this.variation !== "content" && h("div", Object.assign({ key: '555aa340678bde51378b5c4795d05a27ae311dc9', class: "duet-hero-image", style: styles }, bgImgA11yAttrs)), h("slot", { key: '5a1c2a49ce0cfa4c7b30ff87e3e48f0da2675d80', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -204,6 +330,7 @@ export class DuetHero {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -224,12 +351,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "heading": {
                 "type": "string",
+                "attribute": "heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,12 +371,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "preHeading": {
                 "type": "string",
+                "attribute": "pre-heading",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -264,12 +391,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pre-heading",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "level": {
                 "type": "string",
+                "attribute": "level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -290,12 +417,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",
@@ -316,12 +443,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",
@@ -336,12 +463,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -362,12 +489,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroIconSize",
@@ -388,12 +515,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",
@@ -408,12 +535,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",
@@ -434,12 +561,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",
@@ -460,12 +587,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",
@@ -480,12 +607,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -512,12 +639,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",
@@ -541,12 +668,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",
@@ -564,12 +691,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",
@@ -584,12 +711,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",
@@ -604,12 +731,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",
@@ -633,6 +760,7 @@ export class DuetHero {
             },
             "textCenter": {
                 "type": "boolean",
+                "attribute": "text-center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -647,12 +775,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",
@@ -667,12 +795,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",
@@ -687,12 +815,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\"",
@@ -707,12 +835,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\"",
@@ -727,12 +855,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",
@@ -753,12 +900,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "back": {
                 "type": "any",
+                "attribute": "back",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -773,11 +920,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "back",
                 "reflect": false
             },
             "listItems": {
                 "type": "any",
+                "attribute": "list-items",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -792,11 +939,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "list-items",
                 "reflect": false
             },
             "actions": {
                 "type": "any",
+                "attribute": "actions",
                 "mutable": false,
                 "complexType": {
                     "original": "any",
@@ -811,11 +958,11 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "actions",
                 "reflect": false
             },
             "layout": {
                 "type": "string",
+                "attribute": "layout",
                 "mutable": true,
                 "complexType": {
                     "original": "\"narrow\" | \"fluid\"",
@@ -830,7 +977,6 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "\"narrow\""
             }