@duetds/components 9.8.0 → 9.9.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
@@ -32,6 +32,32 @@ export class DuetHero {
             }
             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}`;
+        };
         this.processedListItems = null;
         this.processedActions = null;
         this.processedBack = null;
@@ -158,7 +184,7 @@ export class DuetHero {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (h("div", { key: '1f3ac3d92ecbcce710c1b1b1a9d0b2871bc959da', role: "region", class: {
+        return (h("div", { key: '79a4748e197cb13d12426d31a773e80de0bf24d3', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -176,17 +202,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: 'cc2b5fc035028fcc794ebc4fed0e47dabf113d14', class: "background-area" }, h("div", { key: '877d4f3dbb1c55e57746583bd7222cfd36f85f19', class: "background-container" }, h("div", { key: '13f15b3bca9e43ce9f5eb6b6e09d4e1fe64eed0f', class: "background" }, h("img", { key: '78fdbfeef361e5738c92247d813d265217cab7c2', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '40d2607ed6cba7db994f26e29141aac3afa9a93e', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '94f7dc4bba3edfd18b4174f24adee009cfedc08f', class: { "background-area": true, [this.layout]: true } }, h("div", { key: 'd21b011ee9c6f31e0e62a05448b3451cc901a405', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '4bb1fbc995849a06011a753d187b050dd7c082d9', class: { background: true, [this.layout]: true } }, h("div", { key: 'f57332554b74dfc95610754c40a8917cf5ef150f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '60c4bdd140fe90cfd574875a0e5702d92f59816d', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '13a71f7719f4528fcc3dedfd223162bd44c31ace', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '7ed75e8fbc0244c6cbdcb80812d7397ce0eedcd9', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: 'e7f3c6c6da1826756b8fc7335dd7c34f60040e28', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '8d9c4885e88db588b6fb74a2c912750fce37eb29', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'f949a84adeb136052263e5315c12cf74db11f0b9', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: '3bbe9c16d041643fa4aab737aab1784a22ecedb7', class: "background-area" }, h("div", { key: '09cd70418a676ea606b35aeb695ca543f419349c', class: "background" }, h("div", { key: '238c817aad225e31a79cfc9c2b913e284f280c21', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '603dac6307834d67c9ff5838a6512b8d331c4d70', class: "brand-shape" }), h("div", { key: 'ca6013e79a7fa6592529e73f006f0a65d61da30d', class: "brand-shaped-image" }, h("div", { key: '2af6e66e338db1f59510d26140d6f22fbd4fc53a', class: "brand-shaped-image-wrapper" }, h("div", { key: 'd94d4375f19d9992e8376a209248af0d821d86a6', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '5bd169d99ec295465cd442414254a56c2b2aa556', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: '2ea4c3d50109f0295d2795cd1ba14da29222328f', class: "duet-hero-image-mask" }, h("div", { key: '18f68ef6e0bbd4d73ce1d3eab2e909d1fe569dde', class: "duet-hero-image-wrapper" }, h("div", { key: '7173fe4d9704f189673615c5877a9dc292e6e9eb', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (h("div", { key: '63f757c91f431dffdb8a18ca7629a7340997cfdc', class: "duet-hero-back" }, h("duet-button", { key: '709ec6ccebdb62de70ff4632ac20665ca3286da3', 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: 'd682d61c3df9ff5aa0de0d60f5360043c7758e8e', class: "background-area" }, h("div", { key: '24559b721dd84d83bfdf5c28de75fc4aa7f714b5', class: "background-container" }, h("div", { key: 'db0304babcbd6bc96f521ddc8cd2529664c319da', class: "background" }, h("img", { key: 'faaa1cca613a95730b7883037fe12284b911a613', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), h("div", { key: '57e0fc31ca863b81d650251fde4c07fda3a56c7f', class: "brand-shape" })))), this.variation === "product" && this.image && (h("div", { key: '488536b4435de480f283ba93edfdc067f354e930', class: { "background-area": true, [this.layout]: true } }, h("div", { key: '58c20ab7c59e1014941bdc4b0e7fdbe581440306', class: { "background-container": true, [this.layout]: true } }, h("div", { key: '40a410f02f66b9e818e9ed9561b2830c896fc1c2', class: { background: true, [this.layout]: true } }, h("div", { key: 'ce895485f02d4ea98e6cc1457c29e1f3a7784717', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && h("div", { key: '281423e9d6531f3fd4ebf10ae5ebfcda24951dda', class: { "brand-shape": true, [this.layout]: true } }), h("div", { key: '96fc11cb2ccc74f5be49046aa5b389efaf64364c', class: { "brand-shaped-image": true, [this.layout]: true } }, h("div", { key: '90f437b9b18699f75d3b34b99be94c2a4cf88f31', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, h("div", { key: '6488e9a8d054c1d5214656b8caa8f4e20e1750a0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (h("div", { key: '6fa35a25e4c381e482bbbae4a3df1f06047af480', class: { "brand-shaped-icon": true, [this.layout]: true } }, h("duet-icon", { key: 'bdfaedea4be098fadd96d9d929f1fae9457a7926', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (h("div", { key: 'be9171d3c2e7f1c23b4f7988b22a26fed5b1e8bf', class: "background-area" }, h("div", { key: '1235593c97fef5902b99463f035015aa23002b1a', class: "background" }, h("div", { key: '65a0b19616ca3b8fce3a15a59fc945eec54c47c8', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '1003348d17c085d5072314825e7c6fb8a2cc7225', class: "brand-shape" }), h("div", { key: '498d05da95f5fdd02bf997a337895dab086759b2', class: "brand-shaped-image" }, h("div", { key: '8d3045b9cd0ca613308ebff65fe0e2f6b4c855d4', class: "brand-shaped-image-wrapper" }, h("div", { key: '0badd67dee13a83376cf406d20dc01e145cb8845', class: "brand-shaped-image-bg", style: styles })))))), h("div", { key: '30393a3de1c35d957fcfef401369b7b5c4e68c6c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (h("div", { key: 'f52aad5ae7e746f762976a6e247acbe59bee3ed0', class: "duet-hero-image-mask" }, h("div", { key: '26414776eeb6190638bf7af2a34cfa44ee7064e8', class: "duet-hero-image-wrapper" }, h("div", { key: '6678fd20703ac787ba671cb52b5564518fc14c01', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (h("div", { key: '40d3d30290fde0ba4a40aaab524d91d9c135c400', class: "duet-hero-back" }, h("duet-button", { key: '06a523d3c85d28dd4b404ffeda16740bd63fc850', 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: '5ff479166e75d460f603ee928d959bddb4a44dce', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'ea705ceb8a51176d217265edd8a2f76f3a726806', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: 'b9d587e2e61f76270c94e8ef58562e8cfe0bfa24', 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: '2f6b898a9602d833c8d2cde11ba1287c51ba01d7', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '90e1e86e436e68c1a9410ca6743a2fd875ba276d', 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: '139eabc311c52d61f83ef865bb45dcb857e956c1', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '86a8736f020e2a5744cafb06820469980becd78d', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '182bde149927947501491d1b747d8da9b9c6dbde', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '769173505401a66b7c095d8bf89d2ecbe096d26c', 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: 'cd7db97f12cc48a175dd03da7eba2b20a5802fe9', 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: '743f4dd9f52dc86018e9a77423c2decda8db47ad' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: '7160eed21c1700d656830b87f020ae689540a176', 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: '4172031b2169f76ae476b5474766f7d50ff2df91', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { key: 'c83165c63592cac3465c2b44bf163395afcacebb', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { key: '064ff94f9208d86002b8448b496fda560ffe2b0b', 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: '60e82a0abcc9631399989fced2784d10cd6e834e', name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { key: '10caa898e02b7c90ed7e7eea6cda347825b0c843', 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", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { key: '0195c8e2fcb05b10b455d646765ba1cb4f003a60', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("slot", { key: '43fb22936307753456d1ae53f65b48876848420f', name: "subheading" }))), this.description && (h("duet-paragraph", { key: '898c23976b72cffc561de2c7c9322e03bdc1dadd', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { key: '1baa7faff302bc7fa568c1cd333404e07aaf29d1', 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: '2b4b7ae5046305afaf5495dd522a68d373577959', 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: '1b54ac8a84af82798438d73c7c1caf15bd5ae84d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { key: 'd3e6edd597ea5b83953430a92577762b560e6507', 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: 'b577acd6ebd8dd68e8cfd6bce02044114ead3dc4', class: "duet-hero-image", style: styles }), h("slot", { key: '064ceca16eab6353c44a273ebb766a544e085667', name: "bottom" }))));
+            this.variation !== "content" && h("div", { key: '0eaf81bc088fc984d9ee19de53cf09c6f46c5e83', class: "duet-hero-image", style: styles }), h("slot", { key: '884f6b4b0d44224a29b7ba5906e1a303052f532c', name: "bottom" }))));
     }
     static get is() { return "duet-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -127,14 +127,41 @@ duet-caption:not(:last-of-type) {
   opacity: 0.75;
   transition: none;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-xx-small button {
+  top: -12px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-x-small button {
+  top: -16px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.input-padding-small button {
+  top: -20px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single button {
   top: -48px;
   right: 0;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-xx-small button {
+  top: -36px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-x-small button {
+  top: -40px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-single.input-padding-small button {
+  top: -44px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double button {
   top: -24px;
   right: 12px;
 }
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-xx-small button {
+  top: -12px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-x-small button {
+  top: -16px;
+}
+.duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-double.input-padding-small button {
+  top: -20px;
+}
 .duet-input-container.has-clear .duet-input-clear-icon.duet-input-clear-icon-button button {
   top: -24px;
   right: 0;

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

@@ -464,6 +464,7 @@ export class DuetInput {
                 "duet-input-clear-icon-single": !hasInputIcon,
                 "duet-input-clear-icon-double": !!this.icon,
                 "duet-input-clear-icon-button": this.variation === "button",
+                [`input-padding-${this.inputPadding}`]: true,
             } }, h("button", { onClick: this.handleClearClick, id: this.clearId, "aria-label": this.clearLabel[this.language], "aria-keyshortcuts": "Escape" }, h("duet-icon", { margin: "none", size: "medium", name: "action-clear-input", color: "currentColor" })))), this.icon && this.variation !== "button" && (h("div", { class: "duet-input-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), this.variation === "button" && h("slot", { name: "button" }), this.variation === "revealable" && (h("duet-button", { ref: button => (this.togglePasswordRevealedButton = button), onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.togglePasswordRevealed, icon: this.isPasswordRevealed ? "action-hide" : "action-show", accessibleLabel: this.isPasswordRevealed
                 ? this.hidePasswordLabel[this.language]
                 : this.showPasswordLabel[this.language], margin: "none", variation: "input-button-embedded", fixed: true, iconOnly: true })), this.variation === "revealable" && this.isPasswordRevealed !== undefined && (h("duet-visually-hidden", null, h("span", { "aria-live": "polite" }, this.isPasswordRevealed

package/lib/collection/components/duet-phone-input/duet-phone-input.js

@@ -145,7 +145,8 @@ export class DuetPhoneInput {
         return (_a = this.duetInputElement.value) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "");
     }
     set value(val) {
-        this._value = val;
+        this.duetInputElement.value = val;
+        this.handleInput();
     }
     /**
      * This is a proxy for the enclosed native inputs validity
@@ -236,7 +237,7 @@ export class DuetPhoneInput {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-spacer", { size: "x-small" }), h("duet-divider", { margin: "small" }))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, value: this._value, error: this.error, name: this.name, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.buttonAriaLabel[this.language], onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
+            } }, h("div", { class: "duet-phone-input-container" }, h("duet-popup-menu", { ref: el => (this.countryCodePopup = el), scrollLimit: 10, showFilterInput: true }, this.countriesToList.map(country => country.isoCode === lastListFirstCode ? (h(Fragment, null, h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")"))), h("duet-divider", null))) : (h("duet-popup-menu-item", { value: country.isoCode, onClick: this.handleCountryCodeSelectorSelect }, h("duet-grid", { alignment: "center" }, this.renderFlag(country.isoCode), h("span", null, country[this.language], " (+", country.telephoneCountryCode, ")")))))), h("duet-input", { ref: el => (this.duetInputElement = el), onDuetChange: this.handleChange, onDuetFocus: this.handleFocus, onDuetBlur: this.handleBlur, onDuetInput: this.handleInput, label: this.label, caption: this.caption, error: this.error, name: this.name, component: "phone", variation: "button-left", type: "tel", disallowPattern: "[^\\+0-9 ]", required: this.required, disabled: this.disabled, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true }, h("duet-button", { ref: el => (this.countryCodeButton = el), slot: "button-left", variation: "input-button-left-secondary", margin: "none", fixed: true, icon: "action-arrow-down-small", iconSize: "small", iconRight: true, accessibleLabel: this.buttonAriaLabel[this.language], onClick: this.handleCountryCodeSelectorOpen }, h("span", { class: "flag-container" }, this.getFlagForButton())), h("slot", { name: "tooltip" })))));
     }
     static get is() { return "duet-phone-input"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.css

@@ -61,4 +61,8 @@
 
 ::slotted(duet-notification) {
   max-width: 360px;
+}
+
+slot {
+  --divider-margin: var(--space-x-small, 8px);
 }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -302,12 +302,37 @@ export class DuetPopupMenu {
     get itemElements() {
         return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
+    getAllPrecedingMatchingSiblings(el, selector) {
+        const prev = el.previousElementSibling;
+        if (prev) {
+            const matches = this.getAllPrecedingMatchingSiblings(prev, selector);
+            if (prev === null || prev === void 0 ? void 0 : prev.matches(selector)) {
+                matches.push(prev);
+            }
+            return matches;
+        }
+        return [];
+    }
     get popupMenuStyleHeight() {
+        var _a;
         const selector = ":scope duet-popup-menu-item, :scope duet-notification";
         const elements = Array.from(this.element.querySelectorAll(selector));
-        if (elements.length > 0 && this.scrollLimit) {
+        // if we have filter, elements may be hidden
+        const visibleElements = elements.filter(el => el.style.display !== "none");
+        if (visibleElements.length > 0 && this.scrollLimit) {
+            // of the visible elements, we want to show at moist scrollLimit items
+            const itemsToShow = visibleElements.slice(0, this.scrollLimit - 1);
+            // use the actual heights of the items to show
+            const itemsToShowHeight = itemsToShow.reduce((acc, cur) => acc + cur.offsetHeight, 0);
+            // include possible filter input
+            const filterHeight = ((_a = this.filterInput) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            // include all dividers that preced the last item to show
+            // as their height with margins can not be easily captured, use magic number 17, 1px height + 2 * 8px margin
+            const lastItemToShow = itemsToShow[itemsToShow.length - 1];
+            const dividerHeight = this.getAllPrecedingMatchingSiblings(lastItemToShow, "duet-divider").length * 17;
+            // popup-menu has spaceXSmall top and bottom paddings
             const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${elements[0].offsetHeight * this.scrollLimit + paddings}px`;
