@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

package/lib/collection/components/duet-banner/duet-banner.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-right: 36px !important;
   margin-bottom: 36px !important;
   display: flex;
@@ -56,11 +56,9 @@
   position: relative;
   display: none;
   overflow: hidden;
-  /* stylelint-disable */
 }
-@container duet-banner-container (min-width: 0px) {
+@container duet-banner-container (min-width: 0) {
   .duet-banner .visual {
-    /* stylelint-enable */
     display: block;
   }
 }
@@ -87,6 +85,7 @@
   width: 100%;
   height: 100%;
   mask-image: url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
+  transform: scale(101%);
 }
 .duet-banner .content {
   display: flex;
@@ -99,8 +98,8 @@
 }
 .duet-banner .action {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   align-items: flex-start;
   justify-content: flex-end;
   padding-top: 16px;
@@ -124,13 +123,8 @@
 .duet-banner.duet-theme-turva .visual .brand-shape {
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
 }
-.duet-banner.size-medium, .duet-banner.size-large {
-  /* stylelint-disable */
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -163,19 +157,12 @@
   }
 }
 @container duet-banner-container (min-width: 586px) {
-  .duet-banner.size-medium, .duet-banner.size-large {
-    /* stylelint-enable */
-  }
   .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {
     left: 80%;
   }
 }
-.duet-banner.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 900px) {
   .duet-banner.size-large {
-    /* stylelint-enable */
     grid-template-rows: none;
     grid-template-columns: 50% 50%;
   }
@@ -220,12 +207,31 @@
   max-width: 720px;
   padding: 0;
 }
-.duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-  /* stylelint-disable */
-}
 @container duet-banner-container (min-width: 486px) {
   .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {
-    /* stylelint-enable */
     padding: 48px;
   }
+}
+
+:host(.duet-theme-turva2) .duet-banner {
+  border-radius: 8px;
+}
+:host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+:host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {
+  display: none;
+}
+@container duet-banner-container (min-width: 486px) {
+  :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {
+    grid-template-columns: 1fr 1fr;
+    gap: 28px;
+    border-radius: 12px;
+  }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {
+    border-top-left-radius: 12px;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 12px;
+  }
 }

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

@@ -6,7 +6,7 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { DuetPicture } from "../../utils/picture-utils";
 import { checkNamedSlotElement, hasSlot } from "../../utils/slot-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { getColorByName } from "../../utils/token-utils";
