@duetds/components 10.0.0-alpha.23 → 10.0.0-alpha.25

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -126,10 +126,10 @@ export class DuetNotificationDrawer {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '659136cc65a195a1de4228bd580d2368d2244a86', class: {
+        return (h("div", { key: '5a100874ee332b5f81a62d4d398273cfb1b039e6', class: {
                 "duet-drawer": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: this.handleKeyDown }, h("button", { key: 'abe8757b0f4db9939465b4ab6011c8625b5baf76', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'a99654516249d53e1a9fd81021998c2e461365a7', class: "duet-drawer-icon" }, h("duet-icon", { key: '76b8f2f443ab22637765dfef1db4000215ef5a19', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '6efbba81b7cf33402531b445e5e297d5e48a4fc6', class: "duet-drawer-badge" }))), h("span", { key: '5b9df974799ba860b7d2d964fc22c50d18aa0282', class: "duet-drawer-label" }, this.label), h("div", { key: 'ed02df2f85e017956770c841d1882b6a6ae45280', class: "duet-drawer-caret" }, h("duet-icon", { key: '646368ab0a187e896f1110e4015a05b3bad71a9d', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: '0e2cfc291004260d5f02350fd624396768c06b3b', id: "duet-drawer-content", class: {
+            }, onKeyDown: this.handleKeyDown }, h("button", { key: '277c6476693a7d387596fbfbfb23abc166faebc9', ref: el => (this.drawerButtonEl = el), type: "button", class: "duet-drawer-toggle", id: "duet-drawer-toggle", "aria-controls": "duet-drawer-content", "aria-expanded": this.isOpen ? "true" : "false", onClick: this.toggleMenu }, this.icon && (h("div", { key: 'd951e69affa0c3eb4ec008e8aeb89ec555e36206', class: "duet-drawer-icon" }, h("duet-icon", { key: '2aac18cf9ac8ef0f7294eba31290be645b8d6492', margin: "none", size: "x-small", name: this.icon, color: "currentColor" }), this.badge && h("div", { key: '58263ae4479e929348353d164fd036a8e822ba8d', class: "duet-drawer-badge" }))), h("span", { key: 'e046d2b1be747afa753163314d777aea3dd25eda', class: "duet-drawer-label" }, this.label), h("div", { key: '34cbbf033a8ac22acb04e995235df355a22c806d', class: "duet-drawer-caret" }, h("duet-icon", { key: '2b3c734862192aeaa3b8e7866a08000fd6e776d9', margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))), h("div", { key: 'c2f6ce8c30baba066a0eda032d3162638a24b0a6', id: "duet-drawer-content", class: {
                 "duet-drawer-content": true,
                 "duet-drawer-right": this.direction === "right",
                 "duet-drawer-left": this.direction === "left",

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

@@ -55,7 +55,8 @@ export class DuetNumberInput {
             sv: "{current} euro valt",
         };
         /**
-         * Format of message used to announce current amount when switching between amounts.
+         * Format of message used to announce current amount when switching between amounts. Note that the default has "euros"
+         * so if you use another unit is is essential you set this attribute to reflect that unit.
          * The string {current} is replaced with the current amount.
          * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
          */
@@ -273,7 +274,7 @@ export class DuetNumberInput {
             // Set the localized prop value.
             this.value = this.localizeValue(value);
             // Finally also set the visible input value and unit.
-            this.duetInputElement.value = `${this.value} ${this.unit}`;
+            this.duetInputElement.value = `${this.value}${this.getUnitString()}`;
         };
         this.add = (ev) => {
             // If this was called via a html button, prevent the default functionality
@@ -371,6 +372,10 @@ export class DuetNumberInput {
             this.emitNull(ev);
         }
     }
+    // prefix existing unit with white space or return empty string if no unit
+    getUnitString() {
+        return this.unit ? ` ${this.unit}` : "";
+    }
     formatAnnouncement() {
         const current = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
         if (current == null) {
@@ -384,13 +389,13 @@ export class DuetNumberInput {
      */
     render() {
         const identifier = this.identifier || this.inputId;
-        const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
+        const maxlength = `${this.localizeValue(this.max)}${this.getUnitString()}`.length;
         const cleanedValue = !!this.value ? SafeParseFloat(this.value, this.locale) : null;
-        return (h(Host, { key: '2339fa56635a7ba8fc6edec30d3675317fcbe27f', class: {
+        return (h(Host, { key: 'ff7a3b099b6146f8db869268ecc2609fefa88ca6', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-expand": this.expand,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: 'dff60647793af3de902477ed0ea4cfebe2a0b060', class: "duet-number-container" }, h("duet-input", { key: '55a832b70fd619b16560dcc8de2a11da3ae90344', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '1e4b7cc87d46de0233457c6e087217b27fb2a6df', name: "tooltip" }), h("div", { key: '5a2660b2592fd4a96172bf4ce53d5d810e9479c6', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: 'dddc2edb43610eed98a1db9de1ac006d6f721099', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: 'e29c3ce840c8e2d776ed9430ed84f1a0ead9a5a3' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: 'e5eb7418c9f6711b21e6550bad87f017d97cff6e', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '688035f8fcb3f56a36d2d7b13a9d494388eafd39', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '8779e5d09e06ff7f63ff715d45bd72c513c1c1dc' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: 'f6548c254afa31a6346042f11113aad09baefce3', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '4e272274bdb8a1c9cc068e76e846b49647200fd6', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+            } }, h("div", { key: '04d204f9d0dc1bf334606a101b0b4b5e165d36a3', class: "duet-number-container" }, h("duet-input", { key: '464c323e615b8978944cdeec09e0e1a1503391a0', ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value}${this.getUnitString()}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, h("slot", { key: '876fa9e487574bd143648c8649105ac9f5972829', name: "tooltip" }), h("div", { key: '60053c4b4c4602d494693804539eff2149fe2a64', class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, h("button", { key: '083dc0860543ddc7e2532620e345ad9d8d163d13', disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, h("duet-visually-hidden", { key: '5323ecaf1f86fa97f9267b70bc048dadcca7d34f' }, this.accessibleSubtract, " ", this.step), h("duet-icon", { key: 'd6ab1819fe4c96d6e379570c5a5c4eb41a1a775f', icon: subtractIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), h("button", { key: '82b9a72bfeba3653c85f853c2e9d295d146b2152', disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, h("duet-visually-hidden", { key: '697550e4c1f874401d2e17f60c6c4f324fc97bd8' }, this.accessibleAdd, " ", this.step), h("duet-icon", { key: '7947d70d3a48a3ea7e36a46aa79c6abc82d52565', icon: addIcon.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (h("duet-visually-hidden", { key: '0759711664742966c214cb765c179706affc7b2f', "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
     }
     static get is() { return "duet-number-input"; }
     static get encapsulation() { return "shadow"; }
@@ -665,7 +670,7 @@ export class DuetNumberInput {
                             "name": "default",
                             "text": "{fi: \"{current} euroa valittuna\", en: \"{current} euros selected\", sv: \"{current} valda euro\"}"
                         }],
-                    "text": "Format of message used to announce current amount when switching between amounts.\nThe string {current} is replaced with the current amount."
+                    "text": "Format of message used to announce current amount when switching between amounts. Note that the default has \"euros\"\nso if you use another unit is is essential you set this attribute to reflect that unit.\nThe string {current} is replaced with the current amount."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -59,7 +59,7 @@ export class DuetOverlay {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a940aabf27c88503105399e2bd8e078e6fbbce34', "aria-hidden": "true" }, h("div", { key: '73a03ee885277cf9829fe0eda10af78fa8df61ca', style: { zIndex: this.zIndex }, class: {
+        return (h(Host, { key: '022e03bd6245ccf60d2b1f5b2067b68e97722f0f', "aria-hidden": "true" }, h("div", { key: 'b29aabf87beb396113a3bcda0cc6fbdecfabc797', style: { zIndex: this.zIndex }, class: {
                 "duet-overlay": true,
                 "duet-theme-turva": this.theme === "turva",
                 "keep-stacking-context": this.keepStackingContext,

package/lib/collection/components/duet-page-heading/duet-page-heading.css

@@ -231,8 +231,19 @@
   background-color: rgb(198, 12, 48);
 }
 
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .background .background-mask {
+  background-image: none;
+}
 :host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon {
-  background: rgba(230, 23, 64, 0.9);
+  background: #172a3b;
+  border-radius: 16%;
+  transform: rotate(0);
+  -webkit-mask-image: none;
+  mask-image: none;
+}
+:host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .brand-shaped-icon duet-icon {
+  top: 0;
+  transform: rotate(0);
 }
 :host(.duet-theme-turva2) .duet-page-heading.duet-theme-turva .progress-step {
   background-color: #b2c2cd;

package/lib/collection/components/duet-page-heading/duet-page-heading.js

@@ -43,12 +43,12 @@ export class DuetPageHeading {
      */
     render() {
         const layout = this.layout === "narrow" ? "narrow" : this.layout === "fluid" ? "fluid" : "auto";
-        return (h("div", { key: '8f818b186229d038b98fac98c1ef02fc6bbbbd2d', class: {
+        return (h("div", { key: '7580ec6ad47222aa71f87e9b030152fcbc230a6c', class: {
                 "duet-page-heading": true,
                 "duet-theme-turva": this.theme === "turva",
                 "has-icon": !!this.icon,
                 [layout]: true,
-            } }, h("div", { key: '6c42ddfcc4f65c95ccd4bceb1956b60e610e359c', class: "background" }, this.theme === "turva" && h("div", { key: '9184e6a6696c793a0060e0492c3b508c38f6afff', class: "background-mask" }), this.theme !== "turva" && h("div", { key: '0c6f06c85f2f010bfa32f1867bc00f3f126c0304', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '744abcada9154113142f7ab873d15a6b1526e8b4', class: "brand-shape second-shape" }), this.icon && (h("div", { key: 'f83dae2fe07c0281b210f113cd79bd32b91862f4', class: "brand-shaped-icon" }, h("duet-icon", { key: '3cd1eee3628ce5819928da75d29a2d67bfeb40aa', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: 'af626d8cb5b1a075dd37a7431ec5bb343100d7e7', class: "heading" }, h("slot", { key: '042d9bbc8fb8c1c5dd7fe5ec65b734276117629b', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '20ebc9e86f822c59513030d34a633f68f2a188de' }, h("duet-spacer", { key: 'f8e666d65264a949ba60d896b82b457638161fbd', size: "large" }), h("div", { key: 'fe52a841e12dcf6145521a47d4349efd7f83878b', role: "presentation" }, this.progressIndicator()))))));
+            } }, h("div", { key: '41d70adffe75142d1bb229064c284c6b6ce447e7', class: "background" }, this.theme === "turva" && h("div", { key: '44a17513b00dfec52ee689008fec882a083d467f', class: "background-mask" }), this.theme !== "turva" && h("div", { key: 'd9d50fca7431f9d49058030b51b5548e4db8af04', class: "brand-shape" }), this.theme !== "turva" && h("div", { key: '1b93a6948bf23c1bc9bc7dafa64b6df7eea10a91', class: "brand-shape second-shape" }), this.icon && (h("div", { key: '4007f3e9d29cbfd246dc8ae43074ef7ea53fd694', class: "brand-shaped-icon" }, h("duet-icon", { key: 'efe66977b0559e745a17e6da691f8390af017c56', background: "none", name: this.icon, margin: "none", size: "auto", responsive: false })))), h("div", { key: '50070a51cbd61ddcd380063f9635cfb9edbb8b24', class: "heading" }, h("slot", { key: '1ae7e6e3261bb8dd1104bc47b1b87142a5f1cfdd', name: "heading" }), this.progressCurrentStep && this.progressTotalSteps && (h("div", { key: '01bf2c3472defbd1a7fe6c0af2b9cb4cc99185db' }, h("duet-spacer", { key: '723e327a2c3913b0e130d4326a163e326e57eaf4', size: "large" }), h("div", { key: '0bb28f56e6b92b7990467fcca1a16a0893380ce1', role: "presentation" }, this.progressIndicator()))))));
     }
     static get is() { return "duet-page-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -394,32 +394,32 @@ export class DuetPagination {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '32fcbc1ab1d2e72c8e3f681c8b5405362be964e3', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: '020a385482262cd9ea6bbd8d32e55976a95d7543', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        return (h(Host, { key: '0a70358ce0f093e096e1dbbb1d5d8cdfe9767d69', onKeyDown: e => this.onKeyboardDown(e), class: { "duet-theme-turva": this.theme === "turva" } }, h("nav", { key: 'ceccfac31b9f41448ce5eca46838898d914cb04a', role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
                 "duet-pagination-nav": true,
                 [`duet-pagination-variation-${this.variation}`]: true,
-            } }, this.numbersStore !== "" && (h("div", { key: '953681769a2c37b202d257783517eb0a067d58a2', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: '64b7cec76275874d10409a43c2a9268091aa63ee', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: '2810f47527a6ccfbb2957495acd0c9314586b4b2', id: this.listId, class: {
+            } }, this.numbersStore !== "" && (h("div", { key: '92cbdd700b88123610e781217175f508bea468f2', "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h("duet-badge", { key: 'b006f1470134d68ac4851a60a897ea2b72c1f504', theme: this.theme }, "jump to page : ", this.numbersStore))), h("ol", { key: 'd08269283c6af3331e90f1793ee4407d6452c462', id: this.listId, class: {
                 "duet-pagination": true,
                 "duet-pagination-is-dimmed": this.numbersStore !== "",
-            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'fcee9f5f028b340bf8b20cbaeebdea80e9e0c738', class: {
+            }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: '1b3c4f778862c5880011076f8c9f75b535e6b3cd', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'aa7e10b2c1fa46f2634e15bf1c11a7b317745885', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: 'c209b2a485ac203090db53813c9bc5b52740692f', class: {
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '9b83bfe8deff8790d0cb1e1a35b0ec7c7f1d3b0b', disabled: (this.internalSectionIndex === 0 && this.current <= 1) || this.disabled, "data-direction": "back", accessibleLabel: this.accessibleLabels.first_page, title: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), "icon-name": "action-move-to-first", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }))), h("li", { key: '5c27b7649f0eb55d1d0d62d900b232004f004504', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-first": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '52fe136a3fd99f42538a87c24672770197ff34fd', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '083ece272410b52d311ba5059d01c5b551f2f95a', disabled: !!((this.internalSectionIndex === 0 && this.current <= 1) ||
                 (this.current <= 1 && this.processedPageLinks) ||
-                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '03be7831dee21cb070175cf3e50ae89b0eba49b3' }, h("li", { key: '81cee7f4767a20b952964f8ce856621caad7b1cb', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'd280492036cb4ae490d70498078e8e649fe94ee2', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: 'e6aa3d3cc594fed23cb4d0146ebdd07c62e1cc25', class: "duet-pagination-page-number" }, "1"))), h("li", { key: 'dc4cbf113dc745b52d8787bc89429e32b68f53cb', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'dd58996ba1d6c5a32018d173150afdd995fa9b75', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: '2d354dd1353d1a3445b585cde4659f4aa3a39733', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
-            this.shouldDisplayNavigation() && (h(Fragment, { key: '7b20cc74d44f1b9cf952ee69fcac743ba66eda24' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: 'fd54712037bfcd681f00929685daeee86cf4ed69', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'd1df047e013903691bbd00c4fd495ab408f73a58', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: 'a0a24b8be4d7b24fa7c15bd35c5f29b74ad0083e', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: 'e996b1229282d32e9f0fb4c0eeb1fbab748e0c8d', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: 'c8dc915042f3bde87bac5f0fbdfe6ba5cf6f42fd', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
+                this.disabled), "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "accessible-label": this.accessibleLabels.previous_page, title: this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current - 2] : undefined })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (h(Fragment, { key: '332242feaa14df10ee1b67dbebc767fe366c34c4' }, h("li", { key: 'b03d55993042862a51c456d0a65958f33794fbee', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '5eb8e18454bf78af277bc43286fb12d28af4e5f5', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-back", "center-text": "true", variation: "plain", color: this.theme !== "turva" ? "secondary" : "secondary-turva", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e), theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[0] : undefined }, h("div", { key: '4631477be8ebc0c294f0aadec56efd0dc56c727f', class: "duet-pagination-page-number" }, "1"))), h("li", { key: '67268023a93c95fa305033c938cda65456f1bdf0', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: 'e9fe07279987c58857d72d70008998f859d7b531', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-back", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1), theme: this.theme }, h("div", { key: 'b01ec5da3a5355fb19d810bb67c25f5063fd3c3e', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026"))))), (this.shouldDisplayNavigation() && this.renderPageNumbers()) || this.renderSelect(), (this.internalSectionIndex + 1) * this.visibleItems < this.totalPages &&
+            this.shouldDisplayNavigation() && (h(Fragment, { key: '93b37ef102d9d74bf259b0da952e249df751806f' }, (this.internalSectionIndex + 1) * this.visibleItems !== this.totalPages - 1 && (h("li", { key: '49a99877b3ef31c365edcd87ad3853ff0bdd2e06', class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h("duet-button", { key: '7a61e3153910f73b9b5ca458c84c0b5690c37a7a', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-dots-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1), theme: this.theme }, h("div", { key: '54230cb78461870c410262951dea3591979e476f', class: "duet-pagination-page-number", "aria-hidden": "true" }, "\u2026")))), h("li", { key: '6a218768ef3d2f4f19bc763704ca4ecf640ac953', class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h("duet-button", { key: '13b446158c56459c4193f8a56915e393a32e85bd', disabled: this.disabled, class: "duet-pagination-link duet-pagination-link-jump-forward", "center-text": "true", color: this.theme !== "turva" ? "secondary" : "secondary-turva", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), theme: this.theme, url: this.processedPageLinks
                 ? this.processedPageLinks[this.processedPageLinks.length - 1]
-                : undefined }, h("div", { key: '01808887dfd64e716f50b336d7347e2b2b3bd40f', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '417732a79f9d070cd3ccd0dfc79bbc300c30e60c', class: {
+                : undefined }, h("div", { key: '372d0d315cbc8ac6edc3bfae39220c446c6d6a98', class: "duet-pagination-page-number" }, this.totalPages))))), h("li", { key: '0638ff6dfc64a693f0595137ad8cd393489d4a8d', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '0fdb57959080ef0126266df23717517b6f5be405', disabled: !!((this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: 'd7595281e09ac50160ce945f85bea6315e01621d', disabled: !!((this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
-                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'c8d1ff36a756d28252a339e9972088d7e451f54b', class: {
+                (this.current === this.totalPages && this.processedPageLinks)) || this.disabled, class: "duet-date-dialog-next", "accessible-label": this.accessibleLabels.next_page, title: this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-move-to-next", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.current] : undefined })), (this.variation === "compact" || this.matchesCompactBreakpoint) && (h("li", { key: 'f2c14e79716cbd0e8876b4f3a41d96f6e4c93003', class: {
                 "duet-pagination-page-button": true,
                 "duet-pagination-button-last": true,
-            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '7e6029710b0c761b62a21f7aabab346cfe318957', disabled: (this.current === this.totalPages &&
+            }, role: "menuitem", part: "navigation-arrow" }, h("duet-action-button", { key: '96c1da12be49a1062bf008da7829eb6bb030ae66', disabled: (this.current === this.totalPages &&
                 this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1) ||
                 this.disabled, accessibleLabel: this.accessibleLabels.last_page, title: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e), "icon-name": "action-move-to-last", theme: this.theme, url: this.processedPageLinks ? this.processedPageLinks[this.totalPages - 1] : undefined })))))));
     }

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

@@ -0,0 +1,98 @@
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  display: block;
+  width: 100%;
+  margin: 8px 0 20px 0;
+}
+@media (min-width: 36em) {
+  :host {
+    margin: 12px 0 28px 0;
+  }
+}
+:host .duet-m-0 {
+  margin: 0 !important;
+}
+
+.duet-panel {
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(8, 42, 77);
+  background-color: rgb(255, 255, 255);
+  border: 0 solid rgb(212, 223, 229);
+  border-radius: 16px;
+}
+.duet-panel.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);
+  border-color: rgb(222, 224, 228);
+}
+.duet-panel.padding-small {
+  padding: 16px;
+  border-radius: 12px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-small {
+    padding: 20px;
+  }
+}
+.duet-panel.padding-medium {
+  padding: 20px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-medium {
+    padding: 28px;
+  }
+}
+.duet-panel.padding-large {
+  padding: 28px;
+}
+@media (min-width: 36em) {
+  .duet-panel.padding-large {
+    padding: 36px;
+  }
+}
+.duet-panel.border {
+  border-width: 1px;
+}
+.duet-panel.secondary {
+  background-color: rgb(245, 248, 250);
+}
+.duet-panel.secondary.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+}
+.duet-panel.accent {
+  background-color: rgb(240, 247, 250);
+  border-color: rgb(198, 225, 238);
+}
+.duet-panel.accent.duet-theme-turva {
+  background-color: rgb(245, 247, 250);
+  border-color: rgb(199, 202, 207);
+}
+.duet-panel.accent.secondary {
+  background-color: rgb(217, 236, 245);
+}
+.duet-panel.accent.secondary.duet-theme-turva {
+  background-color: rgb(222, 224, 228);
+}
+
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva {
+  color: #172a3b;
+  border-color: #d4dde2;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.secondary {
+  background-color: #f5f6f7;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent {
+  background-color: #fdf7f2;
+  border-color: #f1cab2;
+}
+:host(.duet-theme-turva2) .duet-panel.duet-theme-turva.accent.secondary {
+  background-color: #fbe1d1;
+}

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

@@ -0,0 +1,234 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
+export class DuetPanel {
+    constructor() {
+        /**
+         * Theme of the panel.
+         */
+        this.theme = "";
+        /**
+         * Controls the padding of the component. Padding is automatically responsive.
+         */
+        this.padding = "medium";
+        /**
+         * The color variation of the panel. Combination of palette ("default", "accent") and palette variation ("primary",
+         * "secondary"). You can ommit "default" and "primary" - they are the defaults.
+         */
+        this.variation = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    render() {
+        return (h(Host, { key: 'ce2c9ad02ea4b482491120c4564322a7ab1b97c8' }, h("section", { key: '058ae2c34b915888645f0a0fbce8c905f9a99330', "aria-label": this.accessibleLabel, "aria-labelledby": this.accessibleLabelledBy, "aria-describedby": this.accessibleDescribedBy, class: {
+                "duet-panel": true,
+                "duet-theme-turva": this.theme === "turva",
+                [this.variation.split("-")[0]]: true,
+                [this.variation.split("-")[1]]: true,
+                [`padding-${this.padding}`]: true,
+                border: this.border,
+                "duet-m-0": this.margin === "none",
+            } }, h("slot", { key: 'eabfa138724309e78227fb8e48507a2a065c5822' }))));
+    }
+    static get is() { return "duet-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "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 panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the padding of the component. Padding is automatically responsive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "variation": {
+                "type": "string",
+                "attribute": "variation",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetPanelVariation",
+                    "resolved": "\"\" | \"accent\" | \"accent-primary\" | \"accent-secondary\" | \"default\" | \"default-primary\" | \"default-secondary\" | \"primary\" | \"primary-accent\" | \"primary-default\" | \"secondary\" | \"secondary-accent\" | \"secondary-default\"",
+                    "references": {
+                        "DuetPanelVariation": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-panel/duet-panel.tsx",
+                            "id": "src/components/duet-panel/duet-panel.tsx::DuetPanelVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color variation of the panel. Combination of palette (\"default\", \"accent\") and palette variation (\"primary\",\n\"secondary\"). You can ommit \"default\" and \"primary\" - they are the defaults."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "margin": {
+                "type": "string",
+                "attribute": "margin",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "border": {
+                "type": "boolean",
+                "attribute": "border",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set this attribute to draw a border around the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "attribute": "accessible-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds accessible label for the panel that is only shown for screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleLabelledBy": {
+                "type": "string",
+                "attribute": "accessible-labelled-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that labels the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "accessibleDescribedBy": {
+                "type": "string",
+                "attribute": "accessible-described-by",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of a component that describes the panel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

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

@@ -51,7 +51,7 @@ export class DuetParagraph {
         const color = getColorByName(this.color);
         // aria-describedby is to fix accessibility issue in Chrome where duet-paragraphs
         // are not announced when placed inside duet-modal
-        return (h(Host, { key: 'b7f1df2b017984133517a2742be5e5444f1e6894', "aria-describedby": this.id }, h("p", { key: '607059f9661102231b510b5923e0c71472f22804', id: this.id, class: {
+        return (h(Host, { key: '844328a8133f4abbbbd2424b38cc14b019fd23d4', "aria-describedby": this.id }, h("p", { key: 'dfd78aa829ee142323997f6bebde60ac47bb98e7', id: this.id, class: {
                 "duet-paragraph": true,
                 "duet-paragraph-small": this.size === "small",
                 "duet-paragraph-semi-bold": this.weight === "semi-bold",
@@ -59,7 +59,7 @@ export class DuetParagraph {
                 "duet-m-0": this.margin === "none",
                 [this.variation]: true,
                 "duet-theme-turva": this.theme === "turva",
-            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'e5e6da5cbb23f9fb7bfc3773c3b8e79666054878' }))));
+            }, style: { color }, part: "duet-paragraph" }, h("slot", { key: 'f014b5496f1b791cc2879b09bd12dd85649fb0e3' }))));
     }
     static get is() { return "duet-paragraph"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,11 +101,11 @@ export class DuetPopupMenuItem {
         };
         // Without the role ternary Safari/iPhone wouldn't announce the label for role menuitem.
         // This is a tradeoff and now Safari announces these items as buttons and links with the label.
-        return (h(Host, { key: '33503307cc147ac1f0ec51265bac886e7267edcf', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '0ce2340e9aad19f55f3bfc03c160a8d484a28b5e', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'db1d518461e1e63e4dbcd05a22a7f1b8b7ef94db', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '511507d031e8f5e418010445e9a694a3ab9deb37', class: "duet-popup-menu-item-label" }, h("slot", { key: 'a03c6bd4fbb5c14d176185d902287bad135c1a89' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '8985f3bc0b8a1dce8d1c798951de645ad528218c', name: this.url && this.external
+        return (h(Host, { key: '8e31b4732e423f363115f217c220217f85a3899a', role: this.accessibleRole === "menuitem" && this.isSafariBrowser ? null : this.accessibleRole }, h(TagName, { key: '4c9a0b3966b5b11b3f8286fdc7bbe83ce93f5df9', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: 'decd1fdc669965de735b9538d8256ea34b7d12b7', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: 'bd28f3d116506e2168fc3e5530d086fa0dd0edcd', class: "duet-popup-menu-item-label" }, h("slot", { key: '0aebe6bcf50f8fbbd7d89bbdc0c4f484f67adb6d' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: '616a80b13b29eb90f003a163bbcded07a551b58c', name: this.url && this.external
                 ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
-                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '24b2f476192cc27482f54cfaf4e8cc0ad851afd6', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
+                    : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: '74e587e4cc5c0c431f068bb7974ee8c385cf4259', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     static get is() { return "duet-popup-menu-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
-import { getColorByName } from "../../utils/token-utils";
+import { getColorByName, postfixTheme } 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.
@@ -70,12 +70,12 @@ export class DuetPromoCard {
             backgroundColor: backgroundColor ? backgroundColor : "none",
         };
         const TagName = this.url ? "a" : "div";
-        return (h(Host, { key: '3a5662e6386cd667e1d45e2cab994aa5bd1b773a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '5728664532e387b3f7efcf2218d1e67d44dd1b10', class: {
+        return (h(Host, { key: '427288a23a020a8ba83d29535a990685e56136cd', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: 'b34e5beb86c428cf1d23c252c9867d8109fa28c9', class: {
                 "duet-promo-card": true,
                 "duet-theme-turva": this.theme === "turva",
                 "no-bg-color": !this.backgroundColor,
                 "duet-promo-card-link": !!this.url,
-            }, style: bannerStyles }, h(TagName, { key: 'e480b0256b7a089d4303a5a6fa78fb525a4b2ae0', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: '473b0bdfd6ae90a68ae7a04e0addc3fb402f8171', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: 'a542187fb985500d24aaa324f6a7c9269697d6e7', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '7a24d8d814e13f3be34cfaee6eb1bbbf645231ba', class: "pre-heading" }, h("slot", { key: 'dd4c3e0b6cac6b110eca89c23dcaeb8baeb50d7b', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: '0e4074478c99a3887522e209a85da659a324d286', class: "heading" }, h("duet-heading", { key: 'a2e8a5c15c81c90385609ff4ddbc2fb5742ed515', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: this.textColor }, h("span", { key: '8b593e2814d241d19936d9e6ba2007f177ea9396' }, h("slot", { key: 'cf167b6e704d037c49c4b3b2a7c1c29296e95ab7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '719fe7ab4c0782ea29bbe56c25dc8abdb850ecbe', class: "description" }, h("duet-paragraph", { key: 'afe3a70bc62b79e86debb6b1a8666e7977072621', theme: this.theme, margin: "none", color: this.textColor }, h("span", { key: 'a07701bd187bfc012874cf3c4db5efb4b43dc89f' }, h("slot", { key: '1624a69fcacc0e7139c666a92cc27ae945531186', name: "description" }))))), this.hasActionSlot && (h("div", { key: '23eb8e15458d40820d6cb0db31b93dc7939b5335', class: "action" }, h("slot", { key: 'd66fd22007273332d4d3f6757662e8316a477f3f', name: "action" }))))))));
+            }, style: bannerStyles }, h(TagName, { key: '3d17bf1dc1fa3bc580ef7feb08e1d749dafaec34', href: this.url, class: "content-wrapper", ref: element => (this.aOrDivElement = element) }, h("img", { key: 'ba518b8e4449f267ebef440bed06ebb1349d90c5', class: "image", src: this.image, alt: "", role: "presentation" }), h("div", { key: '638d94d31bb60bec7019ed852f70269f73241d7e', class: "content" }, this.hasPreHeadingSlot && (h("div", { key: '08e8bb35ced5d1f6fc9a442c017e96f3294c3341', class: "pre-heading" }, h("slot", { key: '3cc1c6bcaeea2e811bf8984b0574cc7086e997c3', name: "pre-heading" }))), this.hasHeadingSlot && (h("div", { key: 'edfb7d324d0d5f68392b7b4b2386183cad567698', class: "heading" }, h("duet-heading", { key: '57820fcebf0e3c172c232611843679bb47e41e61', theme: this.theme, level: this.headingLevel, "visual-level": "h3", margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'e2b7014be3e8d44f00a418f76e1f9959a783e9e6' }, h("slot", { key: '094c582e2f0dfc6055563892bfa02dd9d5de4261', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '2af2637554173d2c40ad28bee0e589b6dc92a19c', class: "description" }, h("duet-paragraph", { key: 'f9a47265148a494e1803f5493ab359cfe4abb895', theme: this.theme, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: '42af2e9a0d151bb22d303f453d481bb69891746c' }, h("slot", { key: '3a4173db824f27939a8abc88124a8751d10cbc71', name: "description" }))))), this.hasActionSlot && (h("div", { key: '59a84926d8d346d724980bef00e42a48a44574d1', class: "action" }, h("slot", { key: '52109f0d34365be7e7fe8ec5091ee5ddc5c83bce', name: "action" }))))))));
     }
     static get is() { return "duet-promo-card"; }
     static get encapsulation() { return "shadow"; }