@duetds/components 10.0.0-alpha.21 → 10.0.0-alpha.22

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -156,13 +156,13 @@ export class DuetRangeSlider {
         const rangeStyles = {
             background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
         };
-        return (h(Host, { key: '591c961de650998ecf1680202b9d6ebb85e88d76', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: 'd7992dd90cba5c881171c75377573bc0f650923c', class: {
+        return (h(Host, { key: 'fca0c61d3288da56d73529c73457f63a78df6b26', class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h("div", { key: '64c191339324cf735bd837bcfb3b05203ee256b7', class: {
                 "duet-range-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-ie": isInternetExplorer(),
                 "duet-range-disabled": this.disabled,
-            } }, h(DuetInternalLabel, { key: '69abfec74af9aae13ebc498374205c571667ace2', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: 'a165cce8cbd95b8e5f62f03473b7741df139a4f1', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: 'd88393860f5ba334044588500ef6f762bc32ea2e', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+            } }, h(DuetInternalLabel, { key: 'f2e5cb43789c7385f46987f31e59d01d0e0cbe77', theme: theme, color: this.labelColor, weight: this.labelWeight, margin: "small", for: identifier }, this.label), h("output", { key: 'a0becf96bebb8b1762f3236046eb3083083034cd', "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h("input", { key: '6108673d85c857d9b95cd5de00eb0a7b261afc75', onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
     }
     static get is() { return "duet-range-slider"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.css

@@ -46,4 +46,8 @@
 }
 .duet-range-stepper ::part(button) {
   border: 0;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-range-step-counter {
+  color: rgb(35, 46, 61);
 }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -196,10 +196,10 @@ export class DuetRangeStepper {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '6ee831dd873413efb28eb9bc4e74d13f62471d5a', class: {
+        return (h("div", { key: '39ffc4c324f8b610879fb7ed01aaaf4263b970c3', class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '9f4857e8c049cd3c732201d33681fe0d194307ad', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'f90f6c22d9d60a87a1e97ef34c7845d1fe1e2fce', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: '1d6d7fd979563dd7fb004316e0ccff7c5b66114d', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { key: '2ea4499bc567d644530b625eec22d91b0bf5226d', class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { key: 'e0613ae54e7134000a06bd0329af05c42d8fc521', disabled: this.disabled || this.buttonLeftDisabled, class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { key: 'fbd6d9a4acda0fa78642b8af959dd361dd280f15', disabled: this.disabled || this.buttonRightDisabled, class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -208,4 +208,11 @@
   transition: transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
   scroll-snap-align: center;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(244, 213, 193);
 }

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

@@ -265,18 +265,18 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'dabca4939b3be30f3d3ecd1b9f68e52456269e0a', class: {
+        return (h(Host, { key: '9b73fe51d20fba362851dced55d9e1f87c8ad44a', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '2ff182f33a6de936878bb0c8fa90609b298b2e8f', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: 'f1f3da5e12482c842edd6167db704220985491da', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: '7c7cfad3a7ca7252d6b5353eb8983d31d5fc6532', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '7e7ad479953be49eb8c6868e0afe130ef8f8e719', name: "collapse-button-label" })))), h("div", { key: '437ccb24c0eb10de320c28e54d1fbcaaba37ba43', class: {
+            } }, h("duet-button", { key: '12d843aa10a260c33b84d71b84e73a500caab348', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '4ad5eb7b1e7d625ca1f349f993620c8983b4c63a', name: "collapse-button-label" })))), h("div", { key: '3a72bd55510a6560596aa04971d8e5c476fd2e7c', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: '9f6b170c54152d4778e09e581199897ea6da96ad', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: 'a346ac45470e0430bd3eb56e277cc8981490d13b', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
@@ -284,7 +284,7 @@ export class DuetScrollable {
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
                 "duet-scrollable-stretch": this.stretch,
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'cb3852e8f2c7c5a3114a9c373f10d0ec878707e7' })), this.buttons && this.renderButton("right"))));
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'f28675757450449fd5ab3dd6c9dc7fd9b77a887c' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -24,13 +24,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6e87a8404b55791ef09fbe67defcf0b1926f28f1', class: {
+        return (h(Host, { key: '6de257513172547ac3127aae4897d23e1d232ab0', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: '7dbb8ba1ffa4a6c80fdef3d109aa5acd1e801bfb', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: 'b98ee3ba1f0de7404f3b94073e0d430c3433d209', class: {
+            } }, h("div", { key: '162b80b3878f2da062f7f95e883e297e006cf62a', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '6a790a124425ee7c8851b6e805c752eb0702ecb1', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: '82ab08ebb3a64ecefa53ff85fe51907347eb81e2', class: "duet-main" }, h("slot", { key: 'f4117e551edc8c13d703686fd4679cb37bb44244' }))))));
+            } }, h("section", { key: '4bd2cec88d4ce18d7f1033a2424f231968838d71', class: "duet-main" }, h("slot", { key: '701a5cdb76890ac29a419e178b33ab849d78b508' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -382,4 +382,37 @@ duet-tooltip,
   overflow: hidden;
   clip: rect(0 0 0 0);
   border: 0;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-placeholder {
+  background: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:hover + .duet-select {
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:focus + .duet-select {
+  border-color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select:focus + .duet-select .duet-select-icon {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-wrapper select[disabled] + .duet-select {
+  color: rgb(35, 46, 61) !important;
+  background: rgb(253, 247, 242) !important;
+  border-color: rgb(253, 247, 242) !important;
+  -webkit-text-fill-color: rgb(35, 46, 61) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select {
+  color: rgb(35, 46, 61);
+  background: rgb(255, 255, 255); /* unchanged unless you want a Turva2 token */
+  border-color: rgb(244, 213, 193);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select svg {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.has-error .duet-select {
+  border-color: rgb(214, 28, 82) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-select-help {
+  color: rgb(244, 213, 193);
 }

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

@@ -200,23 +200,23 @@ export class DuetSelect {
      */
     render() {
         const identifier = this.identifier || this.selectId;
-        return (h(Host, { key: 'f7fb5ab26bd271f6e526be28f8d212a1f58317b5', onClick: this.onClick, class: {
+        return (h(Host, { key: 'cee7a0483220ecb054516922696bea8f3566e16e', onClick: this.onClick, class: {
                 "duet-m-0": this.margin === "none",
                 "duet-expand": this.expand,
                 [`duet-select-variation-${this.variation}`]: true,
-            } }, h("div", { key: '426ba8ae0167b334ddd6fd011add388174414109', class: {
+            } }, h("div", { key: 'f267d7f36626adc44d29cba18b60f717cff3cac1', class: {
                 "duet-select-container": true,
                 "duet-label-hidden": this.labelHidden,
                 "duet-theme-turva": this.theme === "turva",
                 [`duet-select-variation-${this.variation}`]: true,
                 "duet-input-top-caption-shown": this.isCaptionVisible,
                 "has-error": !!this.error,
-            } }, h(DuetInternalLabel, { key: 'b39090e1503169c346addf003b6d8b30708c8b3b', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '6e354abbd09879db33d2b9939d2d7b586d429b4f', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: '8ec384b22a9430c112efa531c5133a9af2b921ed', name: "tooltip" }), this.caption && (h("duet-caption", { key: '098fcc251d0000132dd670d448f175951374ad0e', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '8c87160e79d975cc2f04c8f0c92bf16f7b446336', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'c812926146fe2ae74db2760f20c00604c15fbe10', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '5ea31f03168f75354a7a8ea01503edafb713b297' }), h("select", { key: 'd39fd3b000915130c8565a5f82e2d6b9662f9b69', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: 'bc215c396c0aaa1a39f6702c6e3cb7870ec70d93', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
+            } }, h(DuetInternalLabel, { key: 'dd7ca5dec1b2de6ae4212356c91ee10b61589921', theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, color: this.labelColor, weight: this.labelWeight, id: this.labelId, for: identifier }, this.label), this.tooltip && (h("duet-tooltip", { key: '87fe5ca8e117bcce9d95e4dd671315b2d919553e', direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'ac112e24deab401fbecdaeac85abc4a4fe610898', name: "tooltip" }), this.caption && (h("duet-caption", { key: '5238f512e4d7b8d24765c0a03791615762621e39', id: this.topCaptionId, size: "medium" }, this.caption)), h("div", { key: '977e09a6d9edbe28f371a7b008696524cfe443a4', class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h("duet-caption", { key: 'fdc4d06a6de42770c12b21a1652f0bae51cf1cc2', id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h("slot", { key: '378fcfd46c3d512884b3fa935e39676b523d1a08' }), h("select", { key: '3e24a10d59ec07522bddc3808695aabab5abb097', ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": this.labelId, "aria-describedby": this.getDescribedBy(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required }, this.placeholder && (h("option", { key: '859e86a0dea68cb4da7588130b572e7c378368a1', disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
             return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
-        }))), h("div", { key: 'f3e36992c843080b868a557afc596f4460fc8ccf', class: {
+        }))), h("div", { key: '9e7ed1fa9404cb96990665e963474a5483dd1efd', class: {
                 "duet-select": true,
                 [`duet-select-variation-${this.variation}`]: true,
-            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: 'dc32868d15cff1e4c389f866b84e488150f61bfe', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8d73a8e85acee6c7b5e3fb637f676035cc263704', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '42bb00d482b9b26a894b6aa8650ae81fdb9f423b', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: '30501f1a3ea30a482866c167f5d8b0613ecb9558', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: 'bbc67f9602f36034303854ccf7b3b2371ed8a0d4', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '9a5801436542d56495308caf0dd5e124efafbc80' }, this.error)))));
+            }, "aria-hidden": "true" }, h("span", { key: this.value, class: "duet-select-selected-value" }, this.getSelectedItemLabel()), (this.variation === "default" && (h("svg", { key: '4f2ec9d40e57c9c5d81e14e2ce311c2b3714cbc9', role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '62569ac4e1cf6428809163495d81a5666b8204d8', d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))) || (h("duet-icon", { key: '14076b6de2956bbd8b56c2bad3b8de6ec0f571d0', theme: this.theme, name: "action-arrow-down-small", color: "currentColor", margin: "none", size: this.variation === "compact" ? "xxx-small" : "xx-small" }))), h("span", { key: '2f930786471092de2ed9cc231e7bdeb30ba05940', class: "duet-keep-container-height", role: "presention", "aria-hidden": "true" }, "_")), h("span", { key: '8ee87497d78be2b13e5abb2f9531dd48600f2c72', class: "duet-select-help", id: this.errorId, "aria-live": this.accessibleLiveError, "aria-atomic": "true", "aria-relevant": "additions removals" }, this.error && h("span", { key: '59ffb4f9118c79dff0a38d063ed841f2177bd662' }, this.error)))));
     }
     static get is() { return "duet-select"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-shaped-image/duet-shaped-image.js

@@ -33,9 +33,9 @@ export class DuetShapedImage {
         const style = {
             "--rotation": `${this.rotation}deg`,
         };
-        return (h(Host, { key: '1d1053d155b9e1841b6d953585cd04aab69d19b3', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '8fe40998d799d66bf6b705d95ba192181a65cf50', class: {
+        return (h(Host, { key: '81cb42f6d5d476c90fd596286ac1d08ec3fd691b', class: { "duet-theme-turva": this.theme === "turva", "duet-m-0": this.margin === "none" } }, h("span", { key: '3b6ed786402f59520017f12fe1e920828e4973a7', class: {
                 "shaped-image": true,
-            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '40f7cd9536a69fd2871a473ddd382acf393bd1b9', class: "shaped-image-mask", role: "presentation" }, h("span", { key: 'eda5c54d79dd7b3d06cac81547b5ca56e626597f', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
+            }, role: "img", "aria-label": this.accessibleLabel, style: style }, h("span", { key: '3f70c4449ad67e77227d59eb853ef0261b51712b', class: "shaped-image-mask", role: "presentation" }, h("span", { key: '673b893d5f6763ec1579b2ec568bba4f856b4a22', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
     static get is() { return "duet-shaped-image"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

@@ -50,4 +50,8 @@
 }
 .duet-show-more.duet-theme-turva .content:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+}
+
+:host(.duet-theme-turva2) .duet-show-more.duet-theme-turva {
+  color: rgb(35, 46, 61);
 }

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

@@ -136,12 +136,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: '77e828e77011e6b34daa519acc2f5e0d918bba32' }, h("div", { key: '0a7265323fa24b6eaf734f150601a08363a138ba', class: {
+        return (h(Host, { key: 'c72a4a66bcedd71aaa4de71227da44163b6691c7' }, h("div", { key: '7f229c8848525ff7c081ee34fa1044f837c1079f', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '982dadaab1d35e6b33d39f4b13cc762749d9dc54', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: '921775915ea6f6a2da3f54ea646c21588eb134bd', class: { "slotted-content": true } }, h("slot", { key: '19cfcbdfc392eb9915e4918792b4f404406939b2' }))), h("duet-button", { key: 'b66af202ee05aa55c875980743cba1e5265a6c36', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '03278664411c1274ad117d1b4e353ae2da21ad21' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '6f3aca5e04f4862578d92be1cfafc31de40a8742', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: 'e3d983d64cb3cce593c8af76bcb73a3cbe79202f', class: { "slotted-content": true } }, h("slot", { key: 'a0070a27d8774d45a112c969d7302e1d82327500' }))), h("duet-button", { key: 'faf518247c7d13158e51c77a5e044882942642f6', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'e0d03636ec1022c28fead58cb4807d371f0e9b62' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }

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

@@ -174,4 +174,32 @@ slot {
 }
 .duet-theme-turva slot {
   color: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+@media (min-width: 62em) {
+  :host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .desktop-bg {
+    background: rgb(35, 46, 61);
+  }
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active {
+  color: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva button.active::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .top {
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-slideout.duet-theme-turva .has-sticky-header-slot .sticky-header {
+  background: rgb(253, 247, 242);
+  border-bottom-color: rgb(248, 229, 217);
+}
+:host(.duet-theme-turva2) slot {
+  color: rgb(35, 46, 61);
 }

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

@@ -294,16 +294,16 @@ export class DuetSlideout {
         };
         const topLevelOpenMenuBarTranslation = getLocaleString(this.topLevelOpenMenuBarLangObject);
         const exitTranslation = getLocaleString(this.exitLangObject);
-        return (h(Host, { key: 'f1af2161f067a29167ead323062f8ea103b429d0' }, h("div", { key: '766d832f6b096ca69ccb7175ec222fcc3ee642ae', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '93810976f50722eddc54d5cf37b767e191e763fe', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: '53e899fe85d80cf9074555c7707e902d0b962ea3', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
+        return (h(Host, { key: 'd5fc5379a48de292b10c704161a4992c10eedf48' }, h("div", { key: 'd8b63e68d03786884a34dd8df9d7d03bc0c4554d', class: { "duet-slideout": true, "duet-theme-turva": this.theme === "turva" } }, this.modal && h("duet-overlay", { key: '073ac973858525fbb37d68e5528b552684000c81', visible: this.open, "display-device": "large", zIndex: "600" }), h("div", { key: 'ded136e561639dba54984936537c8359da325df0', ref: element => (this.dialog = element), tabindex: "-1", role: "dialog", id: "dialog", "aria-labelledby": "button", "aria-modal": this.isSafariBrowser ? false : true, "aria-flowto": "slot-container", class: {
                 dialog: true,
                 hidden: !this.open,
                 modal: this.modal,
-            }, style: styles }, h(FocusGuard, { key: '4f9c526cb264929c15b719b5a2d701915b2c5c1a', moveFocusTo: this.closeButton }), h("div", { key: 'f43307cd66d748956d0e91669c07a9a466178735', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: 'ac504597db356aa7881ed7d0b36e1f7550a67a3d', class: "top" }, h("button", { key: '9d494f57f01da95865f96521cbe12d6c4f222974', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
+            }, style: styles }, h(FocusGuard, { key: '86ee0669e0c080a053b332368b3bfba35b30cc8c', moveFocusTo: this.closeButton }), h("div", { key: '50b95210bd617e9807e8f94f7bc9c96f9ea6a8ff', class: { "top-container": true, "has-sticky-header-slot": this.hasStickyHeaderSlot } }, h("div", { key: '0c61ffe50dc9abb4ca5e59d78c069de25d05f90e', class: "top" }, h("button", { key: '7db284cfc9e1decf6d592882710761227519dd93', ref: element => (this.closeButton = element), "aria-haspopup": "dialog", "aria-controls": "dialog", "aria-expanded": this.open ? "true" : "false", "aria-label": `${exitTranslation}`, type: "button", class: {
                 "slideout-close": true,
                 active: this.open,
-            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '99a782f4e093ec82fed61786a644ce69ca5a62b3', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '2c908ff564b510b578d3f1254caa1840d7e57e29', class: "sticky-header" }, h("slot", { key: '33ab4628cdfc0dc9418ce3c275a24966b6c9d2d8', name: "sticky-header" }))), h("div", { key: '20b355693757d23bc16d3f31a76f6071209a84d6', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
+            }, onClick: this.onClick, inert: this.openPanel }, h("duet-icon", { key: '83fa3337162f14e0f8126ea981972776de18f186', name: "navigation-close", size: "small", margin: "none", color: "secondary" }))), h("div", { key: '4e73db5953ed25c6eb57f150dc911304420222e3', class: "sticky-header" }, h("slot", { key: '430f0f35f35e9df8952e7f5cfdabad4cfb4f94dc', name: "sticky-header" }))), h("div", { key: '5b5e438600a0d2cd85fe041bfd84d1bbcd54d716', id: "slot-container", role: this.accessibleRole, "aria-label": this.openPanel ? topLevelOpenMenuBarTranslation : null, class: {
                 items: true,
-            } }, h("slot", { key: '5e99e7ae8296174976aa0c14d8837427b8fbf8e8' })), h(FocusGuard, { key: '6931a81a3f11656480c57bfea90aaccb81a9cc65', moveFocusTo: this.closeButton })))));
+            } }, h("slot", { key: '0e7ab1f88b776f8b477b7f115c83472f0d5fae10' })), h(FocusGuard, { key: '4294b263eede7fa45c6828f3ba486a56a9ce1564', moveFocusTo: this.closeButton })))));
     }
     static get is() { return "duet-slideout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,4 +52,8 @@
 
 .duet-theme-turva ::slotted(:not(:last-child))::after {
   background: rgb(23, 28, 58);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva ::slotted(:not(:last-child))::after {
+  background: rgb(35, 46, 61);
 }

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

@@ -38,7 +38,7 @@ export class DuetSlideoutLang {
      */
     render() {
         const langTranslation = getLocaleString(this.chooseLangObject);
-        return (h(Host, { key: '81d1f6d9e2c6d9f6dd8b5218608be304ffde350f' }, h("div", { key: '26b3a9e6224f4a53c13998466b62f5430c1d944e', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: '4fd6ea04d3f884ee1a58979d4d7bb74151aa3331', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: 'ea0b580bbccc19ab497e06b4e668cf4825af3307' }))));
+        return (h(Host, { key: '42d97d6392e13c989b34c9a47c81ea725f6f9bfa' }, h("div", { key: 'a0852b95d079f61557b3673870f03409972f5786', class: "duet-slideout-lang", role: "group", "aria-label": langTranslation }, h("duet-icon", { key: 'd3ecc2574ac64f2d911118054e3873b9ede245fb', name: "navigation-language", margin: "none", color: "secondary" }), h("slot", { key: '9735206820035e046d83f2dd2bce49137dea8108' }))));
     }
     static get is() { return "duet-slideout-lang"; }
     static get encapsulation() { return "shadow"; }

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

@@ -118,4 +118,14 @@ slot[name=description]::slotted(*) {
 }
 .duet-theme-turva slot[name=description]::slotted(*) {
   color: rgb(113, 118, 132);
+}
+
+:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva {
+  color: rgb(35, 46, 61);
+}
+:host(.duet-theme-turva2) .duet-slideout-link.duet-theme-turva.active .label-content::after {
+  background: rgb(197, 29, 65);
+}
+:host(.duet-theme-turva2) slot[name=description]::slotted(*) {
+  color: rgb(35, 46, 61);
 }