@duetds/components 4.34.3 → 4.34.4

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

@@ -0,0 +1,57 @@
+*,
+*::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;
+  display: block;
+  width: 100%;
+}
+
+.duet-breadcrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  height: 100%;
+  font-size: 0.875rem;
+  color: #00294d;
+  text-decoration: none;
+}
+.duet-breadcrumb:hover {
+  color: #004d80;
+}
+.duet-breadcrumb.duet-theme-turva {
+  color: #171c3a;
+}
+.duet-breadcrumb.duet-theme-turva:hover {
+  color: #940925;
+}
+.duet-breadcrumb:focus {
+  outline: 0;
+}
+.duet-breadcrumb:active {
+  opacity: 0.75;
+}
+:host(.user-is-tabbing) .duet-breadcrumb:focus {
+  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+}
+: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;
+}

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

@@ -0,0 +1,131 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetBreadcrumb {
+  constructor() {
+    /**
+     * Theme
+     */
+    this.theme = "";
+    /**
+     * Href
+     */
+    this.href = "";
+    /**
+     * Icon
+     */
+    this.icon = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("a", { class: {
+          "duet-breadcrumb": true,
+          "duet-theme-turva": this.theme === "turva",
+        }, href: this.href, "aria-label": this.accessibleLabel },
+        this.icon && h("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }),
+        !this.icon && h("slot", null))));
+  }
+  static get is() { return "duet-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-breadcrumb.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-breadcrumb.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "href": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Href"
+      },
+      "attribute": "href",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "icon": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetIconName",
+        "resolved": "string",
+        "references": {
+          "DuetIconName": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon"
+      },
+      "attribute": "icon",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "accessibleLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Adds accessible label for the link that is only shown for screen readers.\nTypically, this label text replaces the visible text on the link for users\nwho use assistive technology."
+      },
+      "attribute": "accessible-label",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,63 @@
+*,
+*::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;
+  display: block;
+}
+
+.duet-breadcrumbs {
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-breadcrumbs ol {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 10px 16px;
+  color: #00294d;
+  list-style: none;
+  background: #f3f9fc;
+  border-bottom: 1px solid #e1e3e6;
+}
+@media (min-width: 62em) {
+  .duet-breadcrumbs ol {
+    padding: 10px 36px;
+  }
+}
+.duet-breadcrumbs.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";
+}
+.duet-breadcrumbs.duet-theme-turva ol {
+  color: #171c3a;
+  background: #fcf3f4;
+}
+.duet-breadcrumbs .duet-breadrumbs-arrow {
+  display: inherit;
+  align-items: center;
+  justify-content: center;
+  width: 0.375rem;
+  height: 0.375rem;
+}
+.duet-breadcrumbs .hide {
+  display: none;
+}

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

