@duetds/components 4.34.2 → 4.35.1

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.8"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.12"};
 
 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{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive: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() {
@@ -2326,6 +2422,7 @@ let DuetButton$1 = class extends H {
     /**
      * Style variation of the button.
      * @negative - value is deprecated and should be used in combination with negative prop in the future
+     * @destructive - value is deprecated and should be replace with destructive-secondary
      */
     this.variation = "default";
     /**
@@ -2533,7 +2630,7 @@ let DuetButton$1 = class extends H {
         "duet-theme-turva": this.theme === "turva",
         "duet-button-negative": this.negative || this.variation === "negative",
         [this.variation]: true,
-      } }, this.url ? (h$1("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self" }), commonChildren, this.external && h$1("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h$1("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined }), commonChildren)), this.loading && h$1("duet-spinner", { color: "currentColor" }))));
+      } }, this.url ? (h$1("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h$1("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h$1("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined }), commonChildren)), this.loading && h$1("duet-spinner", { color: "currentColor" }))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -7436,7 +7533,7 @@ let DuetLink$1 = class extends H {
         "duet-link": true,
         "duet-link-is-external": this.external,
         "duet-theme-turva": this.theme === "turva",
-      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link" }, h$1("slot", null), this.external && (h$1(Fragment, null, h$1("duet-visually-hidden", null, this.accessibleLabelExternal), h$1("span", { class: "duet-link-external" }, h$1("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
+      }, target: this.external ? "_blank" : "_self", "aria-label": this.accessibleLabel, id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, h$1("slot", null), this.external && (h$1(Fragment, null, h$1("duet-visually-hidden", null, this.accessibleLabelExternal), h$1("span", { class: "duet-link-external" }, h$1("duet-icon", { icon: actionNewWindowSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))))));
   }
   static get delegatesFocus() { return true; }
   static get style() { return duetLinkCss; }
@@ -7762,6 +7859,10 @@ let DuetModal$1 = class extends H {
      * Use this property when you need to have the modal dialog initially active.
      */
     this.active = false;
+    /**
+     * Use this property when you want the modal to close when clicked outside of modal.
+     */
+    this.closeOnBlur = false;
   }
   openChanged() {
     if (this.open) {
@@ -7874,7 +7975,15 @@ let DuetModal$1 = class extends H {
       } }, h$1(FocusGuard, { moveFocusTo: this.buttonEl }), h$1("div", { class: {
         "duet-modal-inner": true,
         "duet-modal-large": this.size === "large",
-      }, role: "document" }, h$1("div", { class: { "duet-modal": true, [this.size]: true } }, h$1("duet-spacer", null), h$1("div", { class: "duet-modal-close" }, h$1("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h$1("div", { class: {
+      }, role: "document", onClick: e => {
+        if (this.closeOnBlur) {
+          this.closeModal(e);
+        }
+      } }, h$1("div", { class: { "duet-modal": true, [this.size]: true }, onClick: e => {
+        if (this.closeOnBlur) {
+          e.stopPropagation();
+        }
+      } }, h$1("duet-spacer", null), h$1("div", { class: "duet-modal-close" }, h$1("duet-button", { ref: button => (this.buttonEl = button), variation: "plain", accessibleLabel: this.accessibleCloseLabel, color: closeColor, iconSize: "large", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: ev => this.closeModal(ev), fixed: true })), h$1("div", { class: {
         "duet-modal-body": true,
         "duet-modal-gutter-small": this.gutterSize === "small",
         "duet-modal-gutter-medium": this.gutterSize === "medium",
@@ -8990,6 +9099,165 @@ let DuetRangeSlider$1 = class extends H {
   static get style() { return duetRangeSliderCss; }
 };
 
+const duetScrollableCss = "*,*::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;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{display:none}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
+
+let DuetScrollable$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Private variables and constants index
+     */
+    this.currentIndex = 0;
+    this.tabListElement = undefined;
+    this.tabListClass = "duet-scrollable-list";
+    this.tablistAtStart = true;
+    this.isTabContentSmallerThanWrapper = false;
+    this.tablistAtEnd = false;
+    this.childrenData = {};
+    this.resizeObserver = new ResizeObserver(entries => {
+      var _a, _b, _c, _d;
+      // otherwise, something is wrong, expecting 1 element only
+      if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
+        const currentWidth = (_b = (_a = entries[0]) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
+        const scrollWidth = (_d = (_c = entries[0]) === null || _c === void 0 ? void 0 : _c.target) === null || _d === void 0 ? void 0 : _d.scrollWidth;
+        // in order to avoid state "jumping" on the boundary condition we add a few pixels to the comparison
+        this.isTabContentSmallerThanWrapper = scrollWidth > currentWidth + 5;
+      }
+    });
+    /**
+     * Theme of duet-tab-scrollable. When used this will override the color setting and
+     * use "primary" or "primary-turva" as the color depending on which theme
+     * is chosen.
+     */
+    this.theme = "";
+    /**
+     * Optional identifier to add to buttons in the tab group
+     */
+    this.identifier = "";
+    /**
+     * Selected element
+     */
+    this.selected = 0;
+  }
+  watchPropHandler(newValue) {
+    this.scrollToTab(newValue, "center");
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    const slotted = this.host.children;
+    this.childrenData = { hasChildren: slotted && slotted.length > 0, numberOfChildren: slotted && slotted.length };
+  }
+  componentDidLoad() {
+    this.resizeObserver.observe(this.tabListElement);
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  /**
+   * Private methods.
+   */
+  getLastVisibleElement() {
+    const clientWidth = this.tabListElement.clientWidth;
+    const xValues = Array.from(this.host.querySelectorAll("button")).findIndex(element => element.getBoundingClientRect().x > clientWidth);
+    return xValues;
+  }
+  getFirstVisibleElement() {
+    const buttonCollection = this.host.querySelectorAll("button");
+    // reverse the array because we want the first invisible element form the middle, not the first in the list
+    const arrayOfXValues = Array.from(buttonCollection).map(el => el.getBoundingClientRect().x - el.getBoundingClientRect().width);
+    const xValues = arrayOfXValues.findIndex(element => {
+      return element > 0;
+    });
+    return xValues;
+  }
+  updateScrollButtons(container = this.tabListElement) {
+    if (container.scrollLeft <= 0) {
+      this.tablistAtStart = true;
+    }
+    else if (container.scrollLeft > 0) {
+      this.tablistAtStart = false;
+    }
+    if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
+      this.tablistAtEnd = true;
+    }
+    else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
+      this.tablistAtEnd = false;
+    }
+  }
+  scrollToTab(index = this.currentIndex, inline) {
+    if (!this.childrenData.hasChildren) {
+      return;
+    }
+    if (index + 1 >= this.childrenData.numberOfChildren) {
+      index = this.childrenData.numberOfChildren - 1;
+    }
+    if (index < 0) {
+      index = 0;
+    }
+    const buttons = this.host.querySelectorAll("button");
+    // store previous position
+    let prevPosition = buttons[0].getBoundingClientRect().x;
+    // iterations to run
+    let ticksWhereScrollDidNotHappen = 5;
+    const getAnimationFrame = () => {
+      // if we get the same value enter the logic loop
+      if (buttons[0].getBoundingClientRect().x === prevPosition) {
+        ticksWhereScrollDidNotHappen--;
+        // When iteration is not complete run the calculation again
+        if (ticksWhereScrollDidNotHappen !== 0) {
+          window.requestAnimationFrame(getAnimationFrame);
+          return;
+        }
+        this.updateScrollButtons();
+      }
+      else {
+        window.requestAnimationFrame(getAnimationFrame);
+        prevPosition = buttons[0].getBoundingClientRect().x;
+      }
+    };
+    buttons[index].scrollIntoView({ behavior: "smooth", inline });
+    window.requestAnimationFrame(getAnimationFrame);
+  }
+  scrollLeft() {
+    this.tablistAtEnd = false;
+    const first = this.getFirstVisibleElement() - 1;
+    this.scrollToTab(first, "center");
+  }
+  scrollRight() {
+    this.tablistAtStart = false;
+    const last = this.getLastVisibleElement() + 1;
+    this.scrollToTab(last, "center");
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h$1(Host, { class: {
+        "duet-theme-turva": this.theme === "turva",
+        "duet-theme-default": this.theme === "default",
+      } }, h$1("div", { class: "duet-scrollable-items" }, h$1("button", { part: `${this.identifier}-button-left`, "aria-hidden": "true", class: {
+        "duet-scrollable-button": true,
+        "duet-scrollable-button--left": true,
+        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+      }, onClick: () => this.scrollLeft(), disabled: this.tablistAtStart, tabindex: "-1" }, h$1("duet-icon", { name: "action-arrow-left-small", size: "small", margin: "none" })), h$1("div", { class: this.tabListClass, onScroll: () => this.updateScrollButtons(), ref: element => (this.tabListElement = element) }, h$1("slot", null)), h$1("button", { part: `${this.identifier}-button-right`, "aria-hidden": "true", class: {
+        "duet-scrollable-button": true,
+        "duet-scrollable-button--right": true,
+        "duet-scrollable-button--occluded": !this.isTabContentSmallerThanWrapper,
+      }, onClick: () => this.scrollRight(), disabled: this.tablistAtEnd, tabindex: "-1" }, h$1("duet-icon", { name: "action-arrow-right-small", size: "small", margin: "none" })))));
+  }
+  get host() { return this; }
+  static get watchers() { return {
+    "selected": ["watchPropHandler"]
+  }; }
+  static get style() { return duetScrollableCss; }
+};
+
 const duetSelectCss = "@charset \"UTF-8\";*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{position:relative;top:4px;right:auto}}.duet-select-placeholder.sc-duet-select{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:white}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !important;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:400;line-height:1.25}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select::after{content:\"  \"}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;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:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-help.sc-duet-select{display:block;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:0.875rem;font-weight:400;line-height:1.25;color:#657787;border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{color:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 function isOptionGroup(item) {
@@ -9499,6 +9767,18 @@ let DuetTab$1 = class extends H {
   constructor() {
     super();
     this.__registerHost();
+    /**
+     * Defaults for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescriptionDefault = null;
+    /**
+     * String for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescription = this.accessibleDescriptionDefault
+      ? getLocaleString(this.accessibleDescriptionDefault)
+      : null;
   }
   /**
    * render() function
@@ -9506,18 +9786,19 @@ let DuetTab$1 = class extends H {
    */
   render() {
     {
-      return (h$1("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected } }, h$1("slot", null)));
+      return (h$1("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription }, h$1("slot", null)));
     }
   }
   static get style() { return duetTabCss; }
 };
 
-const duetTabGroupCss = "*.sc-duet-tab-group,*.sc-duet-tab-group::after,*.sc-duet-tab-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-tab-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs.sc-duet-tab-group{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-hidden.sc-duet-tab-group{display:block}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-group-tabs.sc-duet-tab-group{border-bottom-color:#e4e4e6 !important}@media (min-width: 36em){duet-select.sc-duet-tab-group{display:none !important}}.duet-tab-button.sc-duet-tab-group{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;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;line-height:1.1;color:#00294d !important;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-style:solid;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}.duet-tab-button.duet-m-0.sc-duet-tab-group{margin:0 !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a !important;border-color:#e4e4e6}.duet-tab-button.duet-p-0.sc-duet-tab-group{padding:0 !important}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button.sc-duet-tab-group:hover{z-index:200;border-color:#909599}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:hover{border-color:#747475 !important}.duet-tab-button.sc-duet-tab-group:active{opacity:0.75;transition:none}.duet-tab-button.selected.sc-duet-tab-group{z-index:201;color:white !important;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:white !important;background-color:#171c3a;border-color:#171c3a !important}.duet-tab-button.sc-duet-tab-group:focus{z-index:200;outline:0}.user-is-tabbing.sc-duet-tab-group-h .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}.user-is-tabbing.sc-duet-tab-group-h .duet-theme-turva.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button.sc-duet-tab-group:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button.sc-duet-tab-group:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button.sc-duet-tab-group:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.sc-duet-tab-group+.duet-tab-button.sc-duet-tab-group{margin-left:36px}.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#0077b3 !important;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain.sc-duet-tab-group .duet-tab-button.selected.sc-duet-tab-group{color:#c60c30 !important;border-bottom-color:#c60c30 !important}.duet-tab-group-content.sc-duet-tab-group{position:relative;width:100%;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:400;line-height:1.5;color:#00294d;text-align:left}.duet-theme-turva.sc-duet-tab-group .duet-tab-group-content.sc-duet-tab-group{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
+const duetTabGroupCss = "*,*::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;-webkit-tap-highlight-color:transparent;display:block;width:100%}.duet-tab-group-tabs{margin-bottom:28px !important;display:block;width:100%;max-width:100%;padding-top:2px;list-style:none}.duet-tab-group-tabs.duet-m-0{margin:0 !important}.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:none}@media (min-width: 36em){.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden{display:block}}.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs{border-bottom-color:#e4e4e6}@media (min-width: 36em){duet-select{display:none !important}}.duet-tab-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;padding:20px;margin-top:-2px;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;line-height:1.1;color:#00294d;text-align:left;text-decoration:none;cursor:pointer;background:white;border:2px solid #e1e3e6;border-radius:0;transition:150ms ease}.duet-tab-button.duet-p-0{padding:0 !important}.duet-tab-button.duet-m-0{margin:0 !important}.duet-theme-turva .duet-tab-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:#171c3a;border-color:#e4e4e6}.duet-tab-button.duet-p-0{padding:0 !important}@media (min-width: 36em){.duet-tab-button{display:inline-block;width:auto;margin-left:-2px;border-right:2px solid #e1e3e6;border-radius:0}}.duet-tab-button:hover{z-index:200;border-color:#909599}.duet-theme-turva .duet-tab-button:hover{border-color:#747475}.duet-tab-button:active{opacity:0.75;transition:none}.duet-tab-button.selected{z-index:201;color:white;background:#00294d;border-color:#00294d;outline:0;box-shadow:none !important}.duet-theme-turva .duet-tab-button.selected{color:white;background-color:#171c3a;border-color:#171c3a}.duet-tab-button:focus{z-index:200;outline:0}:host(.user-is-tabbing) .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important}:host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important}.duet-tab-button:first-child{border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.duet-tab-button:first-child{border-top-right-radius:0;border-bottom-left-radius:4px}}.duet-tab-button:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}@media (min-width: 36em){.duet-tab-button:last-child{border-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px}}.duet-tab-variation-plain .duet-tab-button{display:inline-block;width:auto;padding-right:0;padding-left:0;border:0;border-radius:0;transition:none}.duet-tab-variation-plain .duet-tab-button+.duet-tab-button{margin-left:36px}.duet-tab-variation-plain .duet-tab-button.selected{color:#0077b3;background:white;border-bottom:3px solid #0077b3}.duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected{color:#c60c30;border-bottom-color:#c60c30}.duet-tab-group-content{position:relative;width:100%;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:400;line-height:1.5;color:#00294d;text-align:left}.duet-theme-turva .duet-tab-group-content{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}";
 
 let DuetTabGroup$1 = class extends H {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.duetChange = createEvent$2(this, "duetChange", 3);
     this.duetTabChange = createEvent$2(this, "duetTabChange", 7);
     this.id = createID("DuetTabGroup");
@@ -9531,6 +9812,15 @@ let DuetTabGroup$1 = class extends H {
      * Theme of the component.
      */
     this.theme = "";
+    /**
+     * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),
+     * if this is a number instead of true it will be used as "amount of items to scroll"
+     */
+    this.scrolls = false;
+    /**
+     * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+     */
+    this.collapses = true;
     /**
      * Style variation of the tab group.
      */
@@ -9560,6 +9850,10 @@ let DuetTabGroup$1 = class extends H {
      * Determines whether the label for the select element shown on mobile is visually hidden.
      */
     this.labelHidden = true;
+    /**
+     * Optional identifier to add to buttons in the tab group
+     */
+    this.identifier = this.id;
     /**
      * Controls the margin of the component.
      */
@@ -9585,12 +9879,18 @@ let DuetTabGroup$1 = class extends H {
         button.focus();
       }
     };
-    this.renderTab = (tab, index) => {
-      return (h$1("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": tab.selected ? "true" : "false", type: "button", class: {
-          "duet-p-0": this.padding === "none",
-          "duet-tab-button": true,
-          selected: tab.selected,
-        }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, tab.label));
+    this.renderTab = () => {
+      const renderedTabs = this.tabs.map((element, index) => {
+        return (h$1("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), part: `${this.identifier}-button`, type: "button", class: {
+            "duet-p-0": this.padding === "none",
+            "duet-tab-button": true,
+            selected: element.selected,
+          }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, element.label));
+      });
+      if (this.scrolls) {
+        return (h$1("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
+      }
+      return renderedTabs;
     };
   }
   /**
@@ -9609,7 +9909,7 @@ let DuetTabGroup$1 = class extends H {
         subtree: true,
       });
     }
-    this.updateTabs();
+    await this.updateTabs();
   }
   disconnectedCallback() {
     if (this.mutationO) {
@@ -9650,19 +9950,27 @@ let DuetTabGroup$1 = class extends H {
   /**
    * Local methods.
    */
+  getTabs() {
+    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
+    const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
+    if (localTabs.length === 0) {
+      throw new Error("[duet-tabs] Must have at least one tab");
+    }
+    // filter out any nested tabs
+    return localTabs;
+  }
   getButtonId(index) {
     return `${this.id}-button-${index}`;
   }
   getTabId(index) {
     return `${this.id}-tab-${index}`;
   }
+  getAccessibleDescription(index) {
+    const description = this.tabs[index].getAttribute("accessible-description") || null;
+    return description;
+  }
   async updateTabs() {
-    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
-    // filter out any nested tabs
-    this.tabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
-    if (this.tabs.length === 0) {
-      throw new Error("[duet-tabs] Must have at least one tab");
-    }
+    this.tabs = this.getTabs();
     this.tabs.forEach((tab, index) => {
       tab.id = this.getTabId(index);
       tab.setAttribute("aria-labelledby", this.getButtonId(index));
@@ -9670,6 +9978,7 @@ let DuetTabGroup$1 = class extends H {
         this.selected = index;
       }
     });
+    return;
   }
   /**
    * render() function
@@ -9680,13 +9989,16 @@ let DuetTabGroup$1 = class extends H {
         "duet-tab-group": true,
         "duet-theme-turva": this.theme === "turva",
         [`duet-tab-variation-${this.variation}`]: true,
-      } }, this.tabs.length > 3 && (h$1("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+        "duet-tab-group-scrolls": this.scrolls,
+        "duet-tab-group-collapses": this.collapses,
+      } }, this.tabs.length > 3 && this.collapses && (h$1("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.openTab(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
         return { label: tab.label, value: index.toString() };
       }) })), h$1("div", { role: "tablist", class: {
         "duet-m-0": this.margin === "none",
         "duet-tab-group-tabs": true,
         "duet-tab-group-hidden": this.tabs.length > 3,
-      } }, this.tabs.map(this.renderTab)), h$1("div", { class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, h$1("slot", null))));
+        "duet-tab-group-collapses": this.collapses,
+      } }, this.renderTab()), h$1("div", { class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, h$1("slot", null))));
   }
   get element() { return this; }
   static get style() { return duetTabGroupCss; }
@@ -11500,6 +11812,15 @@ let DuetUpload$1 = class extends H {
     this.nativeInput.click();
     return;
   }
+  /**
+   * Method for forcing a render of the upload list, element.files can be changed externally
+   * But it will only rerender on a new Map or a top Level change - this can be used to update
+   * the tabular data if the automatic re-render is no sufficient
+   */
+  async refresh() {
+    this.kick();
+    await this.setFocus();
+  }
   /**
    * Get list of files, divided in errors and valid sections
    */
@@ -11524,11 +11845,11 @@ let DuetUpload$1 = class extends H {
     let caption = this.description.replace(/{maxfiles}/g, this.maxFiles.toString());
     caption = caption.replace(/{maxbytes}/g, `${Math.floor(this.maxBytes / 1024 / 1024)} MB`);
     caption = caption.replace(/{filetypes}/g, this.allowedExtensions.split(",").join(", "));
-    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { label: this.label, caption: caption }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { label: this.label, caption: caption }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
         "duet-upload-filelist-empty": !this.files.size,
         "duet-upload-filelist": true,
         "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && (h$1("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("duet-spacer", { size: "large" }), !this.hideButton && (h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)), h$1("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h$1("duet-alert", null, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h$1("duet-spacer", { size: "medium" }), h$1("duet-visually-hidden", null, h$1("input", { ref: input => {
+      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && (h$1("duet-editable-table", { part: this.identifier ? `${this.identifier}-editable-table` : "duet-upload-editable-table", "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("duet-spacer", { size: "large" }), !this.hideButton && (h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h$1("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h$1("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h$1("duet-spacer", { size: "medium" }), h$1("duet-visually-hidden", null, h$1("input", { ref: input => {
         this.nativeInput = input;
       }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
         "duet-upload": true,
@@ -11654,6 +11975,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]}]);
@@ -11683,7 +12006,7 @@ const DuetLink = /*@__PURE__*/proxyCustomElement(DuetLink$1, [17,"duet-link",{"a
 const DuetList = /*@__PURE__*/proxyCustomElement(DuetList$1, [1,"duet-list",{"theme":[1025],"margin":[1],"padding":[1],"mobile":[1],"breakpoint":[1],"variation":[1],"labelWidth":[1,"label-width"]}]);
 const DuetListItem = /*@__PURE__*/proxyCustomElement(DuetListItem$1, [1,"duet-list-item"]);
 const DuetLogo = /*@__PURE__*/proxyCustomElement(DuetLogo$1, [1,"duet-logo",{"theme":[1025],"margin":[1],"inverse":[4],"size":[1],"href":[1537],"language":[1537]}]);
-const DuetModal = /*@__PURE__*/proxyCustomElement(DuetModal$1, [1,"duet-modal",{"language":[1025],"accessibleCloseLabelDefaults":[1,"accessible-close-label-default"],"accessibleCloseLabel":[1,"accessible-close-label"],"size":[1],"gutterSize":[1,"gutter-size"],"theme":[1025],"heading":[1],"headingLevel":[1,"heading-level"],"icon":[1],"color":[1],"active":[1540],"open":[32]},[[8,"keyup","handleKeyUp"]]]);
+const DuetModal = /*@__PURE__*/proxyCustomElement(DuetModal$1, [1,"duet-modal",{"language":[1025],"accessibleCloseLabelDefaults":[1,"accessible-close-label-default"],"accessibleCloseLabel":[1,"accessible-close-label"],"size":[1],"gutterSize":[1,"gutter-size"],"theme":[1025],"heading":[1],"headingLevel":[1,"heading-level"],"icon":[1],"color":[1],"active":[1540],"closeOnBlur":[1028,"close-on-blur"],"open":[32]},[[8,"keyup","handleKeyUp"]]]);
 const DuetNotification = /*@__PURE__*/proxyCustomElement(DuetNotification$1, [1,"duet-notification",{"language":[1],"accessibleLabelUnreadDefaults":[16],"accessibleLabelUnread":[1,"accessible-label-unread"],"url":[1],"date":[1],"highlight":[4],"external":[4],"theme":[1025]}]);
 const DuetNotificationDrawer = /*@__PURE__*/proxyCustomElement(DuetNotificationDrawer$1, [1,"duet-notification-drawer",{"icon":[1],"label":[1],"language":[1],"accessibleLabelNotificationsDefaults":[1,"accessible-label-notification-default"],"accessibleLabelNotifications":[1,"accessible-label-notifications"],"badge":[4],"theme":[1025],"direction":[1],"isOpen":[32],"hasNotifications":[32]},[[6,"focus","handleClickFocusOutside"],[6,"click","handleClickFocusOutside"]]]);
 const DuetNumberInput = /*@__PURE__*/proxyCustomElement(DuetNumberInput$1, [2,"duet-number-input",{"language":[1025],"locale":[1],"unit":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleLiveDefaults":[1,"accessible-live-default"],"accessibleLive":[1,"accessible-live"],"accessibleLiveEnabled":[4,"accessible-live-enabled"],"accessibleAddDefaults":[1,"accessible-add-default"],"accessibleAdd":[1,"accessible-add"],"accessibleSubtractDefaults":[1,"accessible-subtract-defaults"],"accessibleSubtract":[1,"accessible-subtract"],"theme":[1025],"margin":[1],"expand":[4],"identifier":[1],"min":[2],"labelDefaults":[1,"label-default"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"name":[1],"error":[1],"tooltip":[1],"step":[2],"rounding":[4],"role":[1],"disabled":[516],"required":[4],"value":[1025],"focusedValue":[32]}]);
@@ -11692,13 +12015,14 @@ const DuetProgress = /*@__PURE__*/proxyCustomElement(DuetProgress$1, [0,"duet-pr
 const DuetRadio = /*@__PURE__*/proxyCustomElement(DuetRadio$1, [2,"duet-radio",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleIndex":[1,"accessible-index"],"margin":[1],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"theme":[1025],"disabled":[516],"required":[4],"blockEvents":[4,"block-events"],"identifier":[1],"label":[1],"name":[1],"role":[1],"groupDisabled":[4,"group-disabled"],"groupDirection":[1,"group-direction"],"groupResponsive":[4,"group-responsive"],"checked":[1540],"value":[1537]}]);
 const DuetRadioGroup = /*@__PURE__*/proxyCustomElement(DuetRadioGroup$1, [6,"duet-radio-group",{"direction":[1],"margin":[1],"theme":[1025],"error":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"name":[1],"label":[1],"labelHidden":[4,"label-hidden"],"caption":[1],"responsive":[4],"value":[1537],"disabled":[4]}]);
 const DuetRangeSlider = /*@__PURE__*/proxyCustomElement(DuetRangeSlider$1, [2,"duet-range-slider",{"theme":[1025],"margin":[1],"expand":[4],"identifier":[1],"name":[1],"required":[4],"disabled":[516],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"min":[2],"label":[1],"labelHidden":[4,"label-hidden"],"unit":[1],"max":[2],"step":[2],"locale":[1],"value":[1026],"debounce":[2]}]);
+const DuetScrollable = /*@__PURE__*/proxyCustomElement(DuetScrollable$1, [1,"duet-scrollable",{"theme":[1025],"identifier":[1],"selected":[1026],"tablistAtStart":[32],"isTabContentSmallerThanWrapper":[32],"tablistAtEnd":[32],"childrenData":[32]}]);
 const DuetSelect = /*@__PURE__*/proxyCustomElement(DuetSelect$1, [2,"duet-select",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleDescribedBy":[1,"accessible-described-by"],"margin":[1],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"error":[1],"expand":[4],"value":[1537],"theme":[1025],"labelHidden":[4,"label-hidden"],"identifier":[1],"name":[1],"placeholder":[1],"caption":[1],"echoPlaceholder":[4,"echo-placeholder"],"items":[1],"disabled":[516],"required":[4],"label":[1],"role":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"processedItems":[32]}]);
 const DuetSpacer = /*@__PURE__*/proxyCustomElement(DuetSpacer$1, [1,"duet-spacer",{"size":[1],"direction":[1],"breakpoint":[1]}]);
 const DuetSpinner = /*@__PURE__*/proxyCustomElement(DuetSpinner$1, [1,"duet-spinner",{"accessibleLabel":[1,"accessible-label"],"color":[1],"size":[1],"theme":[1025]}]);
 const DuetStep = /*@__PURE__*/proxyCustomElement(DuetStep$1, [6,"duet-step",{"theme":[1025],"heading":[1],"headingLevel":[1,"heading-level"],"stepIndex":[2,"step-index"],"state":[1],"roundedTop":[4,"rounded-top"],"roundedBottom":[4,"rounded-bottom"]}]);
 const DuetStepper = /*@__PURE__*/proxyCustomElement(DuetStepper$1, [1,"duet-stepper",{"theme":[1025],"accessibleLive":[1,"accessible-live"],"margin":[1],"backDisabled":[4,"back-disabled"],"selected":[514]},[[0,"duetStepClick","onDuetStepClick"]]]);
-const DuetTab = /*@__PURE__*/proxyCustomElement(DuetTab$1, [6,"duet-tab",{"label":[513],"selected":[516]}]);
-const DuetTabGroup = /*@__PURE__*/proxyCustomElement(DuetTabGroup$1, [6,"duet-tab-group",{"theme":[1025],"variation":[1],"language":[1025],"labelDefaults":[1,"label-default"],"label":[1],"labelHidden":[4,"label-hidden"],"margin":[1],"padding":[1],"tabs":[32],"selected":[32]}]);
+const DuetTab = /*@__PURE__*/proxyCustomElement(DuetTab$1, [6,"duet-tab",{"label":[513],"selected":[516],"accessibleDescriptionDefault":[1,"accessible-description-defaults"],"accessibleDescription":[1,"accessible-description"]}]);
+const DuetTabGroup = /*@__PURE__*/proxyCustomElement(DuetTabGroup$1, [1,"duet-tab-group",{"theme":[1025],"scrolls":[4],"collapses":[4],"variation":[1],"language":[1025],"labelDefaults":[1,"label-default"],"label":[1],"labelHidden":[4,"label-hidden"],"identifier":[1],"margin":[1],"padding":[1],"tabs":[32],"selected":[32]}]);
 const DuetTable = /*@__PURE__*/proxyCustomElement(DuetTable$1, [4,"duet-table",{"theme":[1025],"margin":[1],"variation":[1],"sticky":[4],"stickyDistance":[1,"sticky-distance"],"breakpoint":[1],"matchesBreakpoint":[32]}]);
 const DuetTextarea = /*@__PURE__*/proxyCustomElement(DuetTextarea$1, [2,"duet-textarea",{"margin":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleAutocomplete":[1,"accessible-autocomplete"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"theme":[1025],"expand":[4],"disabled":[516],"identifier":[1],"required":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"placeholder":[1],"caption":[1],"echoPlaceholder":[4,"echo-placeholder"],"maxlength":[2],"minlength":[2],"error":[1],"role":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"value":[1025],"disallowPattern":[1,"disallow-pattern"],"counter":[4],"counterLabel":[1,"counter-label"]}]);
 const DuetToggle = /*@__PURE__*/proxyCustomElement(DuetToggle$1, [2,"duet-toggle",{"theme":[1025],"margin":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"label":[1],"required":[4],"disabled":[516],"checked":[1540],"value":[1537],"identifier":[1],"name":[1],"role":[1]}]);
@@ -11712,6 +12036,8 @@ const defineCustomElements = (opts) => {
     [
       DuetAlert,
   DuetBadge,
+  DuetBreadcrumb,
+  DuetBreadcrumbs,
   DuetButton,
   DuetCaption,
   DuetCard,
@@ -11750,6 +12076,7 @@ const defineCustomElements = (opts) => {
   DuetRadio,
   DuetRadioGroup,
   DuetRangeSlider,
+  DuetScrollable,
   DuetSelect,
   DuetSpacer,
   DuetSpinner,
@@ -12165,4 +12492,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, DuetScrollable, DuetSelect, DuetSpacer, DuetSpinner, DuetStep, DuetStepper, DuetTab, DuetTabGroup, DuetTable, DuetTextarea, DuetToggle, DuetTooltip, DuetTray, DuetUpload, DuetUploadAriaStatus, DuetVisuallyHidden, defineCustomElements, setAssetPath, setPlatformOptions };