+import { getColorByName, postfixTheme } from "../../utils/token-utils";
 /**
  * @slot heading - Slot for heading content. Only span should be used in this slot.
  * @slot description - Slot for description content.
@@ -14,6 +14,47 @@ import { getColorByName } from "../../utils/token-utils";
  */
 export class DuetBanner {
     constructor() {
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Background color.
+         */
+        this.backgroundColor = "primary-lighter";
+        /**
+         * Icon color.
+         */
+        this.iconColor = "gray-lightest";
+        /**
+         * Icon background color.
+         */
+        this.iconBackgroundColor = "primary";
+        /**
+         * Text color.
+         */
+        this.textColor = "secondary";
+        /**
+         * Maximum size of the banner. The banner will automatically switch to smaller sizes when space is not available.
+         * Sizes "large" and "medium" are horizontal, "small" is vertical,
+         */
+        this.size = "large";
+        /**
+         * Image. Example image is 512x341;
+         */
+        this.image = "";
+        /**
+         * Icon.
+         */
+        this.icon = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
+        this.headingLevel = "h2";
         this.checkCurrentSize = () => {
             const elementSize = this.element.clientWidth;
             if (elementSize < 500 || this.size === "small") {
@@ -43,18 +84,18 @@ export class DuetBanner {
                 }
             }
         };
-        this.currentSize = undefined;
-        this.theme = "";
-        this.margin = "auto";
-        this.backgroundColor = "primary-lighter";
-        this.iconColor = "gray-lightest";
-        this.iconBackgroundColor = "primary";
-        this.textColor = "secondary";
-        this.size = "large";
-        this.image = "";
-        this.sources = undefined;
-        this.icon = "";
-        this.headingLevel = "h2";
+        this.isTurva2 = () => { var _a; return (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"); };
+        this.getBackgroundColor = () => {
+            if (this.theme === "turva" && this.backgroundColor === "primary-lighter") {
+                if (this.isTurva2()) {
+                    return "#fdf7f2"; // turva-nude-00 - not yet available as token
+                }
+                else {
+                    return getColorByName("gray-lighter", this.theme);
+                }
+            }
+            return getColorByName(this.backgroundColor, this.theme);
+        };
     }
     /**
      * Component lifecycle events.
@@ -81,8 +122,7 @@ export class DuetBanner {
      * Always the last one of the class.
      */
     render() {
-        const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-lighter" : this.backgroundColor;
-        const backgroundColor = getColorByName(backgroundColorTemp, this.theme);
+        const backgroundColor = this.getBackgroundColor();
         const color = getColorByName(this.textColor, this.theme);
         const bannerStyles = {
             backgroundColor,
@@ -91,14 +131,14 @@ export class DuetBanner {
             img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
             sources: parsePossibleJSON(this.sources),
         };
-        return (h(Host, { key: 'b8716b8067524ae7e4c29e56cdc37d6219c7743a', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '7c4b420d5a203fa5066f4a71a801c9fc288e179c', class: {
+        return (h(Host, { key: 'c8e3140dea20791061866feb62588c5a5491f277', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '7e6834ed607505ee35d026a71d3406280644856b', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h("div", { key: 'dd84b698336d0c159b692bde709c6f10bfe414bf', class: "visual" }, h("div", { key: 'c92d3fdabc120fa760c30ae44e90a29439817940', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: 'bab1712aa5f1ab77a6c96babc607a9a9d4359dd2' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '2497ae55ca516191073fad1f6425c962d23b9625', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: '411fc99b5c017a4b89f4aa375d6725e9e85314e6', style: bannerStyles, class: "brand-shape" })), h("div", { key: '6ba154b92216b98f00b33d740175760049157d14', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'ba3ab430999ab6f0823ab957b06bcc4077799c5a', class: "heading" }, h("duet-heading", { key: '256ed05f27e6c6c3ec987d4039d6a7caf713458b', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, h("span", { key: '197dbc447ca8910b13c8317cd00507e034e84e6f' }, h("slot", { key: 'cba3fcc030b0412d981e7cc94626e90aa628cb25', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'dbcc6142fe33db74bccac1d54a1fe2a8e8ccc064', class: "description", style: { color } }, h("slot", { key: '1806ab5f5be1ee076c3978f1fcb676cef6b62893', name: "description" }))), this.hasActionSlot && (h("div", { key: 'bf9fd56968048a53d15cc1849c2a3b4619851c49', class: "action" }, h("slot", { key: '367d2a86cb83fe2d2bdb91ae1e133453e35ce895', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: 'fc4dc8649243b6a63368328de6eb4e50ed176a6b', class: "visual" }, h("div", { key: '37384ee4753623f1be3281d984a0bb838ed73f58', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '20843c2967598ea78d178de08e35e9ac6b913e2d' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '5004d77927bfb893d67503a452dea3e7cf74f8d3', theme: this.theme, class: "icon", name: this.icon, shape: "brand", size: this.currentSize === "large" ? "xx-large" : "x-large", color: this.iconColor, background: this.iconBackgroundColor, "background-rotation": "7", "background-opacity": "0.85", margin: "none" })), h("div", { key: 'c7a8ea6e28e80f6b10f37d3d9ae649e72362d59b', style: bannerStyles, class: "brand-shape" })), h("div", { key: '1cf3029099015dd0ff396e9f9c94075c3eb5b70f', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'bd471f924ebdcd3a08f9aed0ac669f46188a5452', class: "heading" }, h("duet-heading", { key: 'f8a595ae3eb8a76b5f2ffb245912d8dea6221873', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: postfixTheme(this.textColor, this.theme) }, h("span", { key: 'cc6134c267fdc0401198afdff0a75776f091db58' }, h("slot", { key: 'bdfc9e47dfe979c9355b99379533e81e36d55ac3', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '38b1971548ed44d7b5c02c5eb6feb85625880f09', class: "description", style: { color } }, h("slot", { key: '2b8ed684179262322589d0e8702f3bd823e7614f', name: "description" }))), this.hasActionSlot && (h("div", { key: '75e5f3ba7ef02266554854f6963e4c471ca0fa4f', class: "action" }, h("slot", { key: '1c9affe286d41ac0266758465f0d574591e38b2c', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -116,6 +156,7 @@ export class DuetBanner {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -136,12 +177,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -162,12 +203,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "backgroundColor": {
                 "type": "string",
+                "attribute": "background-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -188,12 +229,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "background-color",
                 "reflect": false,
                 "defaultValue": "\"primary-lighter\""
             },
             "iconColor": {
                 "type": "string",
+                "attribute": "icon-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -214,12 +255,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "\"gray-lightest\""
             },
             "iconBackgroundColor": {
                 "type": "string",
+                "attribute": "icon-background-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -240,12 +281,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-background-color",
                 "reflect": false,
                 "defaultValue": "\"primary\""
             },
             "textColor": {
                 "type": "string",
+                "attribute": "text-color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -266,12 +307,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "text-color",
                 "reflect": false,
                 "defaultValue": "\"secondary\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": true,
                 "complexType": {
                     "original": "bannerSize",
@@ -292,12 +333,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"large\""
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -312,12 +353,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "sources": {
                 "type": "string",
+                "attribute": "sources",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSource[] | string",
@@ -338,11 +379,11 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sources",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -363,12 +404,12 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "headingLevel": {
                 "type": "string",
+                "attribute": "heading-level",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetHeadingLevel",
@@ -389,7 +430,6 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "\"h2\""
             }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.css

@@ -4,29 +4,28 @@
   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;
   display: list-item;
   width: auto;
 }
 
 .container {
   display: flex;
-  gap: 8px;
   align-items: center;
 }
 
@@ -50,6 +49,7 @@
   align-items: center;
   justify-content: flex-start;
   height: 100%;
+  padding: 10px 8px;
   font-size: 0.875rem;
   font-weight: inherit;
   line-height: 1.25;
@@ -60,8 +60,10 @@
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-breadcrumb:focus {
-  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);
 }
-:host(.user-is-tabbing) .duet-breadcrumb.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) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-breadcrumb:focus, :host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumb.js

@@ -5,21 +5,25 @@ import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-sma
 import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
-import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
 export class DuetBreadcrumb {
     constructor() {
-        this.currentCrumb = {
-            fi: "disabled. Nykyinen sivu",
-            sv: "disabled. Visa mer",
-            en: "disabled. Nuvarande sida",
-        };
-        this.hasSlottedContent = false;
+        /**
+         * Theme
+         */
         this.theme = "";
-        this.language = getLanguage();
+        /**
+         * Href for the link. Should be left empty for the last item, which should be the current page.
+         */
         this.href = "";
+        /**
+         * Icon
+         */
         this.icon = "arrow-right-small-icon";
+        /**
+         * Icon size
+         */
         this.iconSize = "x-small";
-        this.accessibleLabel = undefined;
+        this.hasSlottedContent = false;
     }
     /**
      * Component lifecycle events.
@@ -28,12 +32,10 @@ export class DuetBreadcrumb {
         inheritGlobalTheme(this);
     }
     connectedCallback() {
-        connectLanguageChangeObserver(this);
         subscribeTabbingChange(this);
         this.hasSlottedContent = Array.from(this.element.childNodes).length > 0;
     }
     disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
         unsubscribeTabbingChange(this);
     }
     /**
@@ -41,15 +43,16 @@ export class DuetBreadcrumb {
      * Always the last one in the class.
      */
     render() {
-        var _a;
-        return (h(Host, { key: '2d557fd06bc2f923fc3a1d6076008cb9cdadad39', role: "listitem" }, h("div", { key: 'a38aac901dc9b016d5efd3ba22b34d256655e282', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '285c0b2cbdedbaa26bd587bc1a72e92cce833f8b', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: 'c17c5fbf1f84df0766452a9f06119fa4f7880949', class: {
+        const Tag = this.href ? "a" : "span";
+        return (h(Host, { key: 'bee5edcaaa257aef537393e9620b269c242dff1d', role: "listitem" }, h("div", { key: 'fe46fa6ccf1f40968db1b82d27b11c5a5a450594', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '0f01a2a92376855fc341815886b031498a5085fd', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h(Tag, { key: 'cffeeca1d48de91945115a38bfcb1ae5efe702db', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
+                "icon-only": this.icon && !this.hasSlottedContent,
+            }, href: this.href || undefined, "aria-label": this.accessibleLabel || this.element.textContent, "aria-current": this.href ? undefined : "page" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            h("duet-icon", { key: 'e42d427cb7512929790a36cf7bcb8309ad615ad7', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'e993ee67d5a14e88e808ad636eb8778d2ed334fd', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: 'c0a6bb1e1aed7da544851e852023f0139a328022' })))));
+            h("duet-icon", { key: 'ee27c63d28c4c9187a8242a811532322749f94fd', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && h("duet-spacer", { key: 'e0a220aa059a782dc8716f9fcda3e945bc048f40', size: "x-small", direction: "horizontal" }),
+        ], h("slot", { key: '86454db36ecfe921c4b1719f1d9b7807da79a272' })))));
     }
     static get is() { return "duet-breadcrumb"; }
     static get encapsulation() { return "shadow"; }
@@ -67,6 +70,7 @@ export class DuetBreadcrumb {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -87,12 +91,12 @@ export class DuetBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -103,16 +107,16 @@ export class DuetBreadcrumb {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Href"
+                    "text": "Href for the link. Should be left empty for the last item, which should be the current page."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetIconName",
@@ -133,12 +137,12 @@ export class DuetBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"arrow-right-small-icon\""
             },
             "iconSize": {
                 "type": "string",
+                "attribute": "icon-size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconSize",
@@ -159,12 +163,12 @@ export class DuetBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-size",
                 "reflect": false,
                 "defaultValue": "\"x-small\""
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -179,15 +183,9 @@ export class DuetBreadcrumb {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             }
         };
     }
-    static get states() {
-        return {
-            "language": {}
-        };
-    }
     static get elementRef() { return "element"; }
 }

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.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;
   display: block;
   width: 100%;
 }
@@ -38,6 +38,7 @@
 
 .duet-breadcrumbs {
   position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -51,16 +52,15 @@
   width: 100%;
   max-width: 1384px;
   min-height: 36px;
-  margin: 0 28px;
+  margin: 0 28px 0 20px;
 }
 .duet-breadcrumbs .list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0;
   align-items: center;
   justify-content: flex-start;
-  padding: 10px 0;
   color: inherit;
   list-style: none;
 }
@@ -140,4 +140,15 @@
 }
 .duet-breadcrumbs.plain .bottom-border {
   display: none;
+}
+
+:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
+  color: rgb(126, 2, 35);
+}
+:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer {
+  background: rgb(230, 23, 64);
 }