@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -17,6 +17,7 @@ export class DuetCombobox {
         this.inputId = createID("duet-combobox-input-id");
         this.activeDescendantId = createID("duet-combobox-active-descendant");
         this.isAndroidDevice = ((_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.indexOf("android")) > -1 || null;
+        this.isInsideModal = false;
         this.resizeObserver = new ResizeObserver(debounce(entries => {
             var _a, _b, _c;
             // otherwise, something is wrong, expecting 1 element only
@@ -26,21 +27,95 @@ export class DuetCombobox {
                 this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
+        this.processedItems = null;
+        this.inputValue = "";
+        this.listOpen = false;
+        // the selected item is based upon the DuetComboboxItem.id value
+        this.selectedItems = new Set();
+        // the activeItem number is based upon the array.index of the array stored in processedItems
+        this.activeItem = undefined;
+        /**
+         * Defaults for the accessible labels for the select items
+         */
+        this.accessibleLabelDefaults = {
+            en: {
+                heading: "Select:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtered",
+            },
+            fi: {
+                heading: "Valitse:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} suodatettu",
+            },
+            sv: {
+                heading: "Välj:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtrerade",
+            },
+        };
+        /**
+         * Accessible labels for the select items
+         */
+        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
+        /**
+         * Label for the input if input is not provided as a slotted element.
+         */
+        this.label = "";
+        /**
+         * Caption for the input if input is not provided as a slotted element.
+         */
+        this.caption = "";
+        /**
+         * Theme of the combobox.
+         */
+        this.theme = "";
+        /**
+         * Force the user to make a selection (typing things in the input field will only be used for list search).
+         * This property also sync input value with selected value on blur.
+         */
+        this.force = false;
+        /**
+         * Allow multiple selections. Selections are displayed as DuetChips.
+         */
+        this.multiple = false;
+        /**
+         * A hook to overwrite how the values are displayed in the input field after a User select an item
+         * @example (item) => `${item.name} (${item.value})`
+         * @default undefined
+         */
+        this.formatter = (item) => item && item.name ? item.name : "";
+        /**
+         * Defines minimum number of characters that must be given to show search results
+         */
+        this.minCharacters = 0;
+        /**
+         * Defines if items list should always open after clicking on input
+         */
+        this.openListOnClick = false;
+        /**
+         * Defines if filtering of items should be done by includes or startsWith
+         */
+        this.filterType = "startsWith";
         this.onInputChange = async (e) => {
             const newValue = e.detail.value;
             this.inputValue = newValue;
         };
         this.onInputClick = () => {
-            var _a, _b;
-            if (this.openListOnClick) {
-                this.listOpen = !this.listOpen;
-            }
-            else {
-                this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
-            }
-            if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.listOpen = false;
-            }
+            this.popupMenuController = this.input.nativeInputElement;
+            // change listOpen on next tick so popup controller is set when open changes
+            setTimeout(() => {
+                var _a, _b;
+                if (this.openListOnClick) {
+                    this.listOpen = !this.listOpen;
+                }
+                else {
+                    this.listOpen = ((_a = this.inputValue) === null || _a === void 0 ? void 0 : _a.length) >= this.minCharacters;
+                }
+                if (!((_b = this.getFilteredItems()) === null || _b === void 0 ? void 0 : _b.length)) {
+                    this.listOpen = false;
+                }
+            });
         };
         this.onInputTyping = async (e) => {
             var _a;
@@ -122,40 +197,6 @@ export class DuetCombobox {
             }
             return;
         };
-        this.processedItems = null;
-        this.inputValue = "";
-        this.listOpen = false;
-        this.selectedItems = new Set();
-        this.activeItem = undefined;
-        this.accessibleLabelDefaults = {
-            en: {
-                heading: "Select:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
-            },
-            fi: {
-                heading: "Valitse:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
-            },
-            sv: {
-                heading: "Välj:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
-            },
-        };
-        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
-        this.label = "";
-        this.caption = "";
-        this.theme = "";
-        this.force = false;
-        this.multiple = false;
-        this.items = undefined;
-        this.formatter = (item) => item && item.name ? item.name : "";
-        this.value = undefined;
-        this.minCharacters = 0;
-        this.openListOnClick = false;
-        this.filterType = "startsWith";
     }
     popupMenuOpenHandler() {
         if (this.listOpen) {
@@ -263,6 +304,9 @@ export class DuetCombobox {
      * Component lifecycle events.
      */
     componentWillLoad() {
+        if (this.element.closest("duet-modal")) {
+            this.isInsideModal = true;
+        }
         inheritGlobalTheme(this);
     }
     connectedCallback() {
@@ -547,7 +591,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.popupMenuController, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false, class: { "duet-skip-teleport-inert": this.isInsideModal } }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -568,6 +612,7 @@ export class DuetCombobox {
         return {
             "accessibleLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -588,12 +633,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
             },
             "accessibleLabels": {
                 "type": "unknown",
+                "attribute": "accessible-labels",
                 "mutable": true,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -617,6 +662,7 @@ export class DuetCombobox {
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,12 +677,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -651,12 +697,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -677,12 +723,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "force": {
                 "type": "boolean",
+                "attribute": "force",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -697,12 +743,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -717,12 +763,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "items": {
                 "type": "any",
+                "attribute": "items",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -737,11 +783,11 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "formatter": {
                 "type": "unknown",
+                "attribute": "formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "(item: DuetComboboxItem) => string",
@@ -772,6 +818,7 @@ export class DuetCombobox {
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
@@ -786,11 +833,11 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "minCharacters": {
                 "type": "number",
+                "attribute": "min-characters",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -805,12 +852,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-characters",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "openListOnClick": {
                 "type": "boolean",
+                "attribute": "open-list-on-click",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -825,12 +872,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-list-on-click",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filterType": {
                 "type": "string",
+                "attribute": "filter-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"includes\" | \"startsWith\"",
@@ -845,7 +892,6 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "\"startsWith\""
             }
@@ -856,6 +902,7 @@ export class DuetCombobox {
             "processedItems": {},
             "inputValue": {},
             "listOpen": {},
+            "popupMenuController": {},
             "selectedItems": {},
             "activeItem": {}
         };

package/lib/collection/components/duet-contact-card/duet-contact-card.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 12px !important;
   display: block;
 }
@@ -82,4 +82,8 @@
   justify-content: flex-start;
   padding-bottom: 8px;
   overflow-wrap: break-word;
+}
+
+:host(.duet-theme-turva2) .duet-contact-card.duet-theme-turva {
+  color: rgb(23, 42, 59);
 }

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

@@ -15,16 +15,18 @@ export class DuetContactCard {
             sv: "Telefon",
         };
         this.language = getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.image = undefined;
-        this.name = undefined;
-        this.description = undefined;
-        this.email = undefined;
-        this.phone = undefined;
-        this.buttonText = undefined;
+        /**
+         * Button icon.
+         */
         this.buttonIcon = "form-date";
-        this.buttonUrl = undefined;
     }
     /**
      * Component lifecycle events.
@@ -45,10 +47,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '14208b0e95965d34e6bd69493480e1014a7d20b2', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '2cf426c1e361e5a9fa15f273edf161a9765dc334', class: {
+        return (h(Host, { key: 'a29a3dab2ac7fb3079f2c1a159af7f4e7b5c226b', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '14753b1f4fc3901aa2285d438c612e66619fabb5', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'fdbdd4850c5eeda0de2437ee5f2695f43172d349' }, this.name && (h("duet-heading", { key: 'cc46dfe79762b573d0578d0cd9e82ebde6a25cc1', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'a5df238b129c11c6fad46bf33f7b21d25494b064', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '2cc46f7a6717f1e5d00ca90871eb89c01b68165e', class: "email" }, h("duet-icon", { key: '3a42b434c8b80a6c490070b613ef40d193e1cdcc', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '08174b40d6d4bf1a395db960f537f1f4d41539bc', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'cdb756796522bcd054e2b2f9a26f9e5c491a4c2a', class: "phone" }, h("duet-icon", { key: 'b024222cdd66b71f0d1418d28707f9b71c25b07e', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'd957c5abcfc923acc7188a5b785e11d15485bbc2', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '88dd50a394151b3e70ee58d35d907b481e9f634b', class: "call-to-action" }, h("duet-button", { key: 'b0d3cd67af298ec002b2c230c66f75c75efb1499', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6ec3ea8928bec5867d7a7ddb2e1ba5979cba023a' }), h("slot", { key: '1993d3dbe800197ff57dd3942e2bb6a98023bdb0' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'dc77c6904966d2b6438391dd2c827832ffe86325' }, this.name && (h("duet-heading", { key: 'a10e331782d05726446653615ba8effbb1de3257', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: '3f49dc9a8933eb5551f259e2dcca7f434f8e5082', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '99ad9df72533f48e298153aeadf18cb50e37d1e9', class: "email" }, h("duet-icon", { key: 'cbe804f4877e52df6f678ace315efe098b3ef914', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'e909d9bc1096700ef5fb6d7a1e87c499d585d4dd', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fe217c26608f2f461999844a3a00fe335c1e4509', class: "phone" }, h("duet-icon", { key: '1194445745ecb176f6fcc39a18c3e233921524d9', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: 'b83e145b7909c3ef697932ff1cf95d223d4a4b14', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'fdb27957cd0b60be23e8b4df7f062da5cc3eafc1', class: "call-to-action" }, h("duet-button", { key: 'f7cd81b4f2712057ee507a9f0f01e59121e7960e', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: 'b3a716a438e7793ef194ae0b1067d926b75e0925' }), h("slot", { key: '3d4bea81e03b40457deb9fd0731c14a9b80d465e' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }
@@ -66,6 +68,7 @@ export class DuetContactCard {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -86,12 +89,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -112,12 +115,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -132,11 +135,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -151,11 +154,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -170,11 +173,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false
             },
             "email": {
                 "type": "string",
+                "attribute": "email",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -189,11 +192,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "email",
                 "reflect": false
             },
             "phone": {
                 "type": "string",
+                "attribute": "phone",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -208,11 +211,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "phone",
                 "reflect": false
             },
             "buttonText": {
                 "type": "string",
+                "attribute": "button-text",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -227,11 +230,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-text",
                 "reflect": false
             },
             "buttonIcon": {
                 "type": "string",
+                "attribute": "button-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetIconName",
@@ -252,12 +255,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-icon",
                 "reflect": false,
                 "defaultValue": "\"form-date\""
             },
             "buttonUrl": {
                 "type": "string",
+                "attribute": "button-url",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -272,7 +275,6 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-url",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: fixed;
   right: 0;
   bottom: 0;
@@ -43,12 +43,13 @@
 }
 
 :host(.user-is-tabbing:not(.descendant-focused):focus) {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
   border-radius: 4px;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
 }
-
-:host(.user-is-tabbing:not(.descendant-focused).duet-theme-turva:focus) {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing:not(.descendant-focused):focus), :host(.user-is-tabbing:not(.descendant-focused):focus).duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
 .duet-cookie-consent {
@@ -94,8 +95,8 @@
 ::slotted(a) {
   font-weight: 600;
   color: rgb(255, 255, 255) !important;
-  text-decoration: underline;
   white-space: nowrap;
+  text-decoration: underline;
 }
 
 ::slotted(a[target=_blank]) {
@@ -105,11 +106,19 @@
 }
 
 ::slotted(a:focus) {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva, .duet-theme-turva2 ::slotted(a:focus), ::slotted(a:focus).duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 
-.duet-theme-turva ::slotted(a:focus) {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+:host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva {
+  background-color: rgba(12, 21, 30, 0.9);
+}
+@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
+  :host(.duet-theme-turva2) .duet-cookie-consent.duet-theme-turva {
+    background: rgba(12, 21, 30, 0.8);
+  }
 }