+            return `${itemsToShowHeight + filterHeight + dividerHeight + paddings}px`;
         }
         else {
             return "auto";
@@ -330,17 +355,17 @@ export class DuetPopupMenu {
             overflowY: "auto",
             height: this.popupMenuStyleHeight,
         };
-        return (h(Host, { key: '3ec941a205dc0baffda4fb90920a6d66d1f03150' }, h("div", { key: '1574a9dae761cf5226d85299c98aad9cbe66c626', ref: element => {
+        return (h(Host, { key: 'b122068ff5f05a161926a7eeec8418fd258dc753' }, h("div", { key: '3ee437f9fce94ed063c132bb045aedf2714a4ccf', ref: element => {
                 this.menuElement = element;
             }, style: styles, class: {
                 open: this.open,
                 "duet-popup-menu-list": true,
                 "duet-theme-turva": this.theme === "turva",
                 "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: 'b64b46ed737e9f63979718a106501a188edd5486' }, h("duet-input", { key: 'aa21c8d65868a9c265304d01280b4cc49ba1e996', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: 'b7c8787de1caa71c2436375a96ce26101a864f60' }, h("span", { key: '5573f919752c222b3a99ff56416cb0a6b14e20d3', role: "status" }, `
+            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '73faa0c97cebf6cb99abae830cabcc06525b4b57' }, h("duet-input", { key: 'fa2d88575830d3dae9beb503dc7016e419a7cef0', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-visually-hidden", { key: '56c6e3412f75452b9da5bc8888405ce19289d7d1' }, h("span", { key: 'ad2a9bb358c92fb580f225a347f45f4bd2147e14', role: "status" }, `
                   ${this.filterResultCount}/${this.itemElements.length}
                   ${this.filterResultCountLabel[this.language]}
-                `)), h("duet-spacer", { key: '18b2e0894e1ac20362e94b913467ef8dd46d0176', size: "xx-small" }))), h("slot", { key: '6e3755fca95627759a2af50ddf4fa938c549ceed' }))));
+                `)), h("duet-spacer", { key: 'dfd8ee96c3234e6c1cfd6389fdbf30996dab3d0d', size: "xx-small" }))), h("slot", { key: 'adc7655a36b4009b4dc5cfcb9d83b73a2e0beb9e' }))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-share-chart/duet-share-chart.css

@@ -0,0 +1,78 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.duet-share-chart-horizontal-bar {
+  height: 16px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+.duet-share-chart-horizontal-bar .duet-share-chart-share {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 16px;
+  border-color: rgb(255, 255, 255);
+  border-style: solid;
+  border-width: 0 1px;
+}
+.duet-share-chart-horizontal-bar .duet-share-chart-share:first-child {
+  border-left-width: 0;
+  border-radius: 4px 0 0 4px;
+}
+.duet-share-chart-horizontal-bar .duet-share-chart-share:last-child {
+  border-right-width: 0;
+  border-radius: 0 4px 4px 0;
+}
+
+.duet-share-chart-item-list {
+  padding: 0 4px;
+  margin: 0;
+  list-style: none;
+}
+.duet-share-chart-item-list li {
+  display: flex;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: rgb(8, 42, 77);
+}
+.duet-share-chart-item-list li.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(23, 28, 58);
+}
+.duet-share-chart-item-list span {
+  display: inline-block;
+}
+.duet-share-chart-item-list .duet-share-chart-item-color {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-top: calc((1.5rem - 12px) / 2);
+  margin-right: 12px;
+  border-radius: 4px;
+}
+.duet-share-chart-item-list .duet-share-chart-item-value {
+  font-weight: 600;
+}

package/lib/collection/components/duet-share-chart/duet-share-chart.js

@@ -0,0 +1,137 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Build, h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
+import { getColorByName } from "../../utils/token-utils";
+export class DuetShareChart {
+    constructor() {
+        this.defaultColors = [
+            "lt-blue-800",
+            "lt-blue-600",
+            "success-600",
+            "success-800",
+            "warning-600",
+            "danger-600",
+            "danger-800",
+        ];
+        /**
+         * Local methods
+         */
+        this.colorPickCount = 0;
+        this.items = undefined;
+        this.theme = "";
+        this.unit = "%";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    connectedCallback() {
+        if (!Build.isServer) {
+            this.childObserver = new MutationObserver(this.updateChartItems.bind(this));
+            this.childObserver.observe(this.element, { childList: true });
+        }
+        this.updateChartItems();
+    }
+    disconnectedCallback() {
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
+        }
+    }
+    pickColor() {
+        const color = this.defaultColors[this.colorPickCount];
+        this.colorPickCount += 1;
+        if (this.colorPickCount > this.defaultColors.length - 1) {
+            this.colorPickCount = 0;
+        }
+        return color;
+    }
+    updateChartItems() {
+        const children = getElementsFromDefaultSlot(this.element).filter(el => el.tagName.toLocaleLowerCase() === "duet-share-chart-item");
+        this.items = children.map(child => ({
+            text: child.innerText,
+            value: child.value,
+            color: child.color || this.pickColor(),
+        }));
+        this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
+    }
+    render() {
+        return (h(Host, { key: '230ed44d6302403fc483392a556cdd6a994ece90' }, h("div", { key: '491a97e31835484f390449c35cd21720e06b6a7a', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items.map(item => (h("span", { class: "duet-share-chart-share", style: {
+                width: `${(item.value / this.itemsTotalValue) * 100}%`,
+                backgroundColor: getColorByName(item.color, this.theme),
+            } })))), h("ul", { key: '943e85740a3ece5878daa1138dfca90ee5798ab2', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", item.value, "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${(item.value / this.itemsTotalValue) * 100}%`)))))), h("slot", { key: '5c102cbf81beeb8b1c9f2a66508bd34d7547a2b5' })));
+    }
+    static get is() { return "duet-share-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-share-chart.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-share-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "unit": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The string to show after each items value. When using \"%\" the enclosed items' values should add up to 100."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "unit",
+                "reflect": false,
+                "defaultValue": "\"%\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {}
+        };
+    }
+    static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -0,0 +1,65 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+export class DuetShareChartItem {
+    constructor() {
+        this.value = 0;
+        this.color = undefined;
+    }
+    render() {
+        return (h(Host, { key: '1db343b4bc9ac0287de482ea0d609049a4645d8d' }, h("div", { key: 'e75250d63d27f9501799767cb42283f664f860ea', hidden: true }, h("slot", { key: 'd480ba557649e858697129546874bae17e47135d' }))));
+    }
+    static get is() { return "duet-share-chart-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the item."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color to use in the graph given as a Duet color token. If left out, the Share chart picks a color from a default set."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -96,7 +96,7 @@ export class DuetShowMore {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: 'cb5ee3dc6799544ca3143b393e56c1e071a2d665', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: '76e41c6973f3726aa33d00976cc63193eec441fc', class: { "slotted-content": true } }, h("slot", { key: '28428da989122f03a691452b9d9dfdad572a020f' }))), h("duet-button", { key: 'cb1b97b696381ce1ce411c164cfb4871a99453d0', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '3fd3eaa07a9d0d5b021a9c32c552801bee29986c' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: 'bc1f2d3525d4e5ce6b10770013aa6696822a71aa', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'b250102aac08de1604938717797afcfc7f28f624', class: { "slotted-content": true } }, h("slot", { key: '95f39f8e5abf0a79bf9f40cf34281013991cdd8b' }))), h("duet-button", { key: 'b07f00cb1d84ba412a711f7f1f37e7e3269e1984', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '33157363432909baaa57cb03d67c71c0de61b073' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-lang/duet-slideout-lang.js

@@ -35,7 +35,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '26940a9efe3228ad051940cfb903980d683cf614' }, h("div", { key: 'a031d990d2bf459e73678e682d1952e7225a67e7', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '7ff54cdd19c444cb9d8c8a67b5e563df53f13e0b', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '2c0a83341839a6953c176fd68882dbd05151948a' }))));
+        return (h(Host, { key: '848aaedd9e1c8ed6d539b69daef3a831af55b178' }, h("div", { key: '69695781b71a228e58973bd2673c7765582b6fcb', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '2305f5314bf1fb5c270d2a8eeb55f75382d2591a', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '2d7a718ac92ce21dd138e7fb71e27a02ac5ca1ae' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-slideout-link/duet-slideout-link.js

@@ -42,12 +42,12 @@ export class DuetSlideoutLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e58e7e022f359b763fff57c4794d9581204ae9f1' }, h("a", { key: 'b02485b104f43923bb51c25449ad782669da2a3f', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
+        return (h(Host, { key: '9c7e694f19f234e14ac86c900c0f7ae6f765f7ab' }, h("a", { key: 'ff3e3a23d2d1b3f56b0b994e7eeccb6f71b4c5be', target: !this.href ? null : this.external ? "_blank" : "_self", class: {
                 "duet-slideout-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'f2a699889f3e342915733dc322f5607d4dc1b381', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '67777983021ac91e35b68e9b8bdb6f0b56279107', class: "label" }, h("span", { key: 'd0ac662968dec767e9a095843f32f7dcea698190' }, h("span", { key: '1e75583ea91cbe3bf1ff4720f9b2d9efc96be742', class: "label-container" }, h("span", { key: 'c8be5ead58f8ae2669a818f2d552c91d2f95804f', class: "label-content" }, h("slot", { key: 'fd51bd2d2971917a7259abc816268bfa38cb439d' })), this.external && (h("duet-icon", { key: '7ef7af0a841d9241becd86c1364c89f6cae59c6a', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: 'fb1da47dfd02a661c7286b0c523a8c3ac5f83cf1', name: "description" })), this.caret && (h("duet-icon", { key: 'c4f51f17072cd66112993ed45421a5a8ccb59058', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (h("duet-icon", { key: 'f7528118eb9ac1331797c4e375e5373511ed2b5a', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), h("div", { key: '7ade705aba28a34b24d53a09ec067823b94c03d6', class: "label" }, h("span", { key: '84085ddeaa526502419641aefd0cd30106b89fe0' }, h("span", { key: '792db99a27189102d713db6351e724547297670f', class: "label-container" }, h("span", { key: '1416b4f044e1320c2f71a2db1b3839e21d482979', class: "label-content" }, h("slot", { key: '7f66789e0c27b6c09309f446179cdc8e5a6dfa6d' })), this.external && (h("duet-icon", { key: 'b1e870744e89431b43907f9ca6030a075af36be7', class: "external-icon", theme: this.theme, name: newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), h("slot", { key: '3dcd61fca8f725f97ea83d397d676ede325fb624', name: "description" })), this.caret && (h("duet-icon", { key: '4bcd014bb5cd4c1d1af3d42d113407b26bcad004', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     static get is() { return "duet-slideout-link"; }
     static get encapsulation() { return "shadow"; }