@duetds/components 8.1.5 → 8.2.0

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

@@ -6,6 +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 { slotElementCheck } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 /**
  * @part duet-hero - piercing selector for styling the hero container
@@ -13,9 +14,9 @@ import { parsePossibleJSON } from "../../utils/string-utils";
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.
  * @slot bottom - This is a slot for content under the main hero content.
- * @slot pre-heading - This is a slot for pre-heading content inside the hero component.
- * @slot heading - This is a slot for heading content inside the hero component.
- * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations.
+ * @slot pre-heading - This is a slot for pre-heading content inside the hero component. Only usable with gray variation. Only span should be used in this slot.
+ * @slot heading - This is a slot for heading content inside the hero component. Only span should be used in this slot.
+ * @slot subheading - This is a slot for heading content inside the hero component. Only usable with campaign, section variations. Only span should be used in this slot.
  */
 export class DuetHero {
     constructor() {
@@ -178,7 +179,7 @@ export class DuetHero {
                 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", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("div", null, h("slot", { name: "pre-heading" }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { 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("div", null, h("slot", { name: "heading" }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("div", null, h("slot", { name: "subheading" })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { 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", { 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("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { 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", { class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), h("div", { class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (h("duet-paragraph", { margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium" }, this.preHeading ? (this.preHeading) : (h("span", null, h("slot", { name: "pre-heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), h("slot", { name: "badge" }), (this.heading || this.hasHeadingSlot) && (h("duet-heading", { 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", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), campaignOrSection && this.hasSubHeadingSlot && (h("duet-heading", { theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, h("span", null, h("slot", { name: "subheading", onSlotchange: ev => slotElementCheck(ev, this, "span") })))), this.description && (h("duet-paragraph", { theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (h("duet-list", { 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", { 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("span", { class: "duet-hero-slot-unnamed" }, h("slot", null))), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (h("div", { 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" &&

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

@@ -52,6 +52,7 @@
 .duet-icon {
   -webkit-user-select: none;
   user-select: none;
+  display: block;
   width: 100%;
   height: 100%;
   transform-origin: top center;

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

@@ -78,7 +78,7 @@ export class DuetIcon {
                 "duet-m-0": this.margin === "none",
                 "duet-icon-has-outline": !!this.outline,
                 "duet-icon-has-background": !!this.background,
-            } }, h("div", { "aria-hidden": "true", style: styles, class: {
+            } }, h("span", { "aria-hidden": "true", style: styles, class: {
                 "duet-icon": true,
                 [this.size]: true,
                 "duet-theme-turva": this.theme === "turva",

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

@@ -166,7 +166,7 @@
 }
 @media (max-width: 35.9375em) {
   .duet-modal.slide-up {
-    border-radius: 20px 20px 0 0;
+    border-radius: 16px 16px 0 0;
   }
 }
 .duet-modal.duet-modal-has-sticky-header {

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

@@ -4,6 +4,7 @@
 import { computePosition, flip, offset } from "@floating-ui/dom";
 import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { focusElement } from "../../utils/focus-utils";
 import { isArrowDownKey, isArrowUpKey, isEscapeKey, isTabKey } from "../../utils/keyboard-utils";
 import { Teleport } from "../../utils/teleport";
 export class DuetPopupMenu {
@@ -12,7 +13,7 @@ export class DuetPopupMenu {
             if (!this.controller) {
                 return;
             }
-            const coordinates = await computePosition(this.controller, this.element, {
+            const coordinates = await computePosition(this.controller, this.menuElement, {
                 middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
                 placement: this.placement,
                 strategy: this.position,
@@ -24,6 +25,7 @@ export class DuetPopupMenu {
         this.menuY = undefined;
         this.menuX = undefined;
         this.accessibleLabel = undefined;
+        this.accessibleRole = "menu";
         this.theme = "";
         this.controller = undefined;
         this.placement = "bottom-start";
@@ -81,7 +83,7 @@ export class DuetPopupMenu {
                     }
                 }
             }
-            if (isTabKey(evt)) {
+            if (isTabKey(evt) && this.accessibleRole === "menu") {
                 evt.preventDefault();
                 this.hide();
             }
@@ -105,7 +107,9 @@ export class DuetPopupMenu {
     async show() {
         this.open = true;
         this.teleport.go();
-        this.itemElements[0].setFocus();
+        if (this.accessibleRole === "menu") {
+            this.itemElements[0].setFocus();
+        }
         this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
         this.updatePlacement();
     }
@@ -115,7 +119,9 @@ export class DuetPopupMenu {
     async hide() {
         this.open = false;
         this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-        this.focusController();
+        if (this.accessibleRole === "menu") {
+            this.focusController();
+        }
         this.teleport.resume(200);
     }
     /**
@@ -131,16 +137,11 @@ export class DuetPopupMenu {
     }
     focusController() {
         if (this.controller) {
-            if ("setFocus" in this.controller) {
-                this.controller.setFocus();
-            }
-            else {
-                this.controller.focus();
-            }
+            focusElement(this.controller);
         }
     }
     get itemElements() {
-        return Array.from(this.element.querySelectorAll(":scope > duet-popup-menu-item"));
+        return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
     }
     async getFocusedItemIndex() {
         const items = this.itemElements;
@@ -156,7 +157,7 @@ export class DuetPopupMenu {
             top: `${this.menuY}px`,
             left: `${this.menuX}px`,
         };
-        return (h(Host, { class: this.position }, h("div", { style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: "menu", "aria-label": this.accessibleLabel }, h("slot", null))));
+        return (h(Host, { class: this.position }, h("div", { ref: element => (this.menuElement = element), style: positionStyles, class: { open: this.open, "duet-popup-menu-list": true, "duet-theme-turva": this.theme === "turva" }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, h("slot", null))));
     }
     static get is() { return "duet-popup-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -189,6 +190,24 @@ export class DuetPopupMenu {
                 "attribute": "accessible-label",
                 "reflect": false
             },
+            "accessibleRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"menu\" | \"list\"",
+                    "resolved": "\"list\" | \"menu\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible role."
+                },
+                "attribute": "accessible-role",
+                "reflect": false,
+                "defaultValue": "\"menu\""
+            },
             "theme": {
                 "type": "string",
                 "mutable": true,
@@ -217,12 +236,22 @@ export class DuetPopupMenu {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "HTMLElement | (HTMLElement & { setFocus(): void })",
-                    "resolved": "HTMLElement | HTMLElement & { setFocus(): void; }",
+                    "original": "HTMLElement & FocusableComponent & OpenerComponent",
+                    "resolved": "HTMLElement & FocusableComponent & OpenerComponent",
                     "references": {
                         "HTMLElement": {
                             "location": "global",
                             "id": "global::HTMLElement"
+                        },
+                        "FocusableComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::FocusableComponent"
+                        },
+                        "OpenerComponent": {
+                            "location": "import",
+                            "path": "../../common",
+                            "id": "src/common/index.ts::OpenerComponent"
                         }
                     }
                 },

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

@@ -26,6 +26,7 @@ export class DuetPopupMenuItem {
         };
         this.focus = false;
         this.accessibleLabel = undefined;
+        this.accessibleRole = "menuitem";
         this.theme = "";
         this.url = undefined;
         this.external = false;
@@ -61,7 +62,7 @@ export class DuetPopupMenuItem {
             active: this.active,
             "duet-theme-turva": this.theme === "turva",
         };
-        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: -1, onFocus: this.onFocus, onBlur: this.onBlur, role: "menuitem", "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+        return (h(Host, null, h(TagName, { ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "menuitem" ? -1 : 0, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"} ${this.accessibleRole}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { class: "duet-popup-menu-item-label" }, h("slot", null)), this.trailingIcon && (h("duet-icon", { name: this.trailingIcon, size: "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -94,6 +95,24 @@ export class DuetPopupMenuItem {
                 "attribute": "accessible-label",
                 "reflect": false
             },
+            "accessibleRole": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"menuitem\" | \"listitem\"",
+                    "resolved": "\"listitem\" | \"menuitem\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible role."
+                },
+                "attribute": "accessible-role",
+                "reflect": false,
+                "defaultValue": "\"menuitem\""
+            },
             "theme": {
                 "type": "string",
                 "mutable": true,

package/lib/collection/components/duet-promo-card/duet-promo-card.js

@@ -3,7 +3,14 @@
  */
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
+import { slotElementCheck } from "../../utils/slot-utils";
 import { getColorByName } from "../../utils/token-utils";
+/**
+ * @slot pre-heading - Slot for pre-heading content.
+ * @slot heading - Slot for heading content. Only span should be used in this slot.
+ * @slot description - Slot for description content. Only span should be used in this slot.
+ * @slot action - Slot for action button.
+ */
 export class DuetPromoCard {
     constructor() {
         this.theme = "";
@@ -38,7 +45,7 @@ export class DuetPromoCard {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
-            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper" }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("div", null, h("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("div", null, h("slot", { name: "description" }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { href: this.url, class: "content-wrapper" }, h("img", { class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { class: "content" }, this.hasPreHeadingSlot && (h("div", { class: "pre-heading" }, h("slot", { name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { class: "heading" }, h("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasDescriptionSlot && (h("div", { class: "description" }, h("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h("span", null, h("slot", { name: "description", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasActionSlot && (h("div", { class: "action" }, h("slot", { name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Build, h, Host } from "@stencil/core";
+import { Build, h, Host, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
@@ -27,14 +27,6 @@ export class DuetSlideout {
         };
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.hasStickyHeaderSlot = false;
-        this.handleBodyScrolling = () => {
-            if (this.displaying && this.open) {
-                disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
-            }
-            else {
-                enableBodyScroll(this.dialog);
-            }
-        };
         this.setOpenButton = (element) => {
             if (!element) {
                 return;
@@ -57,35 +49,11 @@ export class DuetSlideout {
         };
         this.toggleMenu = (e) => {
             this.open = !this.open;
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = this.open;
-            }
             this.duetSlideoutEvent.emit({
                 originalEvent: e,
                 data: { element: this.element, open: this.open },
                 component: "duet-slideout",
             });
-            if (this.open) {
-                const openPanel = this.getOpenPanel();
-                this.teleport.go(true);
-                if (openPanel) {
-                    openPanel.setFocus();
-                    this.handleBodyScrolling();
-                }
-                else {
-                    setTimeout(() => {
-                        this.closeButton.focus();
-                        this.handleBodyScrolling();
-                    }, 200);
-                }
-            }
-            else {
-                setTimeout(() => {
-                    focusElement(this.openButton);
-                    this.handleBodyScrolling();
-                    this.teleport.resume();
-                }, 200);
-            }
         };
         this.bgOnClick = (e) => {
             if (this.open) {
@@ -126,27 +94,9 @@ export class DuetSlideout {
         });
         this.mutationObserver.observe(this.element, { childList: true, attributeFilter: ["open"], subtree: true });
     }
-    componentDidRender() {
-        if (Build.isServer) {
-            return;
-        }
-        // intersection observer is here to observe when the dialog is actually visible and when its not
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-        }
-        this.intersectionObserver = new IntersectionObserver(entries => {
-            this.displaying = entries[0].isIntersecting;
-            this.handleBodyScrolling();
-        });
-        // this.dialog can't be observed before rendering because its not available yet
-        this.intersectionObserver.observe(this.dialog);
-    }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
         enableBodyScroll(this.dialog);
-        if (this.intersectionObserver) {
-            this.intersectionObserver.disconnect();
-        }
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
@@ -154,6 +104,31 @@ export class DuetSlideout {
             this.openButton.removeEventListener("click", this.openButtonEventListener);
         }
     }
+    handleOpenChange() {
+        if (this.openButton) {
+            this.openButton.accessibleExpanded = this.open;
+        }
+        if (this.open) {
+            const openPanel = this.getOpenPanel();
+            this.teleport.go(true);
+            disableBodyScroll(this.dialog, { reserveScrollBarGap: true });
+            if (openPanel) {
+                openPanel.setFocus();
+            }
+            else {
+                setTimeout(() => {
+                    this.closeButton.focus();
+                }, 200);
+            }
+        }
+        else {
+            setTimeout(() => {
+                focusElement(this.openButton);
+                enableBodyScroll(this.dialog);
+                this.teleport.resume();
+            }, 200);
+        }
+    }
     /**
      * Component event handling.
      */
@@ -456,6 +431,12 @@ export class DuetSlideout {
         };
     }
     static get elementRef() { return "element"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keyup",

package/lib/collection/utils/slot-utils.js

@@ -0,0 +1,16 @@
+/*!
+ * Built with Duet Design System
+ */
+export const slotElementCheck = (evt, component, requiredTagName) => {
+    var _a;
+    const slot = evt.target;
+    const slotDescription = slot.name ? `slot ${slot.name}` : "default slot";
+    const slotElement = slot.assignedElements()[0];
+    const slotTagName = slotElement === null || slotElement === void 0 ? void 0 : slotElement.tagName.toLowerCase();
+    const componentTagName = (_a = component.element) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase();
+    if (slotTagName && slotTagName !== requiredTagName) {
+        console.warn(`Duet warning:
+      Only <${requiredTagName}> should be used in <${componentTagName}> ${slotDescription}.
+      Found: <${slotTagName}>`);
+    }
+};

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-4d3e1b52.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-8371f4c9.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-4a55dff3.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-dbaac77a.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-1c7bd169.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-15d5aa46.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-banner.js

@@ -1,14 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-471a62cc.js';
+import { p as proxyCustomElement, H, h as h$1, d as Host } from './p-9e103db0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { h } from './p-62c7d9d4.js';
+import { s as slotElementCheck } from './p-bb24a019.js';
 import { p as parsePossibleJSON } from './p-0e052642.js';
-import { g as getColorByName } from './p-e078836c.js';
-import { d as defineCustomElement$4 } from './p-975a4689.js';
-import { d as defineCustomElement$3 } from './p-c493eecb.js';
-import { d as defineCustomElement$2 } from './p-fc6bb9ab.js';
+import { g as getColorByName } from './p-ef9c200e.js';
+import { d as defineCustomElement$3 } from './p-0aef3ad3.js';
+import { d as defineCustomElement$2 } from './p-188d76d4.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,
@@ -17,7 +17,7 @@ const DuetPicture = ({ img, sources }) => {
         h("img", Object.assign({}, img))));
 };
 
-const duetBannerCss = "*,*::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;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.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\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
+const duetBannerCss = "*,*::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;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-banner{display:grid;width:100%;height:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;text-align:left;border-radius:24px}.duet-banner.duet-p-0{padding:0 !important}.duet-banner.duet-m-0{margin:0 !important}.duet-banner .visual{position:relative;overflow:hidden;border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner .visual .image-container{position:relative;width:400px;height:400px;overflow:hidden;border-radius:20%;transform:rotate(7deg)}.duet-banner .visual .image{position:relative;top:20px;width:100%;height:100%;transform:rotate(-7deg);object-fit:cover}.duet-banner .visual .icon{position:absolute}.duet-banner .content{display:flex;flex-direction:column;gap:8px;padding:0 20px 36px}.duet-banner .content .description{hyphens:auto}.duet-banner .action{display:flex;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:flex-end;padding-top:16px}.duet-banner.small{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.small .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.small .visual .image-container{top:-130px;left:-40px}.duet-banner.small .visual .icon{bottom:30px;left:15px}.duet-banner.large{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.large .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.large .visual .image-container{top:-30px;left:-30px}.duet-banner.large .visual .image{top:-15px;left:30px}.duet-banner.large .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.large .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.large .action{flex-grow:0}.duet-banner.auto{grid-template-rows:335px 1fr;max-width:335px}.duet-banner.auto .visual{border-top-left-radius:24px;border-top-right-radius:24px}.duet-banner.auto .visual .image-container{top:-130px;left:-40px}.duet-banner.auto .visual .icon{bottom:30px;left:15px}@media (min-width: 62em){.duet-banner.auto{grid-template-rows:none;grid-template-columns:50% 50%;min-width:900px;max-width:1112px;height:320px;max-height:none}.duet-banner.auto .visual{border-top-left-radius:24px;border-bottom-left-radius:24px}.duet-banner.auto .visual .image-container{top:-30px;left:-30px}.duet-banner.auto .visual .image{top:-15px;left:30px}.duet-banner.auto .visual .icon{top:40px;bottom:auto;left:335px}.duet-banner.auto .content{align-items:flex-start;justify-content:center;padding:0 72px 0 0}.duet-banner.auto .action{flex-grow:0}}.duet-banner.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\"}.duet-banner.duet-theme-turva .visual .image-container{width:526px;height:456px;transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}.duet-banner.duet-theme-turva .visual .image{transform:none}.duet-banner.duet-theme-turva.small .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.small .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.small .visual .icon{bottom:15px}.duet-banner.duet-theme-turva.large .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.large .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.large .visual .icon{bottom:auto;left:295px}.duet-banner.duet-theme-turva.auto .visual .image-container{top:-164px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:15px}@media (min-width: 62em){.duet-banner.duet-theme-turva.auto .visual .image-container{top:-54.923px;left:-147px}.duet-banner.duet-theme-turva.auto .visual .image{top:0;left:0}.duet-banner.duet-theme-turva.auto .visual .icon{bottom:auto;left:295px}}";
 
 const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H {
     constructor() {
@@ -52,6 +52,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
     render() {
         const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-lighter" : this.backgroundColor;
         const backgroundColor = getColorByName(backgroundColorTemp, this.theme);
+        const color = getColorByName(this.textColor, this.theme);
         const bannerStyles = {
             backgroundColor,
         };
@@ -63,7 +64,7 @@ const DuetBanner$1 = /*@__PURE__*/ proxyCustomElement(class DuetBanner extends H
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.size]: true,
-            }, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h$1("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: "xx-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h$1("div", { class: "content" }, this.hasHeadingSlot && (h$1("div", { class: "heading" }, h$1("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h2", margin: "none", color: this.textColor }, h$1("div", null, h$1("slot", { name: "heading" }))))), this.hasDescriptionSlot && (h$1("div", { class: "description" }, h$1("duet-paragraph", { theme: this.theme, margin: "none", color: this.textColor }, h$1("div", null, h$1("slot", { name: "description" }))))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("slot", { name: "action" })))))));
+            }, style: bannerStyles }, h$1("div", { class: "visual" }, h$1("div", { class: "image-container" }, this.image && h$1(DuetPicture, Object.assign({}, pictureSource))), this.icon && (h$1("duet-icon", { theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: "xx-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" }))), h$1("div", { class: "content" }, this.hasHeadingSlot && (h$1("div", { class: "heading" }, h$1("duet-heading", { theme: this.theme, level: this.headingLevel, "visual-level": "h2", margin: "none", color: this.textColor }, h$1("span", null, h$1("slot", { name: "heading", onSlotchange: ev => slotElementCheck(ev, this, "span") }))))), this.hasDescriptionSlot && (h$1("div", { class: "description", style: { color } }, h$1("slot", { name: "description" }))), this.hasActionSlot && (h$1("div", { class: "action" }, h$1("slot", { name: "action" })))))));
     }
     get element() { return this; }
     static get style() { return duetBannerCss; }
@@ -84,7 +85,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["duet-banner", "duet-heading", "duet-icon", "duet-paragraph"];
+    const components = ["duet-banner", "duet-heading", "duet-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "duet-banner":
             if (!customElements.get(tagName)) {
@@ -92,16 +93,11 @@ function defineCustomElement$1() {
             }
             break;
         case "duet-heading":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "duet-paragraph":
+        case "duet-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/lib/dist-custom-elements/duet-breadcrumb.js

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-471a62cc.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-9e103db0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8f253845.js';
 import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './p-2e36d5bf.js';
-import { d as defineCustomElement$3 } from './p-c493eecb.js';
-import { d as defineCustomElement$2 } from './p-3158e24f.js';
+import { d as defineCustomElement$3 } from './p-188d76d4.js';
+import { d as defineCustomElement$2 } from './p-98aea896.js';
 
 var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
 

package/lib/dist-custom-elements/duet-breadcrumbs.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { p as proxyCustomElement, H, h, d as Host } from './p-471a62cc.js';
+import { p as proxyCustomElement, H, h, d as Host } from './p-9e103db0.js';
 import { i as inheritGlobalTheme } from './p-a58bd561.js';
 import { g as getLocaleString } from './p-2e36d5bf.js';
 

package/lib/dist-custom-elements/duet-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetButton$1, d as defineCustomElement$1 } from './p-6b977095.js';
+import { D as DuetButton$1, d as defineCustomElement$1 } from './p-d072d3f7.js';
 
 const DuetButton = DuetButton$1;
 const defineCustomElement = defineCustomElement$1;