@duetds/components 10.0.0-alpha.8 → 10.0.0

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;
@@ -31,6 +31,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 36px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -56,11 +59,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 +88,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 +101,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 +126,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 +160,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 +210,49 @@
   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: 12px;
+}
+:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22540%22%20height%3D%2258%22%20viewBox%3D%220%200%20540%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M540%2018.0729L540%2057.6749H0L0.000139455%2011.2563C0.000139455%202.85822%208.31858%20-2.59156%2015.3307%201.26796C33.6821%2011.3367%2055.6983%2020.0831%2080.3633%2027.3465C134.438%2043.276%20201.239%2052.0939%20270%2052.0939C338.761%2052.0939%20405.572%2043.276%20459.637%2027.3465C484.302%2020.0742%20506.318%2011.3277%20524.669%201.25902C531.682%20-2.59156%20540%202.85822%20540%2011.2563V18.0729Z%22%20fill%3D%22%23FBEBE1%22%2F%3E%0A%3C%2Fsvg%3E%0A");
+  mask-repeat: no-repeat;
+  mask-position: bottom;
+  mask-size: contain;
+  scale: 101%;
+}
+: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;
+}
+@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;
+  }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {
+    padding: 20px;
+    padding-right: 0;
+  }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {
+    border-radius: 12px;
+  }
+  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {
+    display: none;
+  }
 }

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 getColorByName("turva-nude-50", this.theme);
+                }
+                else {
+                    return getColorByName("gray-lighter", this.theme);
+                }
+            }
+            return getColorByName(this.backgroundColor, this.theme);
+        };
     }
     /**
      * Component lifecycle events.
@@ -81,24 +122,29 @@ 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,
         };
         const pictureSource = {
-            img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: "lazy",
+                class: "image",
+                role: this.imageAlt ? undefined : "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: '38f57d004daf85f022fb1e8289a00d63dbe78a31', class: { "duet-m-0": this.margin === "none" } }, h("aside", { key: '0667b2510bdf502f24178e226897239cc0905843', 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: 'b7266d2d9986afecfc9fa233950090500ac811b4', class: "visual" }, h("div", { key: 'a3b71e01ad58dd30a19413c2daad81fc0e5f617d', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: '8f687c33222c1f483c4354506729bd508c784f0f' }, pictureSource))), 1 > 2 && this.icon && (h("duet-icon", { key: '884f621a10b6dfbce2073ffe2bcce6d3582d4dcd', 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: 'cab35290e96c82eaee8605e89646a239de7396b0', style: bannerStyles, class: "brand-shape" })), h("div", { key: 'b05d73b8fa653e30db6e5310c017b2890ba0d572', class: "content" }, this.hasHeadingSlot && (h("div", { key: 'b5cb84dbabf050477d224f323b18b25d26e65a42', class: "heading" }, h("duet-heading", { key: '581d34f383f4679e06407583eadeacc0e2f651b4', 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: '285c1d82691487108eb3e52c8df65eb495b803dc' }, h("slot", { key: 'ba3c94dfe9dfc6900d41fe31ecd716e4c08bbaaa', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: 'f9d06d854f0dab9e11c1945436eca5757696818d', class: "description", style: { color } }, h("slot", { key: '72d05e038ee1a75f3c2ff6d353c0cc7891f00e06', name: "description" }))), this.hasActionSlot && (h("div", { key: '6f27c979244fd9093fbe55d3fb375f7b6c18711c', class: "action" }, h("slot", { key: '82532736b2e53a5020afc769526a0b824716cd66', name: "action" })))))));
     }
     static get is() { return "duet-banner"; }
     static get encapsulation() { return "shadow"; }
@@ -116,6 +162,7 @@ export class DuetBanner {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -136,12 +183,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 +209,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 +235,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 +261,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 +287,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 +313,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 +339,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 +359,31 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt attribute text for the image. If not provided, image is assigned presentation role."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "sources": {
                 "type": "string",
+                "attribute": "sources",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetSource[] | string",
@@ -338,11 +404,11 @@ export class DuetBanner {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "sources",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -363,12 +429,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 +455,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: 'e3bac4d65f78839055c45f4c4b7bd3da5485f484', role: "listitem" }, h("div", { key: '1feb1346cc8855bf09f723a86fb033508ea3892b', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '7ee4f27fd98952d5c7f90bc22c9d57dc2d028059', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: '41ec8a37cdfcda38d9873a44406ecf7554faa4f9', 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: 'dc43a33c4e67623deb9f7ea4980f1df6ffd9f5d2', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && h("duet-spacer", { key: 'a4f0bb0d08370e92dd2410e98f506494be21afab', size: "x-small", direction: "horizontal" }),
-        ], h("slot", { key: '1f7a919751cb64f71118b681b6d8450f980c69f0' })))));
+            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"; }
 }