@@ -0,0 +1,104 @@
+/*!
+ * Built with Duet Design System
+ */
+import arrowRightSmallIcon from "@duetds/icons/lib/assets/action-arrow-right-small";
+import { Build, Component, Element, Fragment, h, Host, Prop, State } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+export class DuetBreadcrumbs {
+  constructor() {
+    this.observers = [];
+    this.breadcrumbsAriaLabel = getLocaleString({
+      fi: "Murupolku",
+      sv: "Ströbröd",
+      en: "Breadcrumbs",
+    });
+    /**
+     * Theme
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.children = Array.from(this.element.children);
+  }
+  connectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    Array.from(this.element.children).forEach(child => {
+      const observer = new MutationObserver(() => (this.children = Array.from(this.element.children)));
+      observer.observe(child, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+      });
+      this.observers = [...this.observers, observer];
+    });
+  }
+  disconnectedCallback() {
+    if (Build.isServer) {
+      return;
+    }
+    this.observers.forEach(observer => observer.disconnect());
+    this.observers = [];
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h(Host, null,
+      h("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
+          "duet-breadcrumbs": true,
+          "duet-theme-turva": this.theme === "turva",
+        } },
+        h("ol", null, this.children.map((child, index) => (h(Fragment, null,
+          index > 0 && (h("li", { "aria-hidden": "true" },
+            h("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" }))),
+          h("li", { innerHTML: child.outerHTML }),
+          h("div", { class: "hide" },
+            h("slot", null)))))))));
+  }
+  static get is() { return "duet-breadcrumbs"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["duet-breadcrumbs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["duet-breadcrumbs.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "DuetTheme",
+        "resolved": "\"\" | \"default\" | \"turva\"",
+        "references": {
+          "DuetTheme": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "\"\""
+    }
+  }; }
+  static get states() { return {
+    "children": {}
+  }; }
+  static get elementRef() { return "element"; }
+}

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

@@ -330,6 +330,7 @@
 }
 .duet-button.destructive-primary:hover {
   background: #b21c4e;
+  border-color: #b21c4e;
   box-shadow: 0 4px 20px rgba(34, 34, 34, 0.1);
 }
 .duet-theme-turva .duet-button.destructive-primary:hover {

package/lib/custom-elements-bundle/index.d.ts

@@ -14,6 +14,18 @@ export const DuetBadge: {
   new (): DuetBadge;
 };
 
+interface DuetBreadcrumb extends Components.DuetBreadcrumb, HTMLElement {}
+export const DuetBreadcrumb: {
+  prototype: DuetBreadcrumb;
+  new (): DuetBreadcrumb;
+};
+
+interface DuetBreadcrumbs extends Components.DuetBreadcrumbs, HTMLElement {}
+export const DuetBreadcrumbs: {
+  prototype: DuetBreadcrumbs;
+  new (): DuetBreadcrumbs;
+};
+
 interface DuetButton extends Components.DuetButton, HTMLElement {}
 export const DuetButton: {
   prototype: DuetButton;

package/lib/custom-elements-bundle/index.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.9"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.10"};
 
 let scopeId;
 let contentRef;
@@ -1924,7 +1924,7 @@ let DuetBadge$1 = class extends H {
   }
   /**
    * render() function
-   * Always the last one in the class.
+   * Always the last one of the class.
    */
   render() {
     return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("div", { class: {
@@ -1936,6 +1936,102 @@ let DuetBadge$1 = class extends H {
   static get style() { return duetBadgeCss; }
 };
 
+const duetBreadcrumbCss = "*,*::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;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}: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}";
+
+let DuetBreadcrumb$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme
+     */
+    this.theme = "";
+    /**
+     * Href
+     */
+    this.href = "";
+    /**
+     * Icon
+     */
+    this.icon = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h$1(Host, null, h$1("a", { class: {
+        "duet-breadcrumb": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, href: this.href, "aria-label": this.accessibleLabel }, this.icon && h$1("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && h$1("slot", null))));
+  }
+  static get style() { return duetBreadcrumbCss; }
+};
+
+var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
+
+const duetBreadcrumbsCss = "*,*::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;display:block}.duet-breadcrumbs{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs ol{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 16px;color:#00294d;list-style:none;background:#f3f9fc;border-bottom:1px solid #e1e3e6}@media (min-width: 62em){.duet-breadcrumbs ol{padding:10px 36px}}.duet-breadcrumbs.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\"}.duet-breadcrumbs.duet-theme-turva ol{color:#171c3a;background:#fcf3f4}.duet-breadcrumbs .duet-breadrumbs-arrow{display:inherit;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}.duet-breadcrumbs .hide{display:none}";
+
+let DuetBreadcrumbs$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.observers = [];
+    this.breadcrumbsAriaLabel = getLocaleString({
+      fi: "Murupolku",
+      sv: "Ströbröd",
+      en: "Breadcrumbs",
+    });
+    /**
+     * Theme
+     */
+    this.theme = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.children = Array.from(this.element.children);
+  }
+  connectedCallback() {
+    Array.from(this.element.children).forEach(child => {
+      const observer = new MutationObserver(() => (this.children = Array.from(this.element.children)));
+      observer.observe(child, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+      });
+      this.observers = [...this.observers, observer];
+    });
+  }
+  disconnectedCallback() {
+    this.observers.forEach(observer => observer.disconnect());
+    this.observers = [];
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h$1(Host, null, h$1("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
+        "duet-breadcrumbs": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h$1("ol", null, this.children.map((child, index) => (h$1(Fragment, null, index > 0 && (h$1("li", { "aria-hidden": "true" }, h$1("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" }))), h$1("li", { innerHTML: child.outerHTML }), h$1("div", { class: "hide" }, h$1("slot", null)))))))));
+  }
+  get element() { return this; }
+  static get style() { return duetBreadcrumbsCss; }
+};
+
 const DuetStringsExternalDefaults = {
   fi: "Avautuu uuteen ikkunaan",
   sv: "Öppnas i nytt fönster",
@@ -2310,7 +2406,7 @@ function convertToColorName(name = "", theme = "") {
   return colorResolution;
 }
 
-const duetButtonCss = "*,*::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;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;min-width:8rem;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-weight:600;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#0077b3 !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){padding:9px 19px 10px !important;min-width:5.3333333333rem;font-size:0.875rem}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}.duet-theme-turva .duet-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30 !important}.duet-button .duet-button-contents{position:relative;display:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button:active{opacity:0.75;transition:none}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{color:#c60c30 !important;border-color:#e4e4e6}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.default.duet-button-negative{background-color:white}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:#e4e4e6 !important}.duet-button.default.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.primary{color:white !important;background:#0077b3;border-color:#0077b3}.duet-theme-turva .duet-button.primary{color:white !important;background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.primary:focus{outline:0;box-shadow:0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}.duet-button.secondary{color:#00294d !important;background:transparent;border-color:#00294d}.duet-theme-turva .duet-button.secondary{color:#171c3a !important;border-color:#171c3a}.duet-button.secondary:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.secondary.duet-button-negative{color:#e1e3e6 !important;border-color:white}.duet-theme-turva .duet-button.secondary.duet-button-negative{color:#e4e4e6 !important}.duet-button.secondary.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.negative{color:#00294d !important;background:white;border-color:white}.duet-theme-turva .duet-button.negative{color:#171c3a !important}.duet-button.negative:hover{color:white !important;background:transparent;border-color:white}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:white !important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive-primary{color:white !important;background:#e02a0d;border-color:#e02a0d}.duet-button.destructive-primary:hover{background:#b21c4e;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:white !important;background:#b3220a;border-color:#b3220a}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:#c60c30 !important;background:transparent;border-color:transparent}.duet-button.plain.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:#657787 !important;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}.duet-button.plain:hover{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:#940925 !important}.duet-button.plain.duet-button-negative{color:white !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:#e4e4e6 !important}.duet-button.plain.duet-button-negative:hover{color:#0077b3 !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:#c60c30 !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:#657787 !important;background:#e1e3e6 !important;border-color:#e1e3e6 !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-button-is-loading.primary{color:white}.duet-button-is-loading.default{color:#0077b3}.duet-button-is-loading.default.duet-theme-turva{color:#c60c30}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
+const duetButtonCss = "*,*::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;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;min-width:8rem;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-weight:600;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#0077b3 !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){padding:9px 19px 10px !important;min-width:5.3333333333rem;font-size:0.875rem}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}.duet-theme-turva .duet-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30 !important}.duet-button .duet-button-contents{position:relative;display:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button:active{opacity:0.75;transition:none}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{color:#c60c30 !important;border-color:#e4e4e6}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.default.duet-button-negative{background-color:white}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:#e4e4e6 !important}.duet-button.default.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.primary{color:white !important;background:#0077b3;border-color:#0077b3}.duet-theme-turva .duet-button.primary{color:white !important;background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.primary:focus{outline:0;box-shadow:0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}.duet-button.secondary{color:#00294d !important;background:transparent;border-color:#00294d}.duet-theme-turva .duet-button.secondary{color:#171c3a !important;border-color:#171c3a}.duet-button.secondary:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.secondary.duet-button-negative{color:#e1e3e6 !important;border-color:white}.duet-theme-turva .duet-button.secondary.duet-button-negative{color:#e4e4e6 !important}.duet-button.secondary.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.negative{color:#00294d !important;background:white;border-color:white}.duet-theme-turva .duet-button.negative{color:#171c3a !important}.duet-button.negative:hover{color:white !important;background:transparent;border-color:white}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:white !important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive-primary{color:white !important;background:#e02a0d;border-color:#e02a0d}.duet-button.destructive-primary:hover{background:#b21c4e;border-color:#b21c4e;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:white !important;background:#b3220a;border-color:#b3220a}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:#c60c30 !important;background:transparent;border-color:transparent}.duet-button.plain.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:#657787 !important;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}.duet-button.plain:hover{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:#940925 !important}.duet-button.plain.duet-button-negative{color:white !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:#e4e4e6 !important}.duet-button.plain.duet-button-negative:hover{color:#0077b3 !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:#c60c30 !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:#657787 !important;background:#e1e3e6 !important;border-color:#e1e3e6 !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-button-is-loading.primary{color:white}.duet-button-is-loading.default{color:#0077b3}.duet-button-is-loading.default.duet-theme-turva{color:#c60c30}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
 
 let DuetButton$1 = class extends H {
   constructor() {
@@ -11664,6 +11760,8 @@ let DuetVisuallyHidden$1 = class extends H {
 globalScripts();
 const DuetAlert = /*@__PURE__*/proxyCustomElement(DuetAlert$1, [1,"duet-alert",{"theme":[1025],"accessibleLabelDefaults":[1,"accessible-label-default"],"accessibleLabel":[1,"accessible-label"],"announcements":[4],"icon":[1],"autoDismiss":[2,"auto-dismiss"],"margin":[1],"padding":[1],"variation":[1],"dismissible":[4],"isDismissed":[32],"timeoutID":[32]}]);
 const DuetBadge = /*@__PURE__*/proxyCustomElement(DuetBadge$1, [1,"duet-badge",{"theme":[1025],"variation":[1],"margin":[1]}]);
+const DuetBreadcrumb = /*@__PURE__*/proxyCustomElement(DuetBreadcrumb$1, [1,"duet-breadcrumb",{"theme":[1025],"href":[1025],"icon":[1025],"accessibleLabel":[1,"accessible-label"]}]);
+const DuetBreadcrumbs = /*@__PURE__*/proxyCustomElement(DuetBreadcrumbs$1, [1,"duet-breadcrumbs",{"theme":[1025],"children":[32]}]);
 const DuetButton = /*@__PURE__*/proxyCustomElement(DuetButton$1, [1,"duet-button",{"accessibleLabel":[1,"accessible-label"],"accessibleControls":[1,"accessible-controls"],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleExpanded":[4,"accessible-expanded"],"accessiblePressed":[4,"accessible-pressed"],"loading":[4],"variation":[1],"negative":[4],"theme":[1025],"margin":[1],"padding":[1],"wrapping":[1],"expand":[4],"fixed":[4],"disabled":[516],"name":[1],"value":[1],"identifier":[1],"submit":[516],"external":[4],"language":[1],"accessibleLabelExternalDefaults":[1,"accessible-label-external-default"],"accessibleLabelExternal":[1,"accessible-label-external"],"icon":[1],"color":[1],"iconRight":[4,"icon-right"],"iconSize":[1,"icon-size"],"size":[1],"iconOnly":[4,"icon-only"],"url":[513]}]);
 const DuetCaption = /*@__PURE__*/proxyCustomElement(DuetCaption$1, [1,"duet-caption",{"theme":[1025],"margin":[1],"selected":[4],"size":[1]}]);
 const DuetCard = /*@__PURE__*/proxyCustomElement(DuetCard$1, [1,"duet-card",{"accessibleLabel":[1,"accessible-label"],"heading":[1],"secondaryHeading":[1,"secondary-heading"],"variation":[1],"collapsible":[4],"open":[1540],"headingLevel":[1,"heading-level"],"icon":[1],"image":[1],"background":[1],"padding":[1],"margin":[1],"theme":[1025],"url":[1]}]);
@@ -11722,6 +11820,8 @@ const defineCustomElements = (opts) => {
     [
       DuetAlert,
   DuetBadge,
+  DuetBreadcrumb,
+  DuetBreadcrumbs,
   DuetButton,
   DuetCaption,
   DuetCard,
@@ -12175,4 +12275,4 @@ const shadowCss = /*#__PURE__*/Object.freeze({
   scopeCss: scopeCss
 });
 
-export { DuetAlert, DuetBadge, DuetButton, DuetCaption, DuetCard, DuetCheckbox, DuetChoice, DuetChoiceGroup, DuetCollapsible, DuetCookieConsent, DuetDatePicker, DuetDivider, DuetEditableTable, DuetEditableTableButton, DuetEditableTableItem, DuetEmptyState, DuetFieldset, DuetFooter, DuetGrid, DuetGridItem, DuetHeader, DuetHeading, DuetHero, DuetIcon, DuetInput, DuetLabel, DuetLayout, DuetLink, DuetList, DuetListItem, DuetLogo, DuetModal, DuetNotification, DuetNotificationDrawer, DuetNumberInput, DuetParagraph, DuetProgress, DuetRadio, DuetRadioGroup, DuetRangeSlider, DuetSelect, DuetSpacer, DuetSpinner, DuetStep, DuetStepper, DuetTab, DuetTabGroup, DuetTable, DuetTextarea, DuetToggle, DuetTooltip, DuetTray, DuetUpload, DuetUploadAriaStatus, DuetVisuallyHidden, defineCustomElements, setAssetPath, setPlatformOptions };
+export { DuetAlert, DuetBadge, DuetBreadcrumb, DuetBreadcrumbs, DuetButton, DuetCaption, DuetCard, DuetCheckbox, DuetChoice, DuetChoiceGroup, DuetCollapsible, DuetCookieConsent, DuetDatePicker, DuetDivider, DuetEditableTable, DuetEditableTableButton, DuetEditableTableItem, DuetEmptyState, DuetFieldset, DuetFooter, DuetGrid, DuetGridItem, DuetHeader, DuetHeading, DuetHero, DuetIcon, DuetInput, DuetLabel, DuetLayout, DuetLink, DuetList, DuetListItem, DuetLogo, DuetModal, DuetNotification, DuetNotificationDrawer, DuetNumberInput, DuetParagraph, DuetProgress, DuetRadio, DuetRadioGroup, DuetRangeSlider, DuetSelect, DuetSpacer, DuetSpinner, DuetStep, DuetStepper, DuetTab, DuetTabGroup, DuetTable, DuetTextarea, DuetToggle, DuetTooltip, DuetTray, DuetUpload, DuetUploadAriaStatus, DuetVisuallyHidden, defineCustomElements, setAssetPath, setPlatformOptions };