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

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() {
@@ -158,7 +277,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: 'e94f90e20a29e2d621f86ee213f6c2243d162445', role: "region", class: {
+        return (h("div", { key: 'fc3ecc930f72a824e8e8e488594714fe52f31fff', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -176,17 +295,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: 'a8cdeb3e0c17fed0de61ab1c84a5f8b4eb92d43f', class: "background-area" }, h("div", { key: 'c0e772e0eb58c3b59be2ef2441653d7d9355b7be', class: "background-container" }, h("div", { key: 'ff30622beb78548046143236845a8c6252dc4c40', class: "background" }, h("img", { key: '4ed685b3b1f5926867fcf8e53050a4f4dbe71060', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '8757c109c1ecbf249d31b7f3fdfe062e7cbcdf46', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: 'b6b734d21571cbe03adab7be1942caa351eb886e', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '5e6e459f153a9665bc8993789961ae5d23ff389e', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '593f8f68c2df59b1e6499eb6f59394dee782891e', class: { background: true, [this.layout]: true } }, h("div", { key: '49aaadfc675e5cc1cf528cfb3516577d3baa1c4f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '52d15566f49e4ee0d72ab9ec10f992d55291a2cd', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: 'a7275c16c76b667037cfe0044b21b11ce09bf413', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: 'a3522f3ed67befbb439ee07195e959180b3e01a1', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '3cb4ef66b9af1357e75318bc6f97e732e1787ce2', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: 'c15dfb764fe13d5766c3ad5e2b4bf012c739e257', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'd5f3d4a50473d2e2b56575de789e42c246c69987', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'c0ace6245e4431276a7e72a618b37f967d0b4bc5', class: "background-area" }, h("div", { key: 'cf04f88d15da106d8416d910835e07e87dd04bea', class: "background" }, h("div", { key: '0536ea5ec869a1ec253ab616a12485b01433982d', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'd7933f6c85dc709697ba451cf89cda8f7a9e3f03', class: "brand-shape" }), h("div", { key: 'c5fd0f3a99befd7d054303c9ebfd596989e7ccb8', class: "brand-shaped-image" }, h("div", { key: '96c71979b18e456b1a94fbb2bc1ae56bbf5cf318', class: "brand-shaped-image-wrapper" }, h("div", { key: 'acd8a1ce0a639e28970c6ca41b789bcfac03f9c7', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '8d08cf63aac9a03e1874b8cbfa4741ee1f1c4949', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '6da49938f8cf4c5038179fb9b48e0d8d5b8a521a', class: "duet-hero-image-mask" }, h("div", { key: '1682a488a00e1188d2be47d0aa895277f065adee', class: "duet-hero-image-wrapper" }, h("div", { key: '6fc100efe321915493d840f3fd2f01100fa954fd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '2777feaa8cc994cf4215d49143c69bee06d85552', class: "duet-hero-back" }, h("duet-button", { key: '57315d5cb34c6db55f6642224b442b12ebb7fe9a', 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: '282df2be20e350964563837a2344b4fd3fbd6812', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: '0a04e8f9ada19e0e157a52295248291e4ce30703', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '38897d3fc34f854e13e2675bc3c79005a7ba16b1', 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: 'c77b97021d7c7a735ce0aeba42fabce91d83da39', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: 'cd22335d7881e672e2df6367d58c734784ff5f6e', 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: 'ce92b7e2ce3f86fa082b8601dd070d5a76b27437', 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: 'f79855d9d88deba48f86e05f2318cf9459da6db0', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '9b3cefb7c435efb47e07a1501e18dee9db1b6b5b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '1c4915294fb3b2335ff981939207a961069d6b74', 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: 'ba2b9cded251cad0aea4ebd4c66d1fddf78bea38', 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: '0570f78ab10d749668c6dc20bb97db5896ce1039' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '647db5a0b2aa0416fd2a499bf168523b2f090e81', 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", { key: '32f36cc551b37aefb3a06403431479f4d4e7460d', class: "duet-hero-image", style: styles }), h("slot", { key: 'd53f84c8a9c995bb049ba25531b49b8119d40353', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }
@@ -204,6 +323,7 @@ export class DuetHero {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -224,12 +344,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 +359,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 +384,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 +410,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 +436,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 +456,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 +482,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 +508,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 +528,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 +554,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 +580,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 +600,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 +632,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 +661,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 +684,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 +704,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 +724,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 +753,7 @@ export class DuetHero {
             },
             "textCenter": {
                 "type": "boolean",
+                "attribute": "text-center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -650,12 +768,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 +788,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 +808,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 +828,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 +848,12 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image-position",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeroVariation",
@@ -756,12 +874,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 +894,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 +913,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 +932,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 +951,6 @@ export class DuetHero {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "layout",
                 "reflect": false,
                 "defaultValue": "\"narrow\""
             }