@duetds/components 10.0.0-alpha.9 → 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: '63b4e5c88c84b9d9f2756385a8329d9cdf9ed432', 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: '7308c0f8ee8b8f3f3b6742646e19c7cc9ebc386d', class: "background-area" }, h("div", { key: '42f2570dfc3db407843b308971a0b9583d8370d1', class: "background-container" }, h("div", { key: 'cf9659e75816459cdd07be75fadacd3eb951b57b', class: "background" }, h("img", { key: 'bb9f8bae3d91e6ea8615288d2a323152abef1c8c', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: 'b7f8dff983a801d6bd0b5ce16b37fa626a16fb60', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'ed2ce51f608ed6c30f0482a732cb42c02d91fff2', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '30b821b3c1465e3952a9d20f56041d6535e01d92', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '75e73af8d23bbce2665cf7e97e2bae67e2c1d660', class: { background: true, [this.layout]: true } }, h("div", { key: 'fbbdd723d68647bbb19b3d7782ce90a07de54e5c', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '728f6db97d9da029a9223a0525ec4e4663517865', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'dcb6c9996de17e488f750f5146a423697e0209b6', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '8d10206dbd89d0ab9fdba2254af3617d6b55810b', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '26f6ae5fb48ff56f805411af73a15e868bea7d83', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '6459840343b0c05c655f4250792258676f3188cb', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'fad5ee14265c2b87d398d498f18b37e50cb924bf', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'ba22c2bd04bf3f7d7e9753eadbdfb276411adf9d', class: "background-area" }, h("div", { key: '8e68dc0c716a2d1dc8e9c6de3e6506248024e799', class: "background" }, h("div", { key: '6f1b77b2c351d47b0c836e8656eed6393cddc9b5', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'cfac22c13517ea173ae995106428f649e8c7625e', class: "brand-shape" }), h("div", { key: '2091a16b26d2ff91ca500172c0d51c30d3da1ef3', class: "brand-shaped-image" }, h("div", { key: '7a6a4b05988f7a472ab776594a1159dd7a4f2856', class: "brand-shaped-image-wrapper" }, h("div", { key: 'f8373a6a25854f117998c940ad0c283e85535e00', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: 'a5fdd388a2d81acf720c3d1fbbfeede2e4f201c7', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '30bbabd5f178e1b41e6dc9ea466c626ceca746d0', class: "duet-hero-image-mask" }, h("div", { key: 'c24348fb6709b120f1a0c4fb6201ed0b9e2aed9d', class: "duet-hero-image-wrapper" }, h("div", { key: '043f9e0ea079a70676744da1181617dc44a705e5', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: 'e6b855e11691aa5581c0428a3a649161c5aa3168', class: "duet-hero-back" }, h("duet-button", { key: '292f04901b5190403debde732206929be6d458a6', 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: '1cc8b05acac3bd6e8487d6c48bbb914a34deb867', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'caca5aefc26eab33af2a9384542c788ec78b72c6', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'c6d5e43f63a8e0dcd4d5570b493964811cc25e27', 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: '8adeb791e73896fc5a01b86ba092ad99c262e32f', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '6fb8b87e602c6909a980d3f4c37b7d10712b4bae', 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: '5a3388cd2ff21953d6482e0032f66e56ffcbf15d', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: 'f1d4826017829edc73a61b334c7b7e7d2676d96b', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '4aa3dc4cf261fcb4b79b720dbc6293ff54543e78', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: 'b4254d8583e20eefe8b13d29d902a15854fed331', 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: 'cccfd73dd6f654ecc5ea228f80c46ef263d9ac4d', 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: 'e839c205b34d16811e3a2f4d3bebfdf0cd35e45d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'e0faabf7fbaad8ba835f2fce7a3ef4bb0c4bcb49', 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: 'dafb022c1c910b6af2ec930cf617d93696c98ef6', class: "duet-hero-image", style: styles }), h("slot", { key: '403dc2f45d1ac11f32c0dd88798f136277e8b7a7', 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\""
             }