@duetds/components 4.36.1 → 5.0.0

package/hydrate/index.js

@@ -5543,6 +5543,60 @@ const cmpModules = new Map, getModule = e => {
  isTesting: !1
 }, styles = new Map;
 
+function chr4() {
+  return Math.random().toString(16).slice(-4);
+}
+function createID(prefix) {
+  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
+}
+
+const debounce = (func, timeout = 250) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      func.apply(undefined, args);
+    }, timeout);
+  };
+};
+function fieldSorter(fields) {
+  return function (a, b) {
+    return fields
+      .map(function (o) {
+      let dir = 1;
+      if (o[0] === "-") {
+        dir = -1;
+        o = o.substring(1);
+      }
+      if (a[o] > b[o]) {
+        return dir;
+      }
+      if (a[o] < b[o]) {
+        return -dir;
+      }
+      return 0;
+    })
+      .reduce(function firstNonZeroValue(p, n) {
+      return p ? p : n;
+    }, 0);
+  };
+}
+
+const isArrowLeftKey = (e) => e.keyCode === 37;
+const isArrowUpKey = (e) => e.keyCode === 38;
+const isArrowRightKey = (e) => e.keyCode === 39;
+const isArrowDownKey = (e) => e.keyCode === 40;
+const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
+const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
+const isBackspaceKey = (e) => e.keyCode === 8;
+const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
+const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
+const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
+const isQuestionKey = (e) => e.key === "?";
+const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
+const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
+const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
+
 function isObject(maybeObj) {
   return Object.prototype.toString.call(maybeObj) === "[object Object]";
 }
@@ -5680,438 +5734,153 @@ const inheritGlobalTheme = (component) => {
   }
 };
 
-const duetAlertCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-alert,*.sc-duet-alert::after,*.sc-duet-alert::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-alert-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}/*!@:host(:focus)*/.sc-duet-alert-h:focus{outline:0}/*!@:host(.user-is-tabbing:focus)*/.user-is-tabbing.sc-duet-alert-h:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@:host(.user-is-tabbing.duet-theme-turva:focus)*/.user-is-tabbing.duet-theme-turva.sc-duet-alert-h:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@:host(.duet-alert-is-dismissed)*/.duet-alert-is-dismissed.sc-duet-alert-h{max-height:0;visibility:hidden;opacity:0;transform:scale(0.98)}/*!@:host(.duet-alert-is-dismissed) .duet-alert*/.duet-alert-is-dismissed.sc-duet-alert-h .duet-alert.sc-duet-alert{margin:0 !important}/*!@.duet-alert*/.duet-alert.sc-duet-alert{margin-bottom:16px !important;position:relative;width:100%;padding:16px;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;color:#00294d;background:#f2f8fb;border:1px solid #0077b3;border-radius:4px;transition:margin 100ms 300ms ease}/*!@.duet-alert.duet-p-0*/.duet-alert.duet-p-0.sc-duet-alert{padding:0 !important}/*!@.duet-alert.duet-m-0*/.duet-alert.duet-m-0.sc-duet-alert{margin:0 !important}/*!@.duet-alert.duet-theme-turva*/.duet-alert.duet-theme-turva.sc-duet-alert{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;background:#f3f4f5;border-color:#171c3a}/*!@.duet-alert.warning*/.duet-alert.warning.sc-duet-alert{background:#fffbf4;border-color:#f7b228}/*!@.duet-alert.warning.duet-theme-turva*/.duet-alert.warning.duet-theme-turva.sc-duet-alert{background:#fffaf3;border-color:#faa40f}/*!@.duet-alert.danger*/.duet-alert.danger.sc-duet-alert{background:#fdf4f7;border-color:#de2362}/*!@.duet-alert.danger.duet-theme-turva*/.duet-alert.danger.duet-theme-turva.sc-duet-alert{background:#fdf4f3;border-color:#e02a0d}/*!@.duet-alert.success*/.duet-alert.success.sc-duet-alert{background:#f2f9f7;border-color:#00875a}/*!@.duet-alert.success.duet-theme-turva*/.duet-alert.success.duet-theme-turva.sc-duet-alert{background:#f3f9f6;border-color:#08874e}/*!@.duet-alert-dismiss*/.duet-alert-dismiss.sc-duet-alert{position:absolute;top:2px;right:2px}/*!@.duet-alert-container*/.duet-alert-container.sc-duet-alert{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}/*!@.duet-alert-container span*/.duet-alert-container.sc-duet-alert span.sc-duet-alert{width:100%}/*!@.duet-alert-has-icon .duet-alert-container*/.duet-alert-has-icon.sc-duet-alert .duet-alert-container.sc-duet-alert{margin-top:2px !important}/*!@.duet-alert-icon*/.duet-alert-icon.sc-duet-alert{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}/*!@.duet-alert-icon duet-icon*/.duet-alert-icon.sc-duet-alert duet-icon.sc-duet-alert{width:20px;height:20px}/*!@.duet-alert-is-dismissible*/.duet-alert-is-dismissible.sc-duet-alert{padding:16px 48px 16px 16px;text-align:left}/*!@.duet-alert-is-dismissible .duet-alert-container*/.duet-alert-is-dismissible.sc-duet-alert .duet-alert-container.sc-duet-alert{text-align:left}";
-
-class DuetAlert {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.duetDismiss = createEvent$2(this, "duetDismiss", 7);
-    /**
-     * Theme of the card.
-     */
-    this.theme = "";
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.isDismissed = false;
-    /**
-     * Property to change languageDefaults on the component.
-     * normally you would handle these strings on an application level and override @accessibleLabel when needed
-     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
-     */
-    this.accessibleLabelDefaults = {
-      fi: "Sulje viesti",
-      sv: "Stäng meddelandet",
-      en: "Close the message",
-    };
-    /**
-     * Adds accessible label for the dismissible alert close button.
-     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
-     */
-    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
-    /**
-     * Enable or disabled announcements by assistive technologies.
-     */
-    this.announcements = true;
-    /**
-     * Icon to display to the left of the content.
-     */
-    this.icon = "";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
-    this.padding = "auto";
-    /**
-     * Style variation of the alert.
-     */
-    this.variation = "default";
-    /**
-     * Should a button be rendered to dismiss the alert?
-     */
-    this.dismissible = false;
-    this.handleDismiss = (ev) => {
-      this.isDismissed = true;
-      this.duetDismiss.emit({
-        component: "duet-alert",
-        originalEvent: ev,
-      });
-    };
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  componentDidLoad() {
-    if (this.autoDismiss) {
-      this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
-    }
-  }
-  disconnectedCallback() {
-    if (this.timeoutID) {
-      clearTimeout(this.timeoutID);
-    }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
-    const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
-    return (hAsync(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, hAsync("div", { class: {
-        "duet-alert": true,
-        "duet-alert-has-icon": !!this.icon,
-        "duet-alert-is-dismissible": this.dismissible,
-        "duet-p-0": this.padding === "none",
-        "duet-m-0": this.margin === "none",
-        [this.variation]: true,
-        "duet-theme-turva": this.theme === "turva",
-      } }, hAsync("div", { class: "duet-alert-container" }, this.icon && (hAsync("div", { class: "duet-alert-icon" }, hAsync("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), hAsync("span", null, hAsync("slot", null))), this.dismissible && (hAsync("div", { class: "duet-alert-dismiss" }, hAsync("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
-  }
-  static get style() { return duetAlertCss; }
-  static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "duet-alert",
-    "$members$": {
-      "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]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
-const duetBadgeCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-badge,*.sc-duet-badge::after,*.sc-duet-badge::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-badge-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}/*!@:host:last-child, :host:last-of-type*/.sc-duet-badge-h:last-child,.sc-duet-badge-h:last-of-type{margin-right:0 !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-badge-h{margin:0 !important}/*!@.duet-badge*/.duet-badge.sc-duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;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.75rem;font-style:normal;font-weight:600;line-height:1.25;color:#00294d;text-align:center;word-break:break-word;vertical-align:middle;background:#e6f1f7;border-radius:20rem}/*!@.duet-badge.duet-p-0*/.duet-badge.duet-p-0.sc-duet-badge{padding:0 !important}/*!@.duet-badge.duet-m-0*/.duet-badge.duet-m-0.sc-duet-badge{margin:0 !important}/*!@.duet-badge.duet-theme-turva*/.duet-badge.duet-theme-turva.sc-duet-badge{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:#171c3a;background:#e8e8eb}/*!@.duet-badge.warning*/.duet-badge.warning.sc-duet-badge{background:#fef3df}/*!@.duet-badge.warning.duet-theme-turva*/.duet-badge.warning.duet-theme-turva.sc-duet-badge{background:#fef1db}/*!@.duet-badge.danger*/.duet-badge.danger.sc-duet-badge{background:#fce9ef}/*!@.duet-badge.danger.duet-theme-turva*/.duet-badge.danger.duet-theme-turva.sc-duet-badge{background:#fceae7}/*!@.duet-badge.success*/.duet-badge.success.sc-duet-badge{background:#e6f3ef}/*!@.duet-badge.success.duet-theme-turva*/.duet-badge.success.duet-theme-turva.sc-duet-badge{background:#e6f3ed}";
-
-class DuetBadge {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * Theme of the badge.
-     */
-    this.theme = "";
-    /**
-     * Style variation of the alert.
-     */
-    this.variation = "default";
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one of the class.
-   */
-  render() {
-    return (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("div", { class: {
-        "duet-badge": true,
-        [this.variation]: true,
-        "duet-theme-turva": this.theme === "turva",
-      } }, hAsync("slot", null))));
-  }
-  static get style() { return duetBadgeCss; }
-  static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "duet-badge",
-    "$members$": {
-      "theme": [1025],
-      "variation": [1],
-      "margin": [1]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
-const duetBreadcrumbCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-breadcrumb,*.sc-duet-breadcrumb::after,*.sc-duet-breadcrumb::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-breadcrumb-h{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*/.duet-breadcrumb.sc-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*/.duet-breadcrumb.sc-duet-breadcrumb:hover{color:#004d80}/*!@.duet-breadcrumb.duet-theme-turva*/.duet-breadcrumb.duet-theme-turva.sc-duet-breadcrumb{color:#171c3a}/*!@.duet-breadcrumb.duet-theme-turva:hover*/.duet-breadcrumb.duet-theme-turva.sc-duet-breadcrumb:hover{color:#940925}/*!@.duet-breadcrumb:focus*/.duet-breadcrumb.sc-duet-breadcrumb:focus{outline:0}/*!@.duet-breadcrumb:active*/.duet-breadcrumb.sc-duet-breadcrumb:active{opacity:0.75}/*!@:host(.user-is-tabbing) .duet-breadcrumb:focus*/.user-is-tabbing.sc-duet-breadcrumb-h .duet-breadcrumb.sc-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*/.user-is-tabbing.sc-duet-breadcrumb-h .duet-breadcrumb.duet-theme-turva.sc-duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-
-class DuetBreadcrumb {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    /**
-     * 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 (hAsync(Host, null, hAsync("a", { class: {
-        "duet-breadcrumb": true,
-        "duet-theme-turva": this.theme === "turva",
-      }, href: this.href, "aria-label": this.accessibleLabel }, this.icon && hAsync("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && hAsync("slot", null))));
-  }
-  static get style() { return duetBreadcrumbCss; }
-  static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "duet-breadcrumb",
-    "$members$": {
-      "theme": [1025],
-      "href": [1025],
-      "icon": [1025],
-      "accessibleLabel": [1, "accessible-label"]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
-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 = "/*!@*,\n*::after,\n*::before*/*.sc-duet-breadcrumbs,*.sc-duet-breadcrumbs::after,*.sc-duet-breadcrumbs::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-breadcrumbs-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block}/*!@.duet-breadcrumbs*/.duet-breadcrumbs.sc-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*/.duet-breadcrumbs.sc-duet-breadcrumbs ol.sc-duet-breadcrumbs{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*/.duet-breadcrumbs.sc-duet-breadcrumbs ol.sc-duet-breadcrumbs{padding:10px 36px}}/*!@.duet-breadcrumbs.duet-theme-turva*/.duet-breadcrumbs.duet-theme-turva.sc-duet-breadcrumbs{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*/.duet-breadcrumbs.duet-theme-turva.sc-duet-breadcrumbs ol.sc-duet-breadcrumbs{color:#171c3a;background:#fcf3f4}/*!@.duet-breadcrumbs .duet-breadrumbs-arrow*/.duet-breadcrumbs.sc-duet-breadcrumbs .duet-breadrumbs-arrow.sc-duet-breadcrumbs{display:inherit;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}/*!@.duet-breadcrumbs .hide*/.duet-breadcrumbs.sc-duet-breadcrumbs .hide.sc-duet-breadcrumbs{display:none}";
-
-class DuetBreadcrumbs {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    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() {
-    {
-      return;
-    }
-  }
-  disconnectedCallback() {
-    {
-      return;
-    }
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (hAsync(Host, null, hAsync("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
-        "duet-breadcrumbs": true,
-        "duet-theme-turva": this.theme === "turva",
-      } }, hAsync("ol", null, this.children.map((child, index) => (hAsync(Fragment, null, index > 0 && (hAsync("li", { "aria-hidden": "true" }, hAsync("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" }))), hAsync("li", { innerHTML: child.outerHTML }), hAsync("div", { class: "hide" }, hAsync("slot", null)))))))));
-  }
-  get element() { return getElement(this); }
-  static get style() { return duetBreadcrumbsCss; }
-  static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "duet-breadcrumbs",
-    "$members$": {
-      "theme": [1025],
-      "children": [32]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
-const DuetStringsExternalDefaults = {
-  fi: "Avautuu uuteen ikkunaan",
-  sv: "Öppnas i nytt fönster",
-  en: "Opens in a new window",
-};
-
-const colorWarning = "rgb(247, 178, 40)";
-const colorGrayDarker = "rgb(101, 119, 135)";
-const colorGrayLighter = "rgb(245, 248, 250)";
-const colorCategoryHome = "rgb(211, 36, 131)";
-const colorPrimary = "rgb(0, 119, 179)";
-const colorCategoryVehicle = "rgb(54, 74, 129)";
-const colorSuccess = "rgb(0, 135, 90)";
-const colorCategoryFamily = "rgb(11, 114, 136)";
-const colorPrimaryLightest = "rgb(243, 249, 252)";
-const colorPrimaryLighter = "rgb(230, 242, 248)";
-const colorBrandBlue = "rgb(0, 161, 212)";
-const colorPrimaryDark = "rgb(0, 77, 128)";
-const colorGrayLightest = "rgb(255, 255, 255)";
-const colorCategoryFinance = "rgb(122, 1, 196)";
-const colorGrayDark = "rgb(144, 149, 153)";
-const colorGrayLight = "rgb(225, 227, 230)";
-const colorSecondary = "rgb(0, 41, 77)";
-const colorCategoryPet = "rgb(168, 1, 78)";
-const colorPrimaryLight = "rgb(205, 229, 241)";
-const colorCategoryTravel = "rgb(213, 66, 3)";
-const colorGray = "rgb(207, 210, 212)";
-const colorDanger = "rgb(222, 35, 98)";
-const colorGrayDarkerTurva = "rgb(68, 68, 69)";
-const colorGrayLighterTurva = "rgb(245, 245, 247)";
-const colorCategoryHomeTurva = "rgb(161, 10, 78)";
-const colorPrimaryTurva = "rgb(198, 12, 48)";
-const colorCategoryVehicleTurva = "rgb(23, 28, 58)";
-const colorSuccessTurva = "rgb(8, 135, 78)";
-const colorPrimaryLightestTurva = "rgb(252, 243, 244)";
-const colorCategoryFamilyTurva = "rgb(199, 12, 112)";
-const colorCategoryUnionTurva = "rgb(169, 69, 124)";
-const colorPrimaryLighterTurva = "rgb(249, 230, 234)";
-const colorPrimaryDarkTurva = "rgb(148, 9, 37)";
-const colorGrayLightestTurva = "rgb(255, 255, 255)";
-const colorGrayDarkTurva = "rgb(116, 116, 117)";
-const colorGrayLightTurva = "rgb(228, 228, 230)";
-const colorBrandGrayTurva = "rgb(178, 180, 179)";
-const colorSecondaryTurva = "rgb(23, 28, 58)";
-const colorPrimaryLightTurva = "rgb(244, 207, 214)";
-const colorCategoryTravelTurva = "rgb(9, 129, 148)";
-const colorGrayTurva = "rgb(207, 207, 209)";
-const colorDangerTurva = "rgb(224, 42, 13)";
-const colorWarningTurva = "rgb(250, 164, 15)";
-const colorData07 = "rgb(192, 101, 247)";
-const colorData08 = "rgb(0, 105, 191)";
-const colorData09 = "rgb(19, 120, 53)";
-const colorData10 = "rgb(179, 60, 24)";
-const colorData11 = "rgb(13, 163, 166)";
-const colorData01 = "rgb(122, 1, 196)";
-const colorData12 = "rgb(11, 114, 136)";
-const colorData02 = "rgb(0, 155, 204)";
-const colorData13 = "rgb(179, 137, 24)";
-const colorData03 = "rgb(27, 171, 75)";
-const colorData14 = "rgb(128, 98, 17)";
-const colorData04 = "rgb(255, 86, 34)";
-const colorData15 = "rgb(0, 41, 77)";
-const colorData05 = "rgb(245, 76, 154)";
-const colorData06 = "rgb(194, 21, 101)";
-const fontWeightExtraBold = "800";
-const letterSpacingHeading = "-0.01rem";
-const fontFamilyHeadingTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
-const fontFamilyTextTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
-const fontFamilyHeading = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
-const fontFamilyText = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
-const fontWeightBold = "700";
-const fontWeightNormal = "400";
-const fontWeightSemiBold = "600";
-const fontSizeXxxxLarge = "4.5rem";
-const fontSizeXxxLarge = "3rem";
-const fontSizeXxLarge = "2.25rem";
-const fontSizeXLarge = "1.5rem";
-const fontSizeLarge = "1.25rem";
-const fontSizeMedium = "1rem";
-const fontSizeSmall = "0.875rem";
-const fontSizeXSmall = "0.75rem";
-const radiusSharp = "0";
-const radiusDefault = "4px";
-const radiusCircle = "50%";
-const radiusPill = "20rem";
-const shadowTooltipTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.13)";
-const shadowDefault = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
-const shadowTooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
-const shadowCardTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
-const shadowModal = "0 2px 20px 0 rgba(0, 0, 0, 0.2)";
-const shadowCard = "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
-const shadowHoverTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.15)";
-const shadowHover = "0 2px 10px 0 rgba(0, 41, 77, 0.1)";
-const shadowDefaultTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13)";
-const spaceXxSmall = "4px";
-const spaceLarge = "20px";
-const spaceXSmall = "8px";
-const spaceXxxSmall = "2px";
-const spaceSmall = "12px";
-const spaceMedium = "16px";
-const spaceXxLarge = "36px";
-const spaceXxxxLarge = "72px";
-const spaceXxxxxLarge = "94px";
-const spaceXxxLarge = "48px";
-const spaceXLarge = "28px";
-const sizeIconXxLarge = "48px";
-const sizeFormBorder = "1px";
-const sizeStepMedium = "40px";
-const sizeButtonMinWidth = "8rem";
-const sizeHeader = "4rem";
-const sizeIconXxxLarge = "72px";
-const sizeIconXLarge = "36px";
-const sizeIconXxSmall = "10px";
-const sizeStepSmall = "30px";
-const sizeNavigation = "3rem";
-const sizeIconLarge = "30px";
-const sizeLayoutMaxWidth = "1110px";
-const sizeTappableSquare = "48px";
-const sizeIconXSmall = "16px";
-const sizeIconXxxSmall = "7px";
-const sizeButtonBorder = "2px";
-const sizeButtonTinyBorder = "1px";
-const sizeIconMedium = "24px";
-const sizeIconSmall = "20px";
-const opacity85 = "0.85";
-const opacity75 = "0.75";
-const opacity50 = "0.50";
-const opacity30 = "0.30";
-const zIndexDropdown = "600";
-const zIndexSpinner = "800";
-const zIndexDefault = "1";
-const zIndexToast = "500";
-const zIndexPopup = "950";
-const zIndexModal = "900";
-const zIndexSticky = "300";
-const zIndexMasked = "100";
-const zIndexDeep = "-999999";
-const zIndexOverlay = "700";
-const zIndexMask = "200";
-const zIndexHeader = "400";
-const lineHeightMedium = "1.5";
-const lineHeightSmall = "1.25";
-const lineHeightXSmall = "1.1";
-const transitionQuickly = "300ms ease";
-const transitionSlowly = "600ms ease";
-const mediaQueryXxSmall = "'(max-width: 22.5em)'";
-const mediaQueryXSmall = "'(max-width: 35.9375em)'";
-const mediaQuerySmall = "'(min-width: 36em)'";
-const mediaQueryMedium = "'(min-width: 48em)'";
-const mediaQueryLarge = "'(min-width: 62em)'";
-const mediaQueryXLarge = "'(min-width: 64.0625em)'";
-const mediaQueryXxLarge = "'(min-width: 76.25em)'";
-const mediaQueryXxxLarge = "'(min-width: 106.25em)'";
+const colorWarning = "rgb(247, 178, 40)";
+const colorGrayDarker = "rgb(101, 119, 135)";
+const colorGrayLighter = "rgb(245, 248, 250)";
+const colorCategoryHome = "rgb(211, 36, 131)";
+const colorPrimary = "rgb(0, 119, 179)";
+const colorCategoryVehicle = "rgb(54, 74, 129)";
+const colorSuccess = "rgb(0, 135, 90)";
+const colorCategoryFamily = "rgb(11, 114, 136)";
+const colorPrimaryLightest = "rgb(243, 249, 252)";
+const colorPrimaryLighter = "rgb(230, 242, 248)";
+const colorBrandBlue = "rgb(0, 161, 212)";
+const colorPrimaryDark = "rgb(0, 77, 128)";
+const colorGrayLightest = "rgb(255, 255, 255)";
+const colorCategoryFinance = "rgb(122, 1, 196)";
+const colorGrayDark = "rgb(144, 149, 153)";
+const colorGrayLight = "rgb(225, 227, 230)";
+const colorSecondary = "rgb(0, 41, 77)";
+const colorCategoryPet = "rgb(168, 1, 78)";
+const colorPrimaryLight = "rgb(205, 229, 241)";
+const colorCategoryTravel = "rgb(213, 66, 3)";
+const colorGray = "rgb(207, 210, 212)";
+const colorDanger = "rgb(222, 35, 98)";
+const colorGrayDarkerTurva = "rgb(68, 68, 69)";
+const colorGrayLighterTurva = "rgb(245, 245, 247)";
+const colorCategoryHomeTurva = "rgb(161, 10, 78)";
+const colorPrimaryTurva = "rgb(198, 12, 48)";
+const colorCategoryVehicleTurva = "rgb(23, 28, 58)";
+const colorSuccessTurva = "rgb(8, 135, 78)";
+const colorPrimaryLightestTurva = "rgb(252, 243, 244)";
+const colorCategoryFamilyTurva = "rgb(199, 12, 112)";
+const colorCategoryUnionTurva = "rgb(169, 69, 124)";
+const colorPrimaryLighterTurva = "rgb(249, 230, 234)";
+const colorPrimaryDarkTurva = "rgb(148, 9, 37)";
+const colorGrayLightestTurva = "rgb(255, 255, 255)";
+const colorGrayDarkTurva = "rgb(116, 116, 117)";
+const colorGrayLightTurva = "rgb(228, 228, 230)";
+const colorBrandGrayTurva = "rgb(178, 180, 179)";
+const colorSecondaryTurva = "rgb(23, 28, 58)";
+const colorPrimaryLightTurva = "rgb(244, 207, 214)";
+const colorCategoryTravelTurva = "rgb(9, 129, 148)";
+const colorGrayTurva = "rgb(207, 207, 209)";
+const colorDangerTurva = "rgb(224, 42, 13)";
+const colorWarningTurva = "rgb(250, 164, 15)";
+const colorData07 = "rgb(192, 101, 247)";
+const colorData08 = "rgb(0, 105, 191)";
+const colorData09 = "rgb(19, 120, 53)";
+const colorData10 = "rgb(179, 60, 24)";
+const colorData11 = "rgb(13, 163, 166)";
+const colorData01 = "rgb(122, 1, 196)";
+const colorData12 = "rgb(11, 114, 136)";
+const colorData02 = "rgb(0, 155, 204)";
+const colorData13 = "rgb(179, 137, 24)";
+const colorData03 = "rgb(27, 171, 75)";
+const colorData14 = "rgb(128, 98, 17)";
+const colorData04 = "rgb(255, 86, 34)";
+const colorData15 = "rgb(0, 41, 77)";
+const colorData05 = "rgb(245, 76, 154)";
+const colorData06 = "rgb(194, 21, 101)";
+const fontWeightExtraBold = "800";
+const letterSpacingHeading = "-0.01rem";
+const fontFamilyHeadingTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyTextTurva = "'turva-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyHeading = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontFamilyText = "'localtapiola-sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
+const fontWeightBold = "700";
+const fontWeightNormal = "400";
+const fontWeightSemiBold = "600";
+const fontSizeXxxxLarge = "4.5rem";
+const fontSizeXxxLarge = "3rem";
+const fontSizeXxLarge = "2.25rem";
+const fontSizeXLarge = "1.5rem";
+const fontSizeLarge = "1.25rem";
+const fontSizeMedium = "1rem";
+const fontSizeSmall = "0.875rem";
+const fontSizeXSmall = "0.75rem";
+const radiusSharp = "0";
+const radiusDefault = "4px";
+const radiusCircle = "50%";
+const radiusPill = "20rem";
+const shadowTooltipTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.13)";
+const shadowDefault = "0 2px 6px 0 rgba(0, 41, 77, 0.07)";
+const shadowTooltip = "0 2px 10px 0 rgba(0, 41, 77, 0.07)";
+const shadowCardTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadowModal = "0 2px 20px 0 rgba(0, 0, 0, 0.2)";
+const shadowCard = "0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)";
+const shadowHoverTurva = "0 2px 10px 0 rgba(117, 117, 117, 0.15)";
+const shadowHover = "0 2px 10px 0 rgba(0, 41, 77, 0.1)";
+const shadowDefaultTurva = "0 2px 6px 0 rgba(117, 117, 117, 0.13)";
+const spaceXxSmall = "4px";
+const spaceLarge = "20px";
+const spaceXSmall = "8px";
+const spaceXxxSmall = "2px";
+const spaceSmall = "12px";
+const spaceMedium = "16px";
+const spaceXxLarge = "36px";
+const spaceXxxxLarge = "72px";
+const spaceXxxxxLarge = "94px";
+const spaceXxxLarge = "48px";
+const spaceXLarge = "28px";
+const sizeIconXxLarge = "48px";
+const sizeFormBorder = "1px";
+const sizeStepMedium = "40px";
+const sizeButtonMinWidth = "8rem";
+const sizeHeader = "4rem";
+const sizeIconXxxLarge = "72px";
+const sizeIconXLarge = "36px";
+const sizeIconXxSmall = "10px";
+const sizeStepSmall = "30px";
+const sizeNavigation = "3rem";
+const sizeIconLarge = "30px";
+const sizeLayoutMaxWidth = "1110px";
+const sizeTappableSquare = "48px";
+const sizeIconXSmall = "16px";
+const sizeIconXxxSmall = "7px";
+const sizeButtonBorder = "2px";
+const sizeButtonTinyBorder = "1px";
+const sizeIconMedium = "24px";
+const sizeIconSmall = "20px";
+const opacity85 = "0.85";
+const opacity75 = "0.75";
+const opacity50 = "0.50";
+const opacity30 = "0.30";
+const zIndexDropdown = "600";
+const zIndexSpinner = "800";
+const zIndexDefault = "1";
+const zIndexToast = "500";
+const zIndexPopup = "950";
+const zIndexModal = "900";
+const zIndexSticky = "300";
+const zIndexMasked = "100";
+const zIndexDeep = "-999999";
+const zIndexOverlay = "700";
+const zIndexMask = "200";
+const zIndexHeader = "400";
+const lineHeightMedium = "1.5";
+const lineHeightSmall = "1.25";
+const lineHeightXSmall = "1.1";
+const transitionQuickly = "300ms ease";
+const transitionSlowly = "600ms ease";
+const mediaQueryXxSmall = "'(max-width: 22.5em)'";
+const mediaQueryXSmall = "'(max-width: 35.9375em)'";
+const mediaQuerySmall = "'(min-width: 36em)'";
+const mediaQueryMedium = "'(min-width: 48em)'";
+const mediaQueryLarge = "'(min-width: 62em)'";
+const mediaQueryXLarge = "'(min-width: 64.0625em)'";
+const mediaQueryXxLarge = "'(min-width: 76.25em)'";
+const mediaQueryXxxLarge = "'(min-width: 106.25em)'";
 
 var tokens$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6289,53 +6058,513 @@ function getTheme(theme = "") {
   if (allowedThemes.includes(theme.toLowerCase())) {
     return theme.toLowerCase();
   }
-  return "";
-}
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-function hasType(t, str = "") {
-  return str.indexOf(capitalizeFirstLetter(t)) === 0 || str.indexOf(t) === 0;
-}
-function addPrefix(prefix, str = "") {
-  if (str && !isDashCase(str) && !hasType(prefix, str)) {
-    return `${prefix}${capitalize(str)}`;
+  return "";
+}
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+function hasType(t, str = "") {
+  return str.indexOf(capitalizeFirstLetter(t)) === 0 || str.indexOf(t) === 0;
+}
+function addPrefix(prefix, str = "") {
+  if (str && !isDashCase(str) && !hasType(prefix, str)) {
+    return `${prefix}${capitalize(str)}`;
+  }
+  return str;
+}
+function addTheme(str, theme) {
+  const hasTheme = getTheme(theme).length;
+  if (hasTheme && str.indexOf(theme) === -1) {
+    return `${str}${capitalize(theme)}`;
+  }
+  return str;
+}
+function getColorByName(name, theme = "") {
+  if (!name) {
+    return undefined;
+  }
+  const defaultColor = convertToColorName(name);
+  const themedColor = convertToColorName(name, theme);
+  // lets just try to get the color first to save some cycles
+  let resolvedToken = tokens$2[themedColor];
+  if (!resolvedToken) {
+    resolvedToken = tokens$2[defaultColor];
+  }
+  return resolvedToken;
+}
+function convertToColorName(name = "", theme = "") {
+  let colorResolution = name;
+  const dash = isDashCase(name);
+  if (dash) {
+    colorResolution = camelize(colorResolution);
+  }
+  colorResolution = addPrefix("color", colorResolution);
+  colorResolution = addTheme(colorResolution, theme);
+  // takes care of the case where colorPrimaryDark ends up with ColorPrimaryDark
+  colorResolution = lowerCaseFirst(colorResolution);
+  return colorResolution;
+}
+
+const duetActionButtonCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-action-button,*.sc-duet-action-button::after,*.sc-duet-action-button::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-action-button-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}/*!@button.duet-action-button*/button.duet-action-button.sc-duet-action-button{white-space:nowrap}/*!@button.duet-action-button*/button.duet-action-button.sc-duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}/*!@.duet-theme-turva button.duet-action-button*/.duet-theme-turva.sc-duet-action-button button.duet-action-button.sc-duet-action-button{color:#171c3a;background:#f5f5f7}/*!@button.duet-action-button duet-icon*/button.duet-action-button.sc-duet-action-button duet-icon.sc-duet-action-button{display:block}@media (max-width: 35.9375em){/*!@button.duet-action-button*/button.duet-action-button.sc-duet-action-button{width:32px;height:32px}}/*!@button.duet-action-button:not(:disabled):hover*/button.duet-action-button.sc-duet-action-button:not(:disabled):hover{background:#e9ecee !important}/*!@.duet-theme-turva button.duet-action-button:not(:disabled):hover*/.duet-theme-turva.sc-duet-action-button button.duet-action-button.sc-duet-action-button:not(:disabled):hover{background:#e9e9eb !important}/*!@button.duet-action-button:focus*/button.duet-action-button.sc-duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}/*!@.duet-theme-turva button.duet-action-button:focus*/.duet-theme-turva.sc-duet-action-button button.duet-action-button.sc-duet-action-button:focus{box-shadow:0 0 0 2px #171c3a !important}/*!@button.duet-action-button:active:focus*/button.duet-action-button.sc-duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}/*!@.duet-theme-turva button.duet-action-button:active:focus*/.duet-theme-turva.sc-duet-action-button button.duet-action-button.sc-duet-action-button:active:focus{background:#ddddde !important}/*!@button.duet-action-button:disabled*/button.duet-action-button.sc-duet-action-button:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}/*!@.duet-theme-turva button.duet-action-button:disabled*/.duet-theme-turva.sc-duet-action-button button.duet-action-button.sc-duet-action-button:disabled{color:#747475;background:#f5f5f7}";
+
+/**
+ * Slot: default slot inside an invisible element, this can be used to enhance accessibility
+ * Part: button this part enables style overrides for the button
+ * Part: icon this part enables style overrides for the icon
+ */
+class DuetActionButton {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetActionEvent = createEvent$2(this, "duetActionEvent", 6);
+    this.numbersStore = "";
+    /**
+     * Theme of the pagination.
+     */
+    this.theme = "";
+    /**
+     * Name of the icon to display
+     */
+    this.iconName = "action-arrow-left-small";
+    /**
+     * Color of the icon to display
+     */
+    this.iconColor = "currentColor";
+    /**
+     * Size of the icon
+     */
+    this.iconSize = "xx-small";
+    /**
+     * Name of action being called
+     */
+    this.actionName = "default-action";
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionId = undefined;
+    /**
+     * Name of id of action that was called being called
+     */
+    this.actionMeta = undefined;
+    /**
+     * Disables the button
+     */
+    this.disabled = false;
+    /**
+     * Custom color to be used for the icon, as a design token entered in camelCase
+     * or kebab-case. Example: "color-primary". This property can also be set to
+     * "currentColor" which forces the icon to use the CSS text color of parent
+     * element instead. Useful when you want to control the color in stylesheet
+     * instead.
+     */
+    this.color = "";
+    /**
+     * Custom color to be used for a background, as a design token entered
+     * in camelCase or kebab-case. Using this option the icon will always be resized
+     * to $size-icon-medium on mobile viewports. Example: "color-primary".
+     */
+    this.background = "";
+    /**
+     * Described By id
+     */
+    this.ariaDescribedBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.ariaDescription = undefined;
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabelsDefaults = {
+      en: {
+        label: "Click to activate action",
+      },
+      fi: {
+        label: "Klikkaa toiminnon aktivointiin",
+      },
+      sv: {
+        label: "Klicka för att aktivera åtgärd",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    this.listId = createID("duet-action-button");
+    /**
+     * Private methods.
+     */
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce(e => {
+      this.duetActionEvent.emit({
+        component: "duet-action-button",
+        originalEvent: e,
+        action: this.actionId,
+        name: this.actionName,
+        meta: this.actionMeta,
+        id: this.listId,
+      });
+    });
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    if (isKeyboardClick(e)) {
+      this.emitPageEvent(e);
+    }
+  }
+  //set update current when mouse click on page number
+  async onMouseHandler(e) {
+    e.preventDefault();
+    this.duetActionEvent.emit({
+      component: "duet-action-button",
+      originalEvent: e,
+      action: this.actionName,
+      id: this.actionId,
+      meta: this.actionMeta,
+    });
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const color = this.color === "currentColor" ? "currentColor" : getColorByName(this.color, this.theme);
+    const styles = {
+      color,
+      background: getColorByName(this.background, this.theme),
+      "border-color": getColorByName(this.iconColor, this.theme),
+      "border-width": "1px",
+      "border-style": "solid",
+    };
+    return (hAsync(Host, { onKeyDown: e => this.onKeyboardDown(e) }, hAsync("button", { part: "button", style: styles, disabled: this.disabled, id: this.listId, class: {
+        "duet-action-button": true,
+        "duet-action-button--disabled": this.disabled,
+        [`duet-action-button--${this.theme}`]: this.theme !== "",
+      }, type: "button", onClick: e => this.onMouseHandler(e), "aria-label": this.ariaLabels.label, "aria-description": this.ariaDescription, "aria-describedby": this.ariaDescribedBy, "aria-controls": this.ariaControls }, hAsync("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), hAsync("duet-visually-hidden", null, hAsync("slot", null)))));
+  }
+  get element() { return getElement(this); }
+  static get style() { return duetActionButtonCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-action-button",
+    "$members$": {
+      "theme": [1025],
+      "iconName": [1, "icon-name"],
+      "iconColor": [1, "icon-color"],
+      "iconSize": [1, "icon-size"],
+      "actionName": [1, "action-name"],
+      "actionId": [1, "action-id"],
+      "actionMeta": [1, "action-meta"],
+      "disabled": [4],
+      "color": [513],
+      "background": [1],
+      "ariaDescribedBy": [1, "accessible-described-by"],
+      "ariaDescription": [1, "accessible-description"],
+      "ariaLabelsDefaults": [16],
+      "ariaLabels": [16],
+      "ariaControls": [1, "accessible-controls"],
+      "numbersStore": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["color", "color"]]
+  }; }
+}
+
+const duetAlertCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-alert,*.sc-duet-alert::after,*.sc-duet-alert::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-alert-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}/*!@:host(:focus)*/.sc-duet-alert-h:focus{outline:0}/*!@:host(.user-is-tabbing:focus)*/.user-is-tabbing.sc-duet-alert-h:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@:host(.user-is-tabbing.duet-theme-turva:focus)*/.user-is-tabbing.duet-theme-turva.sc-duet-alert-h:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@:host(.duet-alert-is-dismissed)*/.duet-alert-is-dismissed.sc-duet-alert-h{max-height:0;visibility:hidden;opacity:0;transform:scale(0.98)}/*!@:host(.duet-alert-is-dismissed) .duet-alert*/.duet-alert-is-dismissed.sc-duet-alert-h .duet-alert.sc-duet-alert{margin:0 !important}/*!@.duet-alert*/.duet-alert.sc-duet-alert{margin-bottom:16px !important;position:relative;width:100%;padding:16px;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;color:#00294d;background:#f2f8fb;border:1px solid #0077b3;border-radius:4px;transition:margin 100ms 300ms ease}/*!@.duet-alert.duet-p-0*/.duet-alert.duet-p-0.sc-duet-alert{padding:0 !important}/*!@.duet-alert.duet-m-0*/.duet-alert.duet-m-0.sc-duet-alert{margin:0 !important}/*!@.duet-alert.duet-theme-turva*/.duet-alert.duet-theme-turva.sc-duet-alert{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;background:#f3f4f5;border-color:#171c3a}/*!@.duet-alert.warning*/.duet-alert.warning.sc-duet-alert{background:#fffbf4;border-color:#f7b228}/*!@.duet-alert.warning.duet-theme-turva*/.duet-alert.warning.duet-theme-turva.sc-duet-alert{background:#fffaf3;border-color:#faa40f}/*!@.duet-alert.danger*/.duet-alert.danger.sc-duet-alert{background:#fdf4f7;border-color:#de2362}/*!@.duet-alert.danger.duet-theme-turva*/.duet-alert.danger.duet-theme-turva.sc-duet-alert{background:#fdf4f3;border-color:#e02a0d}/*!@.duet-alert.success*/.duet-alert.success.sc-duet-alert{background:#f2f9f7;border-color:#00875a}/*!@.duet-alert.success.duet-theme-turva*/.duet-alert.success.duet-theme-turva.sc-duet-alert{background:#f3f9f6;border-color:#08874e}/*!@.duet-alert-dismiss*/.duet-alert-dismiss.sc-duet-alert{position:absolute;top:2px;right:2px}/*!@.duet-alert-container*/.duet-alert-container.sc-duet-alert{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}/*!@.duet-alert-container span*/.duet-alert-container.sc-duet-alert span.sc-duet-alert{width:100%}/*!@.duet-alert-has-icon .duet-alert-container*/.duet-alert-has-icon.sc-duet-alert .duet-alert-container.sc-duet-alert{margin-top:2px !important}/*!@.duet-alert-icon*/.duet-alert-icon.sc-duet-alert{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}/*!@.duet-alert-icon duet-icon*/.duet-alert-icon.sc-duet-alert duet-icon.sc-duet-alert{width:20px;height:20px}/*!@.duet-alert-is-dismissible*/.duet-alert-is-dismissible.sc-duet-alert{padding:16px 48px 16px 16px;text-align:left}/*!@.duet-alert-is-dismissible .duet-alert-container*/.duet-alert-is-dismissible.sc-duet-alert .duet-alert-container.sc-duet-alert{text-align:left}";
+
+class DuetAlert {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.duetDismiss = createEvent$2(this, "duetDismiss", 7);
+    /**
+     * Theme of the card.
+     */
+    this.theme = "";
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.isDismissed = false;
+    /**
+     * Property to change languageDefaults on the component.
+     * normally you would handle these strings on an application level and override @accessibleLabel when needed
+     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
+     */
+    this.accessibleLabelDefaults = {
+      fi: "Sulje viesti",
+      sv: "Stäng meddelandet",
+      en: "Close the message",
+    };
+    /**
+     * Adds accessible label for the dismissible alert close button.
+     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
+     */
+    this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
+    /**
+     * Enable or disabled announcements by assistive technologies.
+     */
+    this.announcements = true;
+    /**
+     * Icon to display to the left of the content.
+     */
+    this.icon = "";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * Style variation of the alert.
+     */
+    this.variation = "default";
+    /**
+     * Should a button be rendered to dismiss the alert?
+     */
+    this.dismissible = false;
+    this.handleDismiss = (ev) => {
+      this.isDismissed = true;
+      this.duetDismiss.emit({
+        component: "duet-alert",
+        originalEvent: ev,
+      });
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
   }
-  return str;
+  componentDidLoad() {
+    if (this.autoDismiss) {
+      this.timeoutID = setTimeout(() => this.handleDismiss(), this.autoDismiss);
+    }
+  }
+  disconnectedCallback() {
+    if (this.timeoutID) {
+      clearTimeout(this.timeoutID);
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
+    const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
+    return (hAsync(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, hAsync("div", { class: {
+        "duet-alert": true,
+        "duet-alert-has-icon": !!this.icon,
+        "duet-alert-is-dismissible": this.dismissible,
+        "duet-p-0": this.padding === "none",
+        "duet-m-0": this.margin === "none",
+        [this.variation]: true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, hAsync("div", { class: "duet-alert-container" }, this.icon && (hAsync("div", { class: "duet-alert-icon" }, hAsync("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), hAsync("span", null, hAsync("slot", null))), this.dismissible && (hAsync("div", { class: "duet-alert-dismiss" }, hAsync("duet-button", { variation: "plain", accessibleLabel: this.accessibleLabel, color: closeColor, iconSize: "medium", icon: "navigation-close", iconOnly: true, margin: "none", theme: this.theme, onClick: this.handleDismiss, fixed: true }))))));
+  }
+  static get style() { return duetAlertCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-alert",
+    "$members$": {
+      "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]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
 }
-function addTheme(str, theme) {
-  const hasTheme = getTheme(theme).length;
-  if (hasTheme && str.indexOf(theme) === -1) {
-    return `${str}${capitalize(theme)}`;
+
+const duetBadgeCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-badge,*.sc-duet-badge::after,*.sc-duet-badge::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-badge-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}/*!@:host:last-child, :host:last-of-type*/.sc-duet-badge-h:last-child,.sc-duet-badge-h:last-of-type{margin-right:0 !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-badge-h{margin:0 !important}/*!@.duet-badge*/.duet-badge.sc-duet-badge{width:100%;padding:4.4444444444px 12px 5.4444444444px;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.75rem;font-style:normal;font-weight:600;line-height:1.25;color:#00294d;text-align:center;word-break:break-word;vertical-align:middle;background:#e6f1f7;border-radius:20rem}/*!@.duet-badge.duet-p-0*/.duet-badge.duet-p-0.sc-duet-badge{padding:0 !important}/*!@.duet-badge.duet-m-0*/.duet-badge.duet-m-0.sc-duet-badge{margin:0 !important}/*!@.duet-badge.duet-theme-turva*/.duet-badge.duet-theme-turva.sc-duet-badge{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:#171c3a;background:#e8e8eb}/*!@.duet-badge.warning*/.duet-badge.warning.sc-duet-badge{background:#fef3df}/*!@.duet-badge.warning.duet-theme-turva*/.duet-badge.warning.duet-theme-turva.sc-duet-badge{background:#fef1db}/*!@.duet-badge.danger*/.duet-badge.danger.sc-duet-badge{background:#fce9ef}/*!@.duet-badge.danger.duet-theme-turva*/.duet-badge.danger.duet-theme-turva.sc-duet-badge{background:#fceae7}/*!@.duet-badge.success*/.duet-badge.success.sc-duet-badge{background:#e6f3ef}/*!@.duet-badge.success.duet-theme-turva*/.duet-badge.success.duet-theme-turva.sc-duet-badge{background:#e6f3ed}";
+
+class DuetBadge {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Theme of the badge.
+     */
+    this.theme = "";
+    /**
+     * Style variation of the alert.
+     */
+    this.variation = "default";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
   }
-  return str;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * render() function
+   * Always the last one of the class.
+   */
+  render() {
+    return (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("div", { class: {
+        "duet-badge": true,
+        [this.variation]: true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, hAsync("slot", null))));
+  }
+  static get style() { return duetBadgeCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-badge",
+    "$members$": {
+      "theme": [1025],
+      "variation": [1],
+      "margin": [1]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
 }
-function getColorByName(name, theme = "") {
-  if (!name) {
-    return undefined;
+
+const duetBreadcrumbCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-breadcrumb,*.sc-duet-breadcrumb::after,*.sc-duet-breadcrumb::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-breadcrumb-h{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*/.duet-breadcrumb.sc-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*/.duet-breadcrumb.sc-duet-breadcrumb:hover{color:#004d80}/*!@.duet-breadcrumb.duet-theme-turva*/.duet-breadcrumb.duet-theme-turva.sc-duet-breadcrumb{color:#171c3a}/*!@.duet-breadcrumb.duet-theme-turva:hover*/.duet-breadcrumb.duet-theme-turva.sc-duet-breadcrumb:hover{color:#940925}/*!@.duet-breadcrumb:focus*/.duet-breadcrumb.sc-duet-breadcrumb:focus{outline:0}/*!@.duet-breadcrumb:active*/.duet-breadcrumb.sc-duet-breadcrumb:active{opacity:0.75}/*!@:host(.user-is-tabbing) .duet-breadcrumb:focus*/.user-is-tabbing.sc-duet-breadcrumb-h .duet-breadcrumb.sc-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*/.user-is-tabbing.sc-duet-breadcrumb-h .duet-breadcrumb.duet-theme-turva.sc-duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
+
+class DuetBreadcrumb {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Theme
+     */
+    this.theme = "";
+    /**
+     * Href
+     */
+    this.href = "";
+    /**
+     * Icon
+     */
+    this.icon = "";
   }
-  const defaultColor = convertToColorName(name);
-  const themedColor = convertToColorName(name, theme);
-  // lets just try to get the color first to save some cycles
-  let resolvedToken = tokens$2[themedColor];
-  if (!resolvedToken) {
-    resolvedToken = tokens$2[defaultColor];
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
   }
-  return resolvedToken;
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("a", { class: {
+        "duet-breadcrumb": true,
+        "duet-theme-turva": this.theme === "turva",
+      }, href: this.href, "aria-label": this.accessibleLabel }, this.icon && hAsync("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && hAsync("slot", null))));
+  }
+  static get style() { return duetBreadcrumbCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-breadcrumb",
+    "$members$": {
+      "theme": [1025],
+      "href": [1025],
+      "icon": [1025],
+      "accessibleLabel": [1, "accessible-label"]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
 }
-function convertToColorName(name = "", theme = "") {
-  let colorResolution = name;
-  const dash = isDashCase(name);
-  if (dash) {
-    colorResolution = camelize(colorResolution);
+
+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 = "/*!@*,\n*::after,\n*::before*/*.sc-duet-breadcrumbs,*.sc-duet-breadcrumbs::after,*.sc-duet-breadcrumbs::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-breadcrumbs-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block}/*!@.duet-breadcrumbs*/.duet-breadcrumbs.sc-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*/.duet-breadcrumbs.sc-duet-breadcrumbs ol.sc-duet-breadcrumbs{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*/.duet-breadcrumbs.sc-duet-breadcrumbs ol.sc-duet-breadcrumbs{padding:10px 36px}}/*!@.duet-breadcrumbs.duet-theme-turva*/.duet-breadcrumbs.duet-theme-turva.sc-duet-breadcrumbs{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*/.duet-breadcrumbs.duet-theme-turva.sc-duet-breadcrumbs ol.sc-duet-breadcrumbs{color:#171c3a;background:#fcf3f4}/*!@.duet-breadcrumbs .duet-breadrumbs-arrow*/.duet-breadcrumbs.sc-duet-breadcrumbs .duet-breadrumbs-arrow.sc-duet-breadcrumbs{display:inherit;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}/*!@.duet-breadcrumbs .hide*/.duet-breadcrumbs.sc-duet-breadcrumbs .hide.sc-duet-breadcrumbs{display:none}";
+
+class DuetBreadcrumbs {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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() {
+    {
+      return;
+    }
+  }
+  disconnectedCallback() {
+    {
+      return;
+    }
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (hAsync(Host, null, hAsync("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
+        "duet-breadcrumbs": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, hAsync("ol", null, this.children.map((child, index) => (hAsync(Fragment, null, index > 0 && (hAsync("li", { "aria-hidden": "true" }, hAsync("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" }))), hAsync("li", { innerHTML: child.outerHTML }), hAsync("div", { class: "hide" }, hAsync("slot", null)))))))));
   }
-  colorResolution = addPrefix("color", colorResolution);
-  colorResolution = addTheme(colorResolution, theme);
-  // takes care of the case where colorPrimaryDark ends up with ColorPrimaryDark
-  colorResolution = lowerCaseFirst(colorResolution);
-  return colorResolution;
+  get element() { return getElement(this); }
+  static get style() { return duetBreadcrumbsCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "duet-breadcrumbs",
+    "$members$": {
+      "theme": [1025],
+      "children": [32]
+    },
+    "$listeners$": undefined,
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": []
+  }; }
 }
 
+const DuetStringsExternalDefaults = {
+  fi: "Avautuu uuteen ikkunaan",
+  sv: "Öppnas i nytt fönster",
+  en: "Opens in a new window",
+};
+
 const duetButtonCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-button,*.sc-duet-button::after,*.sc-duet-button::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-button-h{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*/.sc-duet-button-h:last-child,.sc-duet-button-h:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){/*!@:host*/.sc-duet-button-h{width:100%}}/*!@:host(.duet-small)*/.duet-small.sc-duet-button-h{margin-right:2px !important;margin-bottom:8px !important}/*!@:host(.duet-small):last-child, :host(.duet-small):last-of-type*/.duet-small.sc-duet-button-h:last-child,.duet-small.sc-duet-button-h:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){/*!@:host(.duet-small)*/.duet-small.sc-duet-button-h{width:auto}}/*!@:host(.duet-expand)*/.duet-expand.sc-duet-button-h{width:100% !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-button-h{margin:0 !important}/*!@:host(.duet-fixed)*/.duet-fixed.sc-duet-button-h{width:auto !important}/*!@:host(:last-child)*/.sc-duet-button-h:last-child{margin-right:0 !important}/*!@.duet-button-container*/.duet-button-container.sc-duet-button{position:relative;width:100%}/*!@.duet-button*/.duet-button.sc-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*/.duet-button.duet-p-0.sc-duet-button{padding:0 !important}/*!@.duet-button.duet-m-0*/.duet-button.duet-m-0.sc-duet-button{margin:0 !important}/*!@.duet-button.duet-button-text-center*/.duet-button.duet-button-text-center.sc-duet-button{text-align:center !important}/*!@.duet-button.duet-button-is-small:not(.duet-button-icon-only)*/.duet-button.duet-button-is-small.sc-duet-button: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*/.duet-button.duet-button-is-small.sc-duet-button:not(.duet-button-icon-only).icon{padding-left:48px !important}/*!@.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right*/.duet-button.duet-button-is-small.sc-duet-button:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}/*!@.duet-theme-turva .duet-button*/.duet-theme-turva.sc-duet-button .duet-button.sc-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*/.duet-button.sc-duet-button .duet-button-contents.sc-duet-button{position:relative;display:inline-block;margin:0 auto;pointer-events:none}/*!@.duet-button.duet-no-wrap*/.duet-button.duet-no-wrap.sc-duet-button{white-space:nowrap}/*!@.duet-button.icon*/.duet-button.icon.sc-duet-button{padding-left:52px !important}/*!@.duet-button.icon-right*/.duet-button.icon-right.sc-duet-button{padding-right:52px !important;padding-left:28px !important}/*!@.duet-button svg*/.duet-button.sc-duet-button svg.sc-duet-button{width:100%;min-width:100%;fill:currentColor}/*!@.duet-button .duet-button-icon*/.duet-button.sc-duet-button .duet-button-icon.sc-duet-button{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*/.duet-button.sc-duet-button .duet-button-icon.sc-duet-button duet-icon.sc-duet-button{width:16px;height:16px}/*!@.duet-button .duet-button-icon.right*/.duet-button.sc-duet-button .duet-button-icon.right.sc-duet-button{right:-28px;left:auto}/*!@.duet-button .duet-button-icon.large*/.duet-button.sc-duet-button .duet-button-icon.large.sc-duet-button{left:-32px;width:20px;height:20px}/*!@.duet-button .duet-button-icon.large duet-icon*/.duet-button.sc-duet-button .duet-button-icon.large.sc-duet-button duet-icon.sc-duet-button{width:20px;height:20px}/*!@.duet-button .duet-button-icon.large.right*/.duet-button.sc-duet-button .duet-button-icon.large.right.sc-duet-button{right:-32px;left:auto}/*!@.duet-button .duet-button-icon.medium-small*/.duet-button.sc-duet-button .duet-button-icon.medium-small.sc-duet-button{left:-16px;width:10px;height:10px;padding-top:1px}/*!@.duet-button .duet-button-icon.medium-small duet-icon*/.duet-button.sc-duet-button .duet-button-icon.medium-small.sc-duet-button duet-icon.sc-duet-button{width:10px;height:10px}/*!@.duet-button .duet-button-icon.medium-small.right*/.duet-button.sc-duet-button .duet-button-icon.medium-small.right.sc-duet-button{right:-16px;left:auto}/*!@.duet-button .duet-button-icon.small*/.duet-button.sc-duet-button .duet-button-icon.small.sc-duet-button{left:-16px;width:7px;height:7px}/*!@.duet-button .duet-button-icon.small duet-icon*/.duet-button.sc-duet-button .duet-button-icon.small.sc-duet-button duet-icon.sc-duet-button{width:7px;height:7px}/*!@.duet-button .duet-button-icon.small.right*/.duet-button.sc-duet-button .duet-button-icon.small.right.sc-duet-button{right:-16px;left:auto}/*!@.duet-button:focus*/.duet-button.sc-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*/.duet-theme-turva.sc-duet-button .duet-button.sc-duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-button:active*/.duet-button.sc-duet-button:active{opacity:0.75;transition:none}/*!@.duet-button.default*/.duet-button.default.sc-duet-button{border-color:#e1e3e6}/*!@.duet-theme-turva .duet-button.default*/.duet-theme-turva.sc-duet-button .duet-button.default.sc-duet-button{color:#c60c30 !important;border-color:#e4e4e6}/*!@.duet-button.default:hover*/.duet-button.default.sc-duet-button:hover{border-color:#0077b3}/*!@.duet-theme-turva .duet-button.default:hover*/.duet-theme-turva.sc-duet-button .duet-button.default.sc-duet-button:hover{border-color:#c60c30}/*!@.duet-button.default.duet-button-negative*/.duet-button.default.duet-button-negative.sc-duet-button{background-color:white}/*!@.duet-theme-turva .duet-button.default.duet-button-negative*/.duet-theme-turva.sc-duet-button .duet-button.default.duet-button-negative.sc-duet-button{background-color:#e4e4e6 !important}/*!@.duet-button.default.duet-button-negative:hover*/.duet-button.default.duet-button-negative.sc-duet-button:hover{color:#0077b3 !important;border-color:#0077b3}/*!@.duet-theme-turva .duet-button.default.duet-button-negative:hover*/.duet-theme-turva.sc-duet-button .duet-button.default.duet-button-negative.sc-duet-button:hover{color:#c60c30 !important;border-color:#c60c30}/*!@.duet-button.primary*/.duet-button.primary.sc-duet-button{color:white !important;background:#0077b3;border-color:#0077b3}/*!@.duet-theme-turva .duet-button.primary*/.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button{color:white !important;background:#c60c30;border-color:#c60c30}/*!@.duet-button.primary:hover*/.duet-button.primary.sc-duet-button:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}/*!@.duet-theme-turva .duet-button.primary:hover*/.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:hover{background:#940925;border-color:#940925}/*!@.duet-button.primary:focus*/.duet-button.primary.sc-duet-button: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*/.duet-theme-turva.sc-duet-button .duet-button.primary.sc-duet-button:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}/*!@.duet-button.secondary*/.duet-button.secondary.sc-duet-button{color:#00294d !important;background:transparent;border-color:#00294d}/*!@.duet-theme-turva .duet-button.secondary*/.duet-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button{color:#171c3a !important;border-color:#171c3a}/*!@.duet-button.secondary:hover*/.duet-button.secondary.sc-duet-button:hover{color:#0077b3 !important;border-color:#0077b3}/*!@.duet-theme-turva .duet-button.secondary:hover*/.duet-theme-turva.sc-duet-button .duet-button.secondary.sc-duet-button:hover{color:#c60c30 !important;border-color:#c60c30}/*!@.duet-button.secondary.duet-button-negative*/.duet-button.secondary.duet-button-negative.sc-duet-button{color:#e1e3e6 !important;border-color:white}/*!@.duet-theme-turva .duet-button.secondary.duet-button-negative*/.duet-theme-turva.sc-duet-button .duet-button.secondary.duet-button-negative.sc-duet-button{color:#e4e4e6 !important}/*!@.duet-button.secondary.duet-button-negative:hover*/.duet-button.secondary.duet-button-negative.sc-duet-button:hover{color:#0077b3 !important;border-color:#0077b3}/*!@.duet-theme-turva .duet-button.secondary.duet-button-negative:hover*/.duet-theme-turva.sc-duet-button .duet-button.secondary.duet-button-negative.sc-duet-button:hover{color:#c60c30 !important;border-color:#c60c30}/*!@.duet-button.negative*/.duet-button.negative.sc-duet-button{color:#00294d !important;background:white;border-color:white}/*!@.duet-theme-turva .duet-button.negative*/.duet-theme-turva.sc-duet-button .duet-button.negative.sc-duet-button{color:#171c3a !important}/*!@.duet-button.negative:hover*/.duet-button.negative.sc-duet-button:hover{color:white !important;background:transparent;border-color:white}/*!@.duet-button.negative:focus*/.duet-button.negative.sc-duet-button: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*/.duet-theme-turva.sc-duet-button .duet-button.negative.sc-duet-button:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}/*!@.duet-button.destructive-primary*/.duet-button.destructive-primary.sc-duet-button{color:white !important;background:#de2362;border-color:#de2362}/*!@.duet-theme-turva .duet-button.destructive-primary*/.duet-theme-turva.sc-duet-button .duet-button.destructive-primary.sc-duet-button{color:white !important;background:#e02a0d;border-color:#e02a0d}/*!@.duet-button.destructive-primary:hover*/.duet-button.destructive-primary.sc-duet-button: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*/.duet-theme-turva.sc-duet-button .duet-button.destructive-primary.sc-duet-button:hover{background:#b3220a}/*!@.duet-button.destructive, .duet-button.destructive-secondary*/.duet-button.destructive.sc-duet-button,.duet-button.destructive-secondary.sc-duet-button{color:#de2362 !important;background:white;border-color:#de2362}/*!@.duet-theme-turva .duet-button.destructive, .duet-theme-turva .duet-button.destructive-secondary*/.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button,.duet-theme-turva.sc-duet-button .duet-button.destructive-secondary.sc-duet-button{color:#e02a0d !important;background:white;border-color:#e02a0d}/*!@.duet-button.destructive:hover, .duet-button.destructive-secondary:hover*/.duet-button.destructive.sc-duet-button:hover,.duet-button.destructive-secondary.sc-duet-button:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}/*!@.duet-theme-turva .duet-button.destructive:hover, .duet-theme-turva .duet-button.destructive-secondary:hover*/.duet-theme-turva.sc-duet-button .duet-button.destructive.sc-duet-button:hover,.duet-theme-turva.sc-duet-button .duet-button.destructive-secondary.sc-duet-button:hover{color:white !important;background:#b3220a;border-color:#b3220a}/*!@.duet-button.plain*/.duet-button.plain.sc-duet-button{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*/.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button{color:#c60c30 !important;background:transparent;border-color:transparent}/*!@.duet-button.plain.icon*/.duet-button.plain.icon.sc-duet-button{padding-left:20px !important}/*!@.duet-button.plain.icon.icon-right*/.duet-button.plain.icon.icon-right.sc-duet-button{padding-right:20px !important;padding-left:0 !important}/*!@.duet-button.plain.icon.medium*/.duet-button.plain.icon.medium.sc-duet-button{padding-left:24px !important}/*!@.duet-button.plain.icon.medium.icon-right*/.duet-button.plain.icon.medium.icon-right.sc-duet-button{padding-right:24px !important;padding-left:0 !important}/*!@.duet-button.plain.icon.large*/.duet-button.plain.icon.large.sc-duet-button{padding-left:30px !important}/*!@.duet-button.plain.icon.large.icon-right*/.duet-button.plain.icon.large.icon-right.sc-duet-button{padding-right:30px !important;padding-left:0 !important}/*!@.duet-button.plain .duet-button-icon.left*/.duet-button.plain.sc-duet-button .duet-button-icon.left.sc-duet-button{left:-16.6666666667px !important}/*!@.duet-button.plain .duet-button-icon.left.medium*/.duet-button.plain.sc-duet-button .duet-button-icon.left.medium.sc-duet-button{left:-24px !important}/*!@.duet-button.plain .duet-button-icon.left.large*/.duet-button.plain.sc-duet-button .duet-button-icon.left.large.sc-duet-button{left:-30px !important}/*!@.duet-button.plain .duet-button-icon.right*/.duet-button.plain.sc-duet-button .duet-button-icon.right.sc-duet-button{right:-16.6666666667px !important}/*!@.duet-button.plain .duet-button-icon.right.medium*/.duet-button.plain.sc-duet-button .duet-button-icon.right.medium.sc-duet-button{right:-24px !important}/*!@.duet-button.plain .duet-button-icon.right.large*/.duet-button.plain.sc-duet-button .duet-button-icon.right.large.sc-duet-button{right:-30px !important}/*!@.duet-button.plain[disabled]*/.duet-button.plain[disabled].sc-duet-button{color:#657787 !important;background:transparent !important;border-color:transparent !important}/*!@.duet-theme-turva .duet-button.plain[disabled]*/.duet-theme-turva.sc-duet-button .duet-button.plain[disabled].sc-duet-button{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}/*!@.duet-button.plain:hover*/.duet-button.plain.sc-duet-button:hover{color:#004d80 !important;background:transparent !important}/*!@.duet-theme-turva .duet-button.plain:hover*/.duet-theme-turva.sc-duet-button .duet-button.plain.sc-duet-button:hover{color:#940925 !important}/*!@.duet-button.plain.duet-button-negative*/.duet-button.plain.duet-button-negative.sc-duet-button{color:white !important}/*!@.duet-theme-turva .duet-button.plain.duet-button-negative*/.duet-theme-turva.sc-duet-button .duet-button.plain.duet-button-negative.sc-duet-button{color:#e4e4e6 !important}/*!@.duet-button.plain.duet-button-negative:hover*/.duet-button.plain.duet-button-negative.sc-duet-button:hover{color:#0077b3 !important}/*!@.duet-theme-turva .duet-button.plain.duet-button-negative:hover*/.duet-theme-turva.sc-duet-button .duet-button.plain.duet-button-negative.sc-duet-button:hover{color:#c60c30 !important}/*!@.duet-button.duet-button-icon-only*/.duet-button.duet-button-icon-only.sc-duet-button{min-width:48px;min-height:48px;padding:0 !important}/*!@.duet-button.duet-button-icon-only .duet-button-contents*/.duet-button.duet-button-icon-only.sc-duet-button .duet-button-contents.sc-duet-button{position:static}/*!@.duet-button.duet-button-icon-only .duet-button-icon.left.large,\n.duet-button.duet-button-icon-only .duet-button-icon.left.medium,\n.duet-button.duet-button-icon-only .duet-button-icon.left.small*/.duet-button.duet-button-icon-only.sc-duet-button .duet-button-icon.left.large.sc-duet-button,.duet-button.duet-button-icon-only.sc-duet-button .duet-button-icon.left.medium.sc-duet-button,.duet-button.duet-button-icon-only.sc-duet-button .duet-button-icon.left.small.sc-duet-button{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*/.duet-button[disabled].sc-duet-button,.duet-button[disabled].sc-duet-button:hover,.duet-button.duet-button-negative[disabled].sc-duet-button,.duet-button.duet-button-negative[disabled].sc-duet-button: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*/.duet-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button,.duet-theme-turva.sc-duet-button .duet-button[disabled].sc-duet-button:hover,.duet-theme-turva.sc-duet-button .duet-button.duet-button-negative.sc-duet-button [disabled].sc-duet-button,.duet-theme-turva.sc-duet-button .duet-button.duet-button-negative.sc-duet-button [disabled].sc-duet-button:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}/*!@.duet-button-is-loading.primary*/.duet-button-is-loading.primary.sc-duet-button{color:white}/*!@.duet-button-is-loading.default*/.duet-button-is-loading.default.sc-duet-button{color:#0077b3}/*!@.duet-button-is-loading.default.duet-theme-turva*/.duet-button-is-loading.default.duet-theme-turva.sc-duet-button{color:#c60c30}/*!@.duet-button-is-loading .duet-button-contents*/.duet-button-is-loading.sc-duet-button .duet-button-contents.sc-duet-button{visibility:hidden;opacity:0}";
 
 class DuetButton {
@@ -6343,6 +6572,10 @@ class DuetButton {
     registerInstance(this, hostRef);
     this.duetFocus = createEvent$2(this, "duetFocus", 7);
     this.duetBlur = createEvent$2(this, "duetBlur", 7);
+    /**
+     * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+     */
+    this.accessiblePopup = "false";
     /**
      * Loading state of the button
      */
@@ -6563,7 +6796,7 @@ class DuetButton {
         "duet-theme-turva": this.theme === "turva",
         "duet-button-negative": this.negative || this.variation === "negative",
         [this.variation]: true,
-      } }, this.url ? (hAsync("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && hAsync("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (hAsync("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 && hAsync("duet-spinner", { color: "currentColor" }))));
+      } }, this.url ? (hAsync("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && hAsync("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (hAsync("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, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }), commonChildren)), this.loading && hAsync("duet-spinner", { color: "currentColor" }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -6579,6 +6812,7 @@ class DuetButton {
     "$members$": {
       "accessibleLabel": [1, "accessible-label"],
       "accessibleControls": [1, "accessible-controls"],
+      "accessiblePopup": [1, "accessible-popup"],
       "accessibleActiveDescendant": [1, "accessible-active-descendant"],
       "accessibleOwns": [1, "accessible-owns"],
       "accessibleDescribedBy": [1, "accessible-described-by"],
@@ -6677,28 +6911,6 @@ class DuetCaption {
 
 var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
 
-function chr4() {
-  return Math.random().toString(16).slice(-4);
-}
-function createID(prefix) {
-  return `${prefix}-${chr4()}${chr4()}-${chr4()}-${chr4()}-${chr4()}-${chr4()}${chr4()}${chr4()}`;
-}
-
-const isArrowLeftKey = (e) => e.keyCode === 37;
-const isArrowUpKey = (e) => e.keyCode === 38;
-const isArrowRightKey = (e) => e.keyCode === 39;
-const isArrowDownKey = (e) => e.keyCode === 40;
-const isArrowKey = (e) => isArrowDownKey(e) || isArrowRightKey(e) || isArrowUpKey(e) || isArrowLeftKey(e);
-const isEscapeKey = (e) => e.key === "Escape" || e.key === "Esc" || e.keyCode === 27;
-const isBackspaceKey = (e) => e.keyCode === 8;
-const isSpaceKey = (e) => e.key === "Space" || e.keyCode === 32;
-const isPlusKey = (e) => e.key === "+" || e.keyCode === 43;
-const isMinusKey = (e) => e.key === "-" || e.keyCode === 45;
-const isQuestionKey = (e) => e.key === "?";
-const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
-const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
-const isNumber = (e) => (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105);
-
 const duetCardCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-card,*.sc-duet-card::after,*.sc-duet-card::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-card-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}/*!@:host(.duet-card-info)*/.duet-card-info.sc-duet-card-h{margin-bottom:16px !important}/*!@:host(.duet-m-0)*/.duet-m-0.sc-duet-card-h{margin:0 !important}/*!@.duet-card*/.duet-card.sc-duet-card{padding:20px !important;position:relative;display:block;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-style:normal;font-weight:400;line-height:1.5;color:#00294d;text-decoration:none;border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}/*!@.duet-card.duet-p-0*/.duet-card.duet-p-0.sc-duet-card{padding:0 !important}/*!@.duet-card.duet-m-0*/.duet-card.duet-m-0.sc-duet-card{margin:0 !important}/*!@.duet-card:focus*/.duet-card.sc-duet-card:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@.duet-theme-turva .duet-card:focus, .duet-card:focus.duet-theme-turva*/.duet-theme-turva.sc-duet-card .duet-card.sc-duet-card:focus,.duet-card.sc-duet-card:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (min-width: 36em){/*!@.duet-card*/.duet-card.sc-duet-card{padding:28px !important}}/*!@.duet-card.duet-theme-turva*/.duet-card.duet-theme-turva.sc-duet-card{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;box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}@media (min-width: 36em){/*!@.duet-card.x-small*/.duet-card.x-small.sc-duet-card{padding:20px !important}}@media (min-width: 36em){/*!@.duet-card.medium*/.duet-card.medium.sc-duet-card{padding:28px !important}}@media (min-width: 48em){/*!@.duet-card.medium*/.duet-card.medium.sc-duet-card{padding:36px !important}}@media (min-width: 36em){/*!@.duet-card.large*/.duet-card.large.sc-duet-card{padding:36px !important}}@media (min-width: 48em){/*!@.duet-card.large*/.duet-card.large.sc-duet-card{padding:48px !important}}@media (min-width: 36em){/*!@.duet-card.x-large*/.duet-card.x-large.sc-duet-card{padding:48px !important}}@media (min-width: 48em){/*!@.duet-card.x-large*/.duet-card.x-large.sc-duet-card{padding:72px !important}}/*!@.duet-card.duet-card-collapsed*/.duet-card.duet-card-collapsed.sc-duet-card{padding-bottom:0 !important}@media (min-width: 36em){/*!@.duet-card.duet-card-collapsed*/.duet-card.duet-card-collapsed.sc-duet-card{padding-bottom:0 !important}}/*!@.duet-card.info*/.duet-card.info.sc-duet-card{background:rgba(0, 80, 128, 0.04) !important;box-shadow:none}/*!@.duet-card.info.duet-theme-turva*/.duet-card.info.duet-theme-turva.sc-duet-card{background:rgba(23, 28, 58, 0.035) !important}/*!@.duet-card.plain*/.duet-card.plain.sc-duet-card{box-shadow:none}/*!@.duet-card.plain:not(.duet-card-has-bg)*/.duet-card.plain.sc-duet-card:not(.duet-card-has-bg){background:transparent !important}/*!@.duet-card-heading-grid*/.duet-card-heading-grid.sc-duet-card{display:flex;flex-direction:row}/*!@.duet-card-icon*/.duet-card-icon.sc-duet-card{align-self:center}/*!@.duet-card-heading-text*/.duet-card-heading-text.sc-duet-card{flex:1;word-break:break-word}/*!@.duet-card-secondary-heading*/.duet-card-secondary-heading.sc-duet-card{font-size:1rem;font-weight:600;word-break:break-word}/*!@.duet-card-secondary-heading--inline*/.duet-card-secondary-heading--inline.sc-duet-card{display:block;flex:1;align-self:flex-start;line-height:1.875;text-align:right}@media (max-width: 22.5em){/*!@.duet-card-secondary-heading--inline*/.duet-card-secondary-heading--inline.sc-duet-card{display:none}}/*!@.duet-card-secondary-heading--new-line*/.duet-card-secondary-heading--new-line.sc-duet-card{display:none}@media (max-width: 22.5em){/*!@.duet-card-secondary-heading--new-line*/.duet-card-secondary-heading--new-line.sc-duet-card{display:block}}/*!@.duet-card-heading*/.duet-card-heading.sc-duet-card{position:relative;display:block;padding:16px 20px;margin:-20px -20px 20px;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:1.25rem;font-weight:800;color:#00294d;border-bottom:1px solid #e1e3e6}@media (min-width: 36em){/*!@.duet-card-heading*/.duet-card-heading.sc-duet-card{padding:15px 28px 16px !important;margin:-28px -28px 20px}}/*!@.duet-card-heading[role=button]*/.duet-card-heading[role=button].sc-duet-card{-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:4px;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;appearance:none}/*!@.duet-card-heading[role=button]:focus*/.duet-card-heading[role=button].sc-duet-card:focus{outline:0}/*!@:host(.user-is-tabbing) .duet-card-heading[role=button]:focus*/.user-is-tabbing.sc-duet-card-h .duet-card-heading[role=button].sc-duet-card:focus{border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}/*!@:host(.user-is-tabbing) .duet-theme-turva .duet-card-heading[role=button]:focus*/.user-is-tabbing.sc-duet-card-h .duet-theme-turva.sc-duet-card .duet-card-heading[role=button].sc-duet-card:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}/*!@.duet-card-collapsed .duet-card-heading*/.duet-card-collapsed.sc-duet-card .duet-card-heading.sc-duet-card{margin-bottom:0 !important;border-bottom:0 !important}/*!@.duet-theme-turva .duet-card-heading*/.duet-theme-turva.sc-duet-card .duet-card-heading.sc-duet-card{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}@media (min-width: 36em){/*!@.x-small .duet-card-heading*/.x-small.sc-duet-card .duet-card-heading.sc-duet-card{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){/*!@.x-small .duet-card-heading*/.x-small.sc-duet-card .duet-card-heading.sc-duet-card{padding:10px 20px 11px !important;margin:-20px -20px 20px}}/*!@.medium .duet-card-heading*/.medium.sc-duet-card .duet-card-heading.sc-duet-card{margin:-20px -20px 20px}@media (min-width: 36em){/*!@.medium .duet-card-heading*/.medium.sc-duet-card .duet-card-heading.sc-duet-card{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){/*!@.medium .duet-card-heading*/.medium.sc-duet-card .duet-card-heading.sc-duet-card{padding:19px 36px 20px !important;margin:-36px -36px 28px}}/*!@.large .duet-card-heading*/.large.sc-duet-card .duet-card-heading.sc-duet-card{margin:-20px -20px 20px}@media (min-width: 36em){/*!@.large .duet-card-heading*/.large.sc-duet-card .duet-card-heading.sc-duet-card{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){/*!@.large .duet-card-heading*/.large.sc-duet-card .duet-card-heading.sc-duet-card{padding:26px 48px 27px !important;margin:-48px -48px 36px}}/*!@.x-large .duet-card-heading*/.x-large.sc-duet-card .duet-card-heading.sc-duet-card{margin:-20px -20px 20px}@media (min-width: 36em){/*!@.x-large .duet-card-heading*/.x-large.sc-duet-card .duet-card-heading.sc-duet-card{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){/*!@.x-large .duet-card-heading*/.x-large.sc-duet-card .duet-card-heading.sc-duet-card{padding:39px 72px 40px !important;margin:-72px -72px 48px}}/*!@.none .duet-card-heading*/.none.sc-duet-card .duet-card-heading.sc-duet-card{padding:0 0 20px !important;margin:0 0 20px}/*!@.duet-card-footer*/.duet-card-footer.sc-duet-card{padding:20px;margin:20px -20px -20px;font-size:0.875rem;line-height:1.25;background:#f5f8fa;border-bottom-right-radius:4px;border-bottom-left-radius:4px}/*!@.duet-theme-turva .duet-card-footer*/.duet-theme-turva.sc-duet-card .duet-card-footer.sc-duet-card{background:#f5f5f7}@media (min-width: 36em){/*!@.duet-card-footer*/.duet-card-footer.sc-duet-card{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){/*!@.duet-card-footer*/.duet-card-footer.sc-duet-card{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){/*!@.x-small .duet-card-footer*/.x-small.sc-duet-card .duet-card-footer.sc-duet-card{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){/*!@.medium .duet-card-footer*/.medium.sc-duet-card .duet-card-footer.sc-duet-card{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){/*!@.medium .duet-card-footer*/.medium.sc-duet-card .duet-card-footer.sc-duet-card{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){/*!@.large .duet-card-footer*/.large.sc-duet-card .duet-card-footer.sc-duet-card{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){/*!@.large .duet-card-footer*/.large.sc-duet-card .duet-card-footer.sc-duet-card{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){/*!@.x-large .duet-card-footer*/.x-large.sc-duet-card .duet-card-footer.sc-duet-card{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){/*!@.x-large .duet-card-footer*/.x-large.sc-duet-card .duet-card-footer.sc-duet-card{padding:39px 72px 40px !important;margin:48px -72px -72px}}/*!@.none .duet-card-footer*/.none.sc-duet-card .duet-card-footer.sc-duet-card{padding:12px 0 !important;margin:20px 0 0}/*!@.duet-card-content*/.duet-card-content.sc-duet-card{width:100%}/*!@.duet-card-collapsed .duet-card-content*/.duet-card-collapsed.sc-duet-card .duet-card-content.sc-duet-card{display:none}/*!@.duet-card-caret*/.duet-card-caret.sc-duet-card{position:relative;top:6px;align-self:flex-start;transition:300ms ease}/*!@[aria-expanded=false] .duet-card-caret*/[aria-expanded=false].sc-duet-card .duet-card-caret.sc-duet-card{transform:rotate(-180deg)}/*!@.duet-card-image-mask*/.duet-card-image-mask.sc-duet-card{position:relative;width:calc(100% + 40px);margin:-20px 0 20px -20px;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){/*!@.small .duet-card-image-mask*/.small.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){/*!@.medium .duet-card-image-mask*/.medium.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){/*!@.medium .duet-card-image-mask*/.medium.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){/*!@.large .duet-card-image-mask*/.large.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){/*!@.large .duet-card-image-mask*/.large.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){/*!@.x-large .duet-card-image-mask*/.x-large.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){/*!@.x-large .duet-card-image-mask*/.x-large.sc-duet-card .duet-card-image-mask.sc-duet-card{width:calc(100% + 144px);margin:-72px 0 36px -72px}}/*!@.none .duet-card-image-mask*/.none.sc-duet-card .duet-card-image-mask.sc-duet-card{width:100%;margin:0 0 20px}/*!@.duet-card-image*/.duet-card-image.sc-duet-card{display:block;width:102%;min-width:1px;max-width:102%;height:auto;min-height:1px;margin-left:-1%;transition:transform 300ms ease;transform:scale(1.0001)}/*!@a.duet-card*/a.duet-card.sc-duet-card{transition:box-shadow 300ms ease, background-position 300ms ease}/*!@a.duet-card:hover*/a.duet-card.sc-duet-card:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}/*!@a.duet-card:hover .duet-card-image*/a.duet-card.sc-duet-card:hover .duet-card-image.sc-duet-card{transform:scale(1.024)}/*!@.duet-theme-turva a.duet-card:hover*/.duet-theme-turva.sc-duet-card a.duet-card.sc-duet-card:hover{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}/*!@a.duet-card:active*/a.duet-card.sc-duet-card:active{transition:none;transform:translateY(1px)}";
 
 /**
@@ -8595,7 +8807,7 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, langu
         } }))))))))));
 };
 
-const duetDatePickerCss = "*.sc-duet-date-picker,*.sc-duet-date-picker::after,*.sc-duet-date-picker::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-date-picker-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;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}.sc-duet-date-picker-h:last-child,.sc-duet-date-picker-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-date-picker-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-date-picker-h{width:100% !important}.duet-m-0.sc-duet-date-picker-h{margin:0 !important}.duet-date.sc-duet-date-picker{position:relative;width:100%}.duet-date.sc-duet-date-picker button.sc-duet-date-picker,.duet-date-dialog.sc-duet-date-picker button.sc-duet-date-picker{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button.sc-duet-date-picker{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;display:flex;align-items:center;justify-content:center;width:48px;height:calc(100% - 2px);color:#00294d;cursor:pointer;background:transparent !important;border-left:1px solid #cfd2d4 !important;border-radius:0 4px 4px 0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker{color:#171c3a;border-color:#cfcfd1}.duet-date-button.sc-duet-date-picker::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%)}.duet-date-button.sc-duet-date-picker:disabled{pointer-events:none;cursor:default;background:#f5f8fa !important;border:0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:disabled{background:#f5f5f7 !important}.duet-date-button.sc-duet-date-picker:disabled::before{display:none}.duet-date-button.sc-duet-date-picker:disabled duet-icon.sc-duet-date-picker{opacity:0.4}.duet-date-button.sc-duet-date-picker duet-icon.sc-duet-date-picker{transform:translateY(-1px)}.duet-date-button.sc-duet-date-picker:active duet-icon.sc-duet-date-picker{transform:translateY(0)}.duet-date-button.sc-duet-date-picker:focus{color:#0077b3;border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:focus{color:#171c3a;box-shadow:0 0 0 2px #171c3a}.duet-date-dialog.sc-duet-date-picker{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left.sc-duet-date-picker{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog.sc-duet-date-picker{position:fixed;top:0;right:0;bottom:0;background:rgba(0, 41, 77, 0.75);transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}.duet-date-dialog.duet-theme-turva.sc-duet-date-picker{background:rgba(23, 28, 58, 0.75)}}.duet-date-dialog.active.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error.sc-duet-date-picker{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper.sc-duet-date-picker{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:white;border:1px solid #e1e3e6;border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{border-color:#e4e4e6}@media (max-width: 35.9375em){.duet-date-dialog-wrapper.sc-duet-date-picker{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table.sc-duet-date-picker{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.25;color:#00294d;text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva.sc-duet-date-picker{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}.duet-date-table.sc-duet-date-picker th.sc-duet-date-picker{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker{text-align:center}.duet-date-table-button.sc-duet-date-picker{position:relative;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !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:0.875rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25 !important;color:#00294d !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:#171c3a !important}.duet-date-table-button.sc-duet-date-picker:hover{background:#e6f2f8 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:hover{background:#f9e6ea !important}.duet-date-table-button.today.sc-duet-date-picker{z-index:200;color:#004d80 !important;background:#f3f9fc !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.today.sc-duet-date-picker{color:#940925 !important;background:#fcf3f4 !important;box-shadow:0 0 0 1px #c60c30 !important}.duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-date-table-button.sc-duet-date-picker:focus{color:white !important;background:#0077b3 !important;outline:0}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{color:white !important;background:#c60c30 !important}.duet-date-table-button.sc-duet-date-picker:active{z-index:200;color:white !important;background:#0077b3 !important;box-shadow:0 0 5px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:active{color:white !important;background:#c60c30 !important;box-shadow:0 0 5px #c60c30 !important}.duet-date-table-button.sc-duet-date-picker:focus{z-index:200;box-shadow:0 0 5px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{box-shadow:0 0 5px #c60c30 !important}.duet-date-table-button.disabled.sc-duet-date-picker{color:#909599 !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.disabled.sc-duet-date-picker{color:#747475 !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside.sc-duet-date-picker{color:#909599 !important;pointer-events:none;cursor:default;background:#f5f8fa !important;box-shadow:none;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.outside.sc-duet-date-picker{color:#747475;background:#f5f5f7;box-shadow:none}.duet-date-dialog-header.sc-duet-date-picker{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons.sc-duet-date-picker{white-space:nowrap}.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker{color:#171c3a;background:#f5f5f7}.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker duet-icon.sc-duet-date-picker{display:block}@media (max-width: 35.9375em){.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker{width:40px;height:40px}}.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:not(:disabled):hover{background:#e9ecee !important}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:not(:disabled):hover{background:#e9e9eb !important}.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:focus{outline:0;box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a}.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:active:focus{background:#dddfe1;box-shadow:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:active:focus{background:#ddddde}.duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-buttons.sc-duet-date-picker button.sc-duet-date-picker:disabled{color:#747475;background:#f5f5f7}.duet-date-dialog-select.sc-duet-date-picker{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;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:1.25rem;font-weight:600;line-height:1.25;color:#00294d;pointer-events:none;border-radius:4px}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{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}.duet-date-dialog-select.sc-duet-date-picker span.sc-duet-date-picker{margin-right:4px}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #171c3a}.duet-date-dialog-mobile-header.sc-duet-date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #cfd2d4}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-mobile-header.sc-duet-date-picker{border-color:#cfcfd1}.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:none}}.duet-date-picker-close.sc-duet-date-picker{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:#00294d !important;cursor:pointer;background:#f5f8fa !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker{opacity:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker{background:#f5f5f7 !important}.duet-date-picker-close.sc-duet-date-picker:hover{background:#f5f8fa !important}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:hover{background:#f5f5f7 !important}.duet-date-picker-close.sc-duet-date-picker:focus{outline:none;box-shadow:0 0 0 2px #0077b3}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker:focus{opacity:1}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a}";
+const duetDatePickerCss = "*.sc-duet-date-picker,*.sc-duet-date-picker::after,*.sc-duet-date-picker::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-date-picker-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;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}.sc-duet-date-picker-h:last-child,.sc-duet-date-picker-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-date-picker-h{width:calc(50% - 16px - 3px)}}.duet-expand.sc-duet-date-picker-h{width:100% !important}.duet-m-0.sc-duet-date-picker-h{margin:0 !important}.duet-date.sc-duet-date-picker{position:relative;width:100%}.duet-date.sc-duet-date-picker button.sc-duet-date-picker,.duet-date-dialog.sc-duet-date-picker button.sc-duet-date-picker{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button.sc-duet-date-picker{-webkit-user-select:none;user-select:none;position:absolute;top:1px;right:1px;z-index:200;display:flex;align-items:center;justify-content:center;width:48px;height:calc(100% - 2px);color:#00294d;cursor:pointer;background:transparent !important;border-left:1px solid #cfd2d4 !important;border-radius:0 4px 4px 0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker{color:#171c3a;border-color:#cfcfd1}.duet-date-button.sc-duet-date-picker::before{position:absolute;top:0;left:-6px;width:6px;height:100%;content:\"\";background:linear-gradient(to left, rgba(207, 210, 212, 0.2) 0%, rgba(207, 210, 212, 0.2) 1px, rgba(207, 210, 212, 0.1) 1px, rgba(207, 210, 212, 0) 100%)}.duet-date-button.sc-duet-date-picker:disabled{pointer-events:none;cursor:default;background:#f5f8fa !important;border:0 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:disabled{background:#f5f5f7 !important}.duet-date-button.sc-duet-date-picker:disabled::before{display:none}.duet-date-button.sc-duet-date-picker:disabled duet-icon.sc-duet-date-picker{opacity:0.4}.duet-date-button.sc-duet-date-picker duet-icon.sc-duet-date-picker{transform:translateY(-1px)}.duet-date-button.sc-duet-date-picker:active duet-icon.sc-duet-date-picker{transform:translateY(0)}.duet-date-button.sc-duet-date-picker:focus{color:#0077b3;border-color:transparent;outline:0;box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-button.sc-duet-date-picker:focus{color:#171c3a;box-shadow:0 0 0 2px #171c3a}.duet-date-dialog.sc-duet-date-picker{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left.sc-duet-date-picker{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog.sc-duet-date-picker{position:fixed;top:0;right:0;bottom:0;background:rgba(0, 41, 77, 0.75);transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}.duet-date-dialog.duet-theme-turva.sc-duet-date-picker{background:rgba(23, 28, 58, 0.75)}}.duet-date-dialog.active.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error.sc-duet-date-picker{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper.sc-duet-date-picker{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:white;border:1px solid #e1e3e6;border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{border-color:#e4e4e6}@media (max-width: 35.9375em){.duet-date-dialog-wrapper.sc-duet-date-picker{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active.sc-duet-date-picker .duet-date-dialog-wrapper.sc-duet-date-picker{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table.sc-duet-date-picker{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.25;color:#00294d;text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva.sc-duet-date-picker{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}.duet-date-table.sc-duet-date-picker th.sc-duet-date-picker{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.duet-date-table.sc-duet-date-picker .duet-date-table-cell.sc-duet-date-picker{text-align:center}.duet-date-table-button.sc-duet-date-picker{position:relative;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !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:0.875rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.25 !important;color:#00294d !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:#171c3a !important}.duet-date-table-button.sc-duet-date-picker:hover{background:#e6f2f8 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:hover{background:#f9e6ea !important}.duet-date-table-button.today.sc-duet-date-picker{z-index:200;color:#004d80 !important;background:#f3f9fc !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.today.sc-duet-date-picker{color:#940925 !important;background:#fcf3f4 !important;box-shadow:0 0 0 1px #c60c30 !important}.duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-date-table-button.sc-duet-date-picker:focus{color:white !important;background:#0077b3 !important;outline:0}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button[aria-pressed=true].sc-duet-date-picker,.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{color:white !important;background:#c60c30 !important}.duet-date-table-button.sc-duet-date-picker:active{z-index:200;color:white !important;background:#0077b3 !important;box-shadow:0 0 5px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:active{color:white !important;background:#c60c30 !important;box-shadow:0 0 5px #c60c30 !important}.duet-date-table-button.sc-duet-date-picker:focus{z-index:200;box-shadow:0 0 5px #0077b3 !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.sc-duet-date-picker:focus{box-shadow:0 0 5px #c60c30 !important}.duet-date-table-button.disabled.sc-duet-date-picker{color:#909599 !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.disabled.sc-duet-date-picker{color:#747475 !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside.sc-duet-date-picker{color:#909599 !important;pointer-events:none;cursor:default;background:#f5f8fa !important;box-shadow:none;opacity:0.75}.duet-theme-turva.sc-duet-date-picker .duet-date-table-button.outside.sc-duet-date-picker{color:#747475;background:#f5f5f7;box-shadow:none}.duet-date-dialog-header.sc-duet-date-picker{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons.sc-duet-date-picker{white-space:nowrap}.duet-date-dialog-buttons.sc-duet-date-picker .sc-duet-date-picker::part(button){border:0}.duet-date-dialog-select.sc-duet-date-picker{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;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:1.25rem;font-weight:600;line-height:1.25;color:#00294d;pointer-events:none;border-radius:4px}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker .duet-date-dialog-select-label.sc-duet-date-picker{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}.duet-date-dialog-select.sc-duet-date-picker span.sc-duet-date-picker{margin-right:4px}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #0077b3}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-select.sc-duet-date-picker select.sc-duet-date-picker:focus+.duet-date-dialog-select-label.sc-duet-date-picker{box-shadow:0 0 0 2px #171c3a}.duet-date-dialog-mobile-header.sc-duet-date-picker{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #cfd2d4}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-dialog-mobile-header.sc-duet-date-picker{border-color:#cfcfd1}.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header.sc-duet-date-picker duet-label.sc-duet-date-picker{display:none}}.duet-date-picker-close.sc-duet-date-picker{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:#00294d !important;cursor:pointer;background:#f5f8fa !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker{opacity:0}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker{background:#f5f5f7 !important}.duet-date-picker-close.sc-duet-date-picker:hover{background:#f5f8fa !important}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:hover{background:#f5f5f7 !important}.duet-date-picker-close.sc-duet-date-picker:focus{outline:none;box-shadow:0 0 0 2px #0077b3}@media (min-width: 36em){.duet-date-picker-close.sc-duet-date-picker:focus{opacity:1}}.duet-theme-turva.sc-duet-date-picker .duet-date-picker-close.sc-duet-date-picker:focus{box-shadow:0 0 0 2px #171c3a}";
 
 class DuetDatePicker {
   constructor(hostRef) {
@@ -8990,7 +9202,7 @@ class DuetDatePicker {
         left: this.direction === "left",
         error: !!this.error,
         active: this.open,
-      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync(FocusGuard, { moveFocusTo: this.focusedDayNode }), hAsync("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, hAsync("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), hAsync("div", { class: "duet-date-dialog-mobile-header" }, hAsync("duet-label", { margin: "none" }, this.label), hAsync("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, hAsync("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), hAsync("duet-visually-hidden", null, text.closeLabel))), hAsync("div", { class: "duet-date-dialog-header" }, hAsync("div", { class: "duet-date-dialog-dropdowns" }, hAsync("duet-visually-hidden", null, hAsync("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (hAsync("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, text.monthLabelsShort[focusedMonth]), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (hAsync("option", { key: year, selected: year === focusedYear }, year)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, this.focusedDay.getFullYear()), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), hAsync("div", { class: "duet-date-dialog-buttons" }, hAsync("button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, hAsync("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" }), hAsync("duet-visually-hidden", null, text.prevMonthLabel)), hAsync("button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, hAsync("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }), hAsync("duet-visually-hidden", null, text.nextMonthLabel)))), hAsync(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), hAsync(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
+      }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, hAsync(FocusGuard, { moveFocusTo: this.focusedDayNode }), hAsync("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, hAsync("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), hAsync("div", { class: "duet-date-dialog-mobile-header" }, hAsync("duet-label", { margin: "none" }, this.label), hAsync("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, hAsync("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), hAsync("duet-visually-hidden", null, text.closeLabel))), hAsync("div", { class: "duet-date-dialog-header" }, hAsync("div", { class: "duet-date-dialog-dropdowns" }, hAsync("duet-visually-hidden", null, hAsync("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (hAsync("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, text.monthLabelsShort[focusedMonth]), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), hAsync("duet-visually-hidden", null, hAsync("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), hAsync("div", { class: "duet-date-dialog-select" }, hAsync("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (hAsync("option", { key: year, selected: year === focusedYear }, year)))), hAsync("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, hAsync("span", null, this.focusedDay.getFullYear()), hAsync("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), hAsync("div", { class: "duet-date-dialog-buttons" }, hAsync("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), hAsync("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), hAsync(DatePickerMonth, { selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), hAsync(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -9091,411 +9303,232 @@ class DuetDivider {
   }; }
 }
 
-const debounce = (func, timeout = 50) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(undefined, args);
-    }, timeout);
-  };
+//simple functional component that renders the data in the table
+const TableData = ({ data, groupId, alignment }, _children) => {
+  const classNames = `duet-editable-table duet-editable-table-content-${groupId}`;
+  if (typeof data === "string") {
+    return hAsync("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
+  }
+  else {
+    return (hAsync("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+  }
 };
 
-/**
- * Produces a function which uses template strings to do simple interpolation from objects.
- *
- * Usage:
- *    var makeMeKing = generateTemplateFn('${name} is now the king of ${country}!');
- *
- *    console.log(makeMeKing({ name: 'Bryan', country: 'Scotland'}));
- *    // Logs 'Bryan is now the king of Scotland!'
- */
-const generateTemplateFn = (function () {
-  const cache = {};
-  function generateTemplate(template) {
-    if (typeof template !== "string") {
-      template = template.outerHTML;
-    }
-    let fn = cache[template];
-    if (!fn) {
-      // Replace ${expressions} (etc) with ${map.expressions}.
-      const sanitized = template
-        .replace(/\$\{([\s]*[^;\s\{]+[\s]*)\}/g, function (_, match) {
-        return `\$\{map.${match.trim()}\}`;
-      })
-        // Afterwards, replace anything that's not ${map.expressions}' (etc) with a blank string.
-        .replace(/(\$\{(?!map\.)[^}]+\})/g, "");
-      fn = Function("map", `return \`${sanitized}\``);
-    }
-    return fn;
-  }
-  return generateTemplate;
-})();
-
-const duetEditableTableCss = "/*!@duet-editable-table*/duet-editable-table.sc-duet-editable-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-editable-table-header tr .duet-editable-table-header-hidden*/.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
+const duetEditableTableCss = ".sc-duet-editable-table-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-editable-table-actions-menu.sc-duet-editable-table{position:relative;padding:0 !important;margin:0}.duet-editable-table-actions-menu-button.sc-duet-editable-table{position:relative;right:-16px;float:right;padding:0}.duet-editable-table-actions-menu-icon.sc-duet-editable-table .duet-icon.sc-duet-editable-table{max-width:16px;max-height:16px}.duet-editable-table-row.duet-table-action-row.sc-duet-editable-table .duet-text-right.sc-duet-editable-table{text-align:right}.duet-editable-table-header.sc-duet-editable-table tr.sc-duet-editable-table .duet-editable-table-header-hidden.sc-duet-editable-table{padding:0 !important;font-size:0;border-bottom:0}";
 
 class DuetEditableTable {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.template = undefined;
+    this.duetTableToggle = createEvent$2(this, "duetTableToggle", 7);
+    this.duetMenuClick = createEvent$2(this, "duetMenuClick", 7);
     /**
-     * State() variables
-     * @internal
+     * Duet-table: margin of the component.
      */
-    this.tick = Date.now();
+    this.margin = "auto";
     /**
-     * Map of items that contain list of things.
+     * Duet-table: Style variation of the table.
      */
-    this.items = new Map();
+    this.variation = "striped";
     /**
-     * Key used to set vertical alignment of action buttons
+     * Duet-table: Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
      */
-    this.alignment = "middle";
+    this.sticky = false;
     /**
-     * Array of internationalized defaults for the default groups labels.
+     * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
      */
-    this.groupsLabelDefaults = {
-      fi: "Kaikki",
-      en: "All items",
-      sv: "Alla objekt",
-    };
+    this.stickyDistance = "with-links";
     /**
-     * Array of internationalized defaults for the default action labels.
+     * Duet-table: By default the table is responsive - it will be flattened at narrow viewport widths.
+     * This prop controls the breakpoint at which the table should be rendered as a _regular_ table.
+     * Set to "none" to disable the responsive functionality.
+     * Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling -
+     * this is useful for comparison tables where it's important to maintain column and row layout.
      */
-    this.actionLabelDefaults = {
-      fi: "Toiminnot",
-      en: "Actions",
-      sv: "Handlingar",
-    };
+    this.breakpoint = "small";
     /**
-     * Array of group names that you want the editable table to display (can be used to hide or show groups depending on conditions).
-     * @default { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults }.
-     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}].
+     * Define actions for all items in a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
-    this.groups = [
-      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
-    ];
+    this.actions = undefined;
     /**
-     * Array of actions that are mapped via the map variable to the various groups defined in group.
+     * Define columns for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
      * @default undefined
-     * @example [{
-                variation: "default",
-                icon: "action-edit-2",
-                id: "edit",
-                map: ["success"],
-                label: {
-                  fi: " Label",
-                  en: " Label",
-                  sv: " Label",
-                }
-              }]
      */
-    this.actions = undefined;
+    this.columns = undefined;
     /**
-     * Shows or hides the table labels.
+     * Define rows for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
-    this.hideGroups = false;
+    this.rows = undefined;
     /**
-     * Exposes the aria role for optimizing accessibility.
+     * Controls whether the table is sortable by headers
      */
-    this.accessibleRole = undefined;
+    this.sortable = false;
+    /**
+     * Optional id that get passed to the table and used to setup ::parts
+     */
+    this.groupId = "";
     /**
      * Theme of the table.
      */
     this.theme = "";
     /**
-     * Private methods.
+     * Exposes the aria role for optimizing accessibility.
      */
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 100); // will trigger re-render
+    this.accessibleRole = undefined;
+    this.sortableDefaultLabel = {
+      fi: "Järjestä",
+      en: "Click to sort",
+      sv: "Klicka för att sortera",
+    };
+    this.actionColumnLabel = {
+      en: "Actions for rows",
+      fi: "Toiminnot rivillä",
+      sv: "Åtgärder för rader",
+    };
     /**
-     * If a user defines a template section within editable table, try to read an use it.
+     * Private methods.
      */
-    this.getTemplate = () => {
-      const templateDom = this.element.getElementsByTagName("template");
-      if (templateDom === null || templateDom === void 0 ? void 0 : templateDom.length) {
-        const templateString = templateDom[0].content.firstElementChild.outerHTML;
-        return generateTemplateFn(templateString);
-      }
-      else {
-        return false;
-      }
-    };
-    this.getItemData = (data) => {
-      const { item, group, uid } = data;
-      if (this.template) {
-        return {
-          group,
-          uid,
-          item: this.template(item),
-        };
-      }
-      return { item, group, uid };
+    this.toggleColumn = (column, e) => {
+      e.preventDefault();
+      const { sort_order, direction, index, key } = column;
+      this.duetTableToggle.emit({
+        sort_order,
+        index,
+        direction,
+        key,
+        component: "duet-editable-table",
+        originalEvent: e,
+      });
     };
-    this.filterMap = needle => {
-      if (needle === "all") {
-        return Array.from(this.items);
+    this.handleKeyDown = (column, e) => {
+      if (isKeyboardClick(e)) {
+        this.toggleColumn(column, e);
       }
-      return Array.from(this.items).filter(item => needle === item[1].group);
     };
   }
   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
-    // look for a <template> region in the duet-editable-table
-    this.template = this.getTemplate();
-    // take care of the case where groups and actions are defined as html properties instead of javascript objects
-    if (typeof this.groups === "string") {
-      this.internalGroupArray = sanitizeString(this.groups);
-    }
-    else {
-      this.internalGroupArray = this.groups;
-    }
-    if (typeof this.actions === "string") {
-      this.internalActionsArray = sanitizeString(this.actions);
-    }
-    else {
-      this.internalActionsArray = this.actions;
-    }
     inheritGlobalTheme(this);
   }
-  /**
-   * Method to force an update of a tabular data array.
-   * when called the method will rerender the entire tabular structure.
-   */
-  async updateTable(passedItems = undefined) {
-    this.items = new Map(passedItems || this.items);
-    this.kick();
-  }
-  render() {
-    return (hAsync(Host, { class: {
-        "duet-theme-turva": this.theme === "turva",
-      } }, this.internalGroupArray.map(group => {
-      const currentGroup = this.filterMap(group.id);
-      if (!currentGroup.length) {
-        return;
+  createLabel(column) {
+    const { sort_order, direction, index, label } = column;
+    const i18nLabel = getLocaleString(label);
+    if (!this.sortable) {
+      return i18nLabel;
+    }
+    const getButtonIcon = () => {
+      // "action-subtract-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-subtract-small.svg
+      // "action-arrow-down-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-down-small.svg
+      // "action-arrow-up-small" https://cdn.duetds.com/api/icons/2.2.12/lib/assets/action-arrow-up-small.svg
+      if (!!sort_order && direction === 1) {
+        return "action-arrow-down-small";
       }
-      return (hAsync("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" }, hAsync("table", { class: "duet-editable-table", "aria-role": this.accessibleRole }, hAsync("thead", { class: "duet-editable-table-header" }, hAsync("tr", null, hAsync("th", { class: {
-          "duet-editable-table-header-hidden": this.hideGroups,
-        } }, !this.hideGroups ? (getLocaleString(group.label)) : (hAsync("duet-visually-hidden", null, getLocaleString(group.label)))), hAsync("th", { class: {
-          "duet-editable-table-header-hidden": this.hideGroups,
-        } }, hAsync("duet-visually-hidden", null, group.actionLabel
-        ? getLocaleString(group.actionLabel)
-        : getLocaleString(this.actionLabelDefaults))))), hAsync("tbody", null, currentGroup.map(dataAsArray => {
-        const [key, value] = dataAsArray;
-        return (hAsync("duet-editable-table-item", { theme: this.theme, keyName: key, data: this.getItemData(value), groupId: group.id, part: group.id, alignment: this.alignment, actions: this.internalActionsArray }));
-      })))));
-    })));
-  }
-  get element() { return getElement(this); }
-  static get style() { return duetEditableTableCss; }
-  static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "duet-editable-table",
-    "$members$": {
-      "items": [1040],
-      "alignment": [1],
-      "groupsLabelDefaults": [16],
-      "actionLabelDefaults": [16],
-      "groups": [1],
-      "actions": [1],
-      "hideGroups": [4, "hide-table-labels"],
-      "accessibleRole": [1, "accessible-role"],
-      "theme": [1025],
-      "tick": [32],
-      "updateTable": [64]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
-const duetEditableTableButtonCss = "*.sc-duet-editable-table-button,*.sc-duet-editable-table-button::after,*.sc-duet-editable-table-button::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button{display:flex;align-content:space-between;justify-content:center;min-width:32px;max-width:32px;height:100%;min-height:32px;max-height:32px;padding:0;margin:0;cursor:pointer !important;background-color:transparent;border:1px solid;border-radius:50%}.sc-duet-editable-table-button-h button.sc-duet-editable-table-button duet-icon.sc-duet-editable-table-button{align-self:center}";
-
-class DuetEditableTableButton {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.duetEditableItemAction = createEvent$2(this, "duetEditableItemAction", 7);
-    this.isHovering = false;
-    /**
-     * Theme of the empty state component.
-     */
-    this.theme = undefined;
-    /**
-     * action items passed from host component
-     * @internal
-     */
-    this.actions = undefined;
-    /**
-     * uid that gets passed along when the action is emitted
-     * @internal
-     */
-    this.uid = "";
-    /**
-     * group associated with action
-     * @internal
-     */
-    this.group = "";
-    /**
-     * key of the item in the map
-     * @internal
-     */
-    this.keyName = "";
-    this.onMouseEnter = () => {
-      this.isHovering = true;
-    };
-    this.onMouseLeave = () => {
-      this.isHovering = false;
-    };
-    this.getColours = (byName = false) => {
-      let colorHover = this.actions.color_hover;
-      let colorBlur = this.actions.color;
-      if (byName) {
-        colorHover = getColorByName(this.actions.color_hover, this.theme);
-        colorBlur = getColorByName(this.actions.color, this.theme);
-      }
-      return this.isHovering ? colorHover : colorBlur;
+      else if (!!sort_order && direction === -1) {
+        return "action-arrow-up-small";
+      }
+      return "action-subtract-small";
     };
-  }
-  /**
-   /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   /**
-   * private functions
-   */
-  emitActionEvent(ev) {
-    this.duetEditableItemAction.emit({
-      originalEvent: ev,
-      uid: this.uid,
-      group: this.group,
-      action: this.actions.id,
-      keyName: this.keyName,
-      component: "duet-editable-table-item",
+    return (hAsync("span", { class: "duet-table-label", "data-index": index }, hAsync("duet-button", { size: "small", icon: getButtonIcon(), "icon-size": "medium-small", "accessible-label": getLocaleString(this.sortableDefaultLabel), variation: "plain", margin: "none", "icon-right": true, onClick: event => this.toggleColumn(column, event), onKeyDown: event => this.handleKeyDown(column, event) }, i18nLabel)));
+  }
+  getSortedColumns() {
+    //create a new array from sort instead of mutating original
+    return [...this.columns].sort(fieldSorter(["index"]));
+  }
+  getRowSortOrder() {
+    //create a new array from sort instead of mutating original
+    const fields = [...this.columns].sort(fieldSorter(["sort_order"]));
+    //return only key from objects that have sort_order
+    return fields
+      .filter(column => column.sort_order)
+      .map(column => {
+      // add - in-front of descending direction (required by field-sorter)
+      return column.direction === -1 ? `-${column.key}` : column.key;
     });
   }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (hAsync("button", { style: {
-        "border-color": this.getColours(true),
-      }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, role: "menuitem", class: "duet-editable-table-actions-items-button", "aria-label": this.actions.label ? getLocaleString(this.actions.label) : undefined, onClick: ev => this.emitActionEvent(ev) }, hAsync("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.getColours(), margin: "none" })));
-  }
-  get el() { return getElement(this); }
-  static get style() { return duetEditableTableButtonCss; }
-  static get cmpMeta() { return {
-    "$flags$": 2,
-    "$tagName$": "duet-editable-table-button",
-    "$members$": {
-      "theme": [1025],
-      "actions": [16],
-      "uid": [1],
-      "group": [1],
-      "keyName": [1, "key-name"],
-      "isHovering": [32]
-    },
-    "$listeners$": undefined,
-    "$lazyBundleId$": "-",
-    "$attrsToReflect$": []
-  }; }
-}
-
-//simple functional component that renders the data in the table
-const TableData = ({ data, groupId, alignment }, _children) => {
-  if (typeof data === "string") {
-    return (hAsync("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }));
-  }
-  else {
-    return (hAsync("td", { class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
-  }
-};
-
-const duetEditableTableItemCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-editable-table-item,*.sc-duet-editable-table-item::after,*.sc-duet-editable-table-item::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-editable-table-item-h{display:table-row;height:32px}/*!@.duet-editable-table-content, .duet-editable-table-actions*/.duet-editable-table-content.sc-duet-editable-table-item,.duet-editable-table-actions.sc-duet-editable-table-item{height:32px;padding:12px 0;vertical-align:middle;break-word:break-all;border-bottom:1px solid #e1e3e6}/*!@.duet-editable-table-actions-items*/.duet-editable-table-actions-items.sc-duet-editable-table-item{display:flex;justify-content:flex-end}/*!@.duet-editable-table-actions-items duet-editable-table-button*/.duet-editable-table-actions-items.sc-duet-editable-table-item duet-editable-table-button.sc-duet-editable-table-item{padding-left:8px}/*!@.duet-editable-table .editable-item-small*/.duet-editable-table.sc-duet-editable-table-item .editable-item-small.sc-duet-editable-table-item{font-size:0.75rem;font-weight:400}";
-
-class DuetEditableTableItem {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.duetEditableItemAction = createEvent$2(this, "duetEditableItemAction", 7);
-    this.isHovering = false;
-    /**
-     * Theme of the empty state component.
-     */
-    this.theme = "";
-    /**
-     * Actions that can be performed on the element
-     */
-    this.actions = undefined;
-    /**
-     * GroupId used to pierce the shadowdom - gets concatenated with "content & actions" and used as part="groupIDcontent/actions" to pierce the content/Action item
-     * @internal
-     */
-    this.groupId = "";
-    /**
-     * Key used to set vertical alignment of action buttons
-     */
-    this.alignment = "middle";
-    /**
-     * Key used to identify item, when running actions
-     */
-    this.keyName = "";
-    /**
-     * Object of data itemsused to render the entire row
-     */
-    this.data = undefined;
+  renderTableHeader() {
+    if (!this.columns) {
+      return;
+    }
+    const sortedColumns = this.getSortedColumns();
+    return (hAsync("tr", { class: {
+        "duet-table-action-header": !!this.actions,
+      } }, sortedColumns.map(column => {
+      if (column.display !== false) {
+        return hAsync("th", { scope: "col" }, this.createLabel(column));
+      }
+    }), this.actions && (hAsync("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && hAsync("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
   }
-  watchPropHandler(_newValue, _oldValue) {
-    // console.log("The new value of activated is: ", _newValue)
+  renderActions(rowItem, index) {
+    // escape early
+    if (!this.actions) {
+      return;
+    }
+    // iterate through actions and add them in the sidebar
+    return (hAsync("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+      return (hAsync("duet-action-button", { actionMeta: Object.assign({}, (rowItem === null || rowItem === void 0 ? void 0 : rowItem.meta) || {}, { index }), actionId: (rowItem === null || rowItem === void 0 ? void 0 : rowItem.uid) || (rowItem === null || rowItem === void 0 ? void 0 : rowItem.id) || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background }));
+    })));
   }
-  /**
-   /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
+  renderTableBody() {
+    const columns = this.getSortedColumns();
+    const rowSortOrder = this.getRowSortOrder();
+    const sortedRows = [...this.rows].sort(fieldSorter(rowSortOrder));
+    // return a tbody with rows for each item in sortedRows
+    return sortedRows.map((row, index) => (hAsync("tr", { class: {
+        "duet-table-action-row": !!this.actions,
+        "duet-editable-table-row": true,
+        [`duet-editable-table-row-${this.groupId}`]: true,
+      }, "data-meta": JSON.stringify(row.meta) }, columns.map(column => {
+      //if we don't have any data for this column, try getting an item instead (for backwards compatibility
+      const value = row[column.key] ? row[column.key] : row.item;
+      if (column.display !== false) {
+        return hAsync(TableData, { data: value, groupId: this.groupId });
+      }
+    }), this.actions && this.renderActions(row, index))));
   }
   /**
-   /**
-   * private functions
-   */
-  /**
-   * render() function
-   * Always the last one in the class.
+   * Render Methods
    */
   render() {
-    return (hAsync(Host, { role: "row" }, hAsync(TableData, { data: this.data.item, alignment: this.alignment, groupId: this.groupId }), hAsync("td", { class: "duet-editable-table-actions", style: { verticalAlign: this.alignment } }, hAsync("div", { class: "duet-editable-table-actions-items", part: `${this.groupId}actions` }, this.actions.map(result => {
-      const { map = undefined } = result;
-      // if map has been specified, only show the current action if groupID matches the map array
-      if (map && !map.includes(this.groupId)) {
-        return;
-      }
-      return (hAsync("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
-    })))));
+    return (hAsync(Host, { class: {
+        [`duet-editable-table-${this.variation}`]: true,
+        [`duet-editable-table-${this.theme}`]: true,
+        // sticky only valid when in regular table layout
+        "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
+        "duet-editable-table-sortable": this.sortable,
+        "duet-editable-table-actions": !!this.actions,
+        "duet-m-0": this.margin === "none",
+        "duet-theme-turva": this.theme === "turva",
+      } }, hAsync("duet-table", { sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint }, hAsync("table", { role: this.accessibleRole }, hAsync("caption", null, hAsync("slot", { name: "tcaption" })), hAsync("thead", null, hAsync("tr", null, hAsync("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, hAsync("slot", { name: "thead-first" }))), this.renderTableHeader(), hAsync("tr", null, hAsync("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, hAsync("slot", { name: "thead-last" })))), hAsync("tbody", null, this.renderTableBody()), hAsync("tfoot", null, hAsync("tr", null, hAsync("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, hAsync("slot", { name: "tfoot" }))))))));
   }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "data": ["watchPropHandler"]
-  }; }
-  static get style() { return duetEditableTableItemCss; }
+  get element() { return getElement(this); }
+  static get style() { return duetEditableTableCss; }
   static get cmpMeta() { return {
-    "$flags$": 9,
-    "$tagName$": "duet-editable-table-item",
+    "$flags$": 6,
+    "$tagName$": "duet-editable-table",
     "$members$": {
-      "theme": [1025],
-      "actions": [16],
+      "margin": [1],
+      "variation": [1],
+      "sticky": [4],
+      "stickyDistance": [1, "sticky-distance"],
+      "breakpoint": [1],
+      "actions": [1040],
+      "columns": [1040],
+      "rows": [1040],
+      "sortable": [4],
       "groupId": [1, "group-id"],
-      "alignment": [1],
-      "keyName": [1, "key-name"],
-      "data": [1040],
-      "isHovering": [32]
+      "theme": [1025],
+      "accessibleRole": [1, "accessible-role"]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -13035,7 +13068,7 @@ const shouldDisplayNavigation = (visibleItems, total, take) => {
   return true;
 };
 
-const duetPaginationCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-pagination,*.sc-duet-pagination::after,*.sc-duet-pagination::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-pagination-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}/*!@.duet-pagination-nav*/.duet-pagination-nav.sc-duet-pagination{position:relative}/*!@.duet-pagination, .duet-pagination li*/.duet-pagination.sc-duet-pagination,.duet-pagination.sc-duet-pagination li.sc-duet-pagination{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}/*!@.duet-pagination-item-is-active .duet-pagination-page-number*/.duet-pagination-item-is-active.sc-duet-pagination .duet-pagination-page-number.sc-duet-pagination{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}/*!@.duet-pagination duet-button*/.duet-pagination.sc-duet-pagination duet-button.sc-duet-pagination{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}/*!@.duet-pagination-overlay*/.duet-pagination-overlay.sc-duet-pagination{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}/*!@.duet-pagination.duet-pagination-is-dimmed*/.duet-pagination.duet-pagination-is-dimmed.sc-duet-pagination{opacity:0.5}/*!@.duet-pagination-page-button*/.duet-pagination-page-button.sc-duet-pagination{white-space:nowrap}/*!@.duet-pagination-page-button button*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}/*!@.duet-theme-turva .duet-pagination-page-button button*/.duet-theme-turva.sc-duet-pagination .duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination{color:#171c3a;background:#f5f5f7}/*!@.duet-pagination-page-button button duet-icon*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination duet-icon.sc-duet-pagination{display:block}@media (max-width: 35.9375em){/*!@.duet-pagination-page-button button*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination{width:40px;height:40px}}/*!@.duet-pagination-page-button button:not(:disabled):hover*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:not(:disabled):hover{background:#e9ecee !important}/*!@.duet-theme-turva .duet-pagination-page-button button:not(:disabled):hover*/.duet-theme-turva.sc-duet-pagination .duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:not(:disabled):hover{background:#e9e9eb !important}/*!@.duet-pagination-page-button button:focus*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:focus{outline:0;box-shadow:0 0 0 2px #0077b3}/*!@.duet-theme-turva .duet-pagination-page-button button:focus*/.duet-theme-turva.sc-duet-pagination .duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:focus{box-shadow:0 0 0 2px #171c3a}/*!@.duet-pagination-page-button button:active:focus*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:active:focus{background:#dddfe1;box-shadow:none}/*!@.duet-theme-turva .duet-pagination-page-button button:active:focus*/.duet-theme-turva.sc-duet-pagination .duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:active:focus{background:#ddddde}/*!@.duet-pagination-page-button button:disabled*/.duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}/*!@.duet-theme-turva .duet-pagination-page-button button:disabled*/.duet-theme-turva.sc-duet-pagination .duet-pagination-page-button.sc-duet-pagination button.sc-duet-pagination:disabled{color:#747475;background:#f5f5f7}";
+const duetPaginationCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-pagination,*.sc-duet-pagination::after,*.sc-duet-pagination::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-pagination-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}/*!@.duet-pagination-nav*/.duet-pagination-nav.sc-duet-pagination{position:relative}/*!@.duet-pagination ::part(button)*/.duet-pagination.sc-duet-pagination .sc-duet-pagination::part(button){border:0}/*!@.duet-pagination, .duet-pagination li*/.duet-pagination.sc-duet-pagination,.duet-pagination.sc-duet-pagination li.sc-duet-pagination{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}/*!@.duet-pagination-item-is-active .duet-pagination-page-number*/.duet-pagination-item-is-active.sc-duet-pagination .duet-pagination-page-number.sc-duet-pagination{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}/*!@.duet-pagination duet-button*/.duet-pagination.sc-duet-pagination duet-button.sc-duet-pagination{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}/*!@.duet-pagination-overlay*/.duet-pagination-overlay.sc-duet-pagination{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}/*!@.duet-pagination.duet-pagination-is-dimmed*/.duet-pagination.duet-pagination-is-dimmed.sc-duet-pagination{opacity:0.5}";
 
 class DuetPagination {
   constructor(hostRef) {
@@ -13061,10 +13094,14 @@ class DuetPagination {
      * Characters to use for the jump buttons.
      */
     this.jumpString = "...";
+    /**
+     * Variation of the paginator (compact and default supported)
+     */
+    this.variation = "default";
     /**
      * Default pagination labels
      */
-    this.ariaLabelsDefaults = {
+    this.accessibleLabelsDefaults = {
       en: {
         next_page: "Next page",
         previous_page: "Previous page",
@@ -13105,7 +13142,7 @@ class DuetPagination {
     /**
      * Default pagination labels
      */
-    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
     /**
      * The size of the take, when paginating.
      */
@@ -13274,29 +13311,35 @@ class DuetPagination {
           "duet-pagination-item-is-active": i === this.current,
         }, role: "menuitem" }, hAsync("duet-button", { class: {
           "duet-pagination-link": true,
-        }, color: i !== this.current ? "secondary" : "primary", "data-id": i, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.ariaLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) }, hAsync("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
+        }, color: i !== this.current ? "secondary" : "primary", "data-id": i, "center-text": true, variation: "plain", margin: "none", accessibleLabel: `${this.accessibleLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) }, hAsync("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
     } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
     return items;
   }
   shouldDisplayNavigation() {
-    return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    if (this.variation !== "compact") {
+      return shouldDisplayNavigation(this.visibleItems, this.total, this.take);
+    }
+    return false;
   }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (hAsync(Host, { onKeyDown: e => this.onKeyboardDown(e) }, hAsync("nav", { role: "navigation", class: "duet-pagination-nav", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls }, this.numbersStore !== "" && (hAsync("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.ariaLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, hAsync("duet-badge", null, "jump to page : ", this.numbersStore))), hAsync("ol", { id: this.listId, class: {
+    return (hAsync(Host, { onKeyDown: e => this.onKeyboardDown(e) }, hAsync("nav", { role: "navigation", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+        "duet-pagination-nav": true,
+        [`duet-pagination-variation-${this.variation}`]: true,
+      } }, this.numbersStore !== "" && (hAsync("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, hAsync("duet-badge", null, "jump to page : ", this.numbersStore))), hAsync("ol", { id: this.listId, class: {
         "duet-pagination": true,
         "duet-pagination-is-dimmed": this.numbersStore !== "",
-      }, role: "menubar", "aria-label": this.ariaLabels.pagination_label, "aria-description": this.ariaLabels.description }, hAsync("li", { class: {
+      }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, hAsync("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-first": true,
-      }, role: "menuitem", part: "navigation-arrow" }, hAsync("button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", class: "duet-date-dialog-prev", type: "button", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.ariaLabels.previous_page }, hAsync("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" }))), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (hAsync(Fragment, null, hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.ariaLabels.first_page, onClick: e => this.jumpToStart(e) }, hAsync("div", { class: "duet-pagination-page-number" }, "1"))), hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.ariaLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) }, hAsync("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (hAsync(Fragment, null, hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.ariaLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) }, hAsync("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.ariaLabels.last_page, onClick: e => this.jumpToEnd(e) }, hAsync("div", { class: "duet-pagination-page-number" }, this.totalPages))))), hAsync("li", { class: {
+      }, role: "menuitem", part: "navigation-arrow" }, hAsync("duet-action-button", { disabled: this.internalSectionIndex === 0 && this.current <= 1, "data-direction": "back", onClick: e => this.onMouseHandler(e, -1), "aria-label": this.accessibleLabels.previous_page, "icon-name": "action-arrow-left-small" })), this.internalSectionIndex !== 0 && this.shouldDisplayNavigation() && (hAsync(Fragment, null, hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", variation: "plain", color: "secondary", margin: "none", accessibleLabel: this.accessibleLabels.first_page, onClick: e => this.jumpToStart(e) }, hAsync("div", { class: "duet-pagination-page-number" }, "1"))), hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.prev_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, -1) }, hAsync("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (hAsync(Fragment, null, hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.next_section.replace("{0}", `${this.visibleItems}`), onClick: e => this.sectionClickHandler(e, 1) }, hAsync("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), hAsync("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, hAsync("duet-button", { class: "duet-pagination-link", "center-text": "true", color: "secondary", variation: "plain", margin: "none", accessibleLabel: this.accessibleLabels.last_page, onClick: e => this.jumpToEnd(e) }, hAsync("div", { class: "duet-pagination-page-number" }, this.totalPages))))), hAsync("li", { class: {
         "duet-pagination-page-button": true,
         "duet-pagination-button-last": true,
-      }, role: "menuitem", part: "navigation-arrow" }, hAsync("button", { disabled: this.current === this.totalPages &&
-        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, class: "duet-date-dialog-next", type: "button", "aria-label": this.ariaLabels.next_page, onClick: e => this.onMouseHandler(e, 1) }, hAsync("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" })))))));
+      }, role: "menuitem", part: "navigation-arrow" }, hAsync("duet-action-button", { disabled: this.current === this.totalPages &&
+        this.internalSectionIndex === Math.ceil(this.totalPages / this.visibleItems) - 1, class: "duet-date-dialog-next", "aria-label": this.accessibleLabels.next_page, onClick: e => this.onMouseHandler(e, 1), "icon-name": "action-arrow-right-small" }))))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -13309,8 +13352,9 @@ class DuetPagination {
     "$members$": {
       "theme": [1025],
       "jumpString": [1, "jump-string"],
-      "ariaLabelsDefaults": [16],
-      "ariaLabels": [16],
+      "variation": [1],
+      "accessibleLabelsDefaults": [16],
+      "accessibleLabels": [16],
       "take": [1026],
       "visibleItems": [1026, "visible-items"],
       "total": [1026],
@@ -13967,7 +14011,7 @@ class DuetRangeSlider {
   }; }
 }
 
-const duetRangeStepperCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-range-stepper,*.sc-duet-range-stepper::after,*.sc-duet-range-stepper::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-range-stepper-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}/*!@.duet-range-stepper*/.duet-range-stepper.sc-duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}/*!@.duet-range-stepper*/.duet-range-stepper.sc-duet-range-stepper{white-space:nowrap}/*!@.duet-range-stepper button*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px !important;color:#00294d;cursor:pointer;background:#f5f8fa;border-radius:50%;transition:background-color 300ms ease !important}/*!@.duet-theme-turva .duet-range-stepper button*/.duet-theme-turva.sc-duet-range-stepper .duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper{color:#171c3a;background:#f5f5f7}/*!@.duet-range-stepper button duet-icon*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper duet-icon.sc-duet-range-stepper{display:block}@media (max-width: 35.9375em){/*!@.duet-range-stepper button*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper{width:40px;height:40px}}/*!@.duet-range-stepper button:not(:disabled):hover*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:not(:disabled):hover{background:#e9ecee !important}/*!@.duet-theme-turva .duet-range-stepper button:not(:disabled):hover*/.duet-theme-turva.sc-duet-range-stepper .duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:not(:disabled):hover{background:#e9e9eb !important}/*!@.duet-range-stepper button:focus*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:focus{outline:0;box-shadow:0 0 0 2px #0077b3}/*!@.duet-theme-turva .duet-range-stepper button:focus*/.duet-theme-turva.sc-duet-range-stepper .duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:focus{box-shadow:0 0 0 2px #171c3a}/*!@.duet-range-stepper button:active:focus*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:active:focus{background:#dddfe1;box-shadow:none}/*!@.duet-theme-turva .duet-range-stepper button:active:focus*/.duet-theme-turva.sc-duet-range-stepper .duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:active:focus{background:#ddddde}/*!@.duet-range-stepper button:disabled*/.duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}/*!@.duet-theme-turva .duet-range-stepper button:disabled*/.duet-theme-turva.sc-duet-range-stepper .duet-range-stepper.sc-duet-range-stepper button.sc-duet-range-stepper:disabled{color:#747475;background:#f5f5f7}";
+const duetRangeStepperCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-range-stepper,*.sc-duet-range-stepper::after,*.sc-duet-range-stepper::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-range-stepper-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}/*!@.duet-range-stepper*/.duet-range-stepper.sc-duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}/*!@.duet-range-stepper*/.duet-range-stepper.sc-duet-range-stepper{white-space:nowrap}/*!@.duet-range-stepper .duet-range-step-counter*/.duet-range-stepper.sc-duet-range-stepper .duet-range-step-counter.sc-duet-range-stepper{font-weight:600;color:#00294d}/*!@.duet-range-stepper ::part(button)*/.duet-range-stepper.sc-duet-range-stepper .sc-duet-range-stepper::part(button){border:0}";
 
 class DuetRangeStepper {
   constructor(hostRef) {
@@ -14112,7 +14156,7 @@ class DuetRangeStepper {
     return (hAsync("div", { class: {
         "duet-range-stepper": true,
         "duet-theme-turva": this.theme === "turva",
-      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, hAsync("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), hAsync("button", { class: "duet-range-step-button duet-range-step-minus", type: "button", onClick: e => this.handleClick(e, -1), id: this.leftBn, "aria-label": this.ariaLabels.previous_increment, ref: el => (this.leftBnRef = el), part: "navigation-arrow" }, hAsync("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" })), hAsync("button", { class: "duet-range-step-button duet-range-step-plus", type: "button", onClick: e => this.handleClick(e, 1), "aria-label": this.ariaLabels.next_increment, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow" }, hAsync("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }))));
+      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, hAsync("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), hAsync("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "aria-label": this.ariaLabels.previous_increment, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small" }), hAsync("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "aria-label": this.ariaLabels.next_increment, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small" })));
   }
   get element() { return getElement(this); }
   static get watchers() { return {
@@ -15180,7 +15224,7 @@ class DuetTabGroup {
   }; }
 }
 
-const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{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;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}.duet-table-flattened table,.duet-table-flattened thead,.duet-table-flattened tbody,.duet-table-flattened tfoot,.duet-table-flattened th,.duet-table-flattened td,.duet-table-flattened tr{display:block}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}";
+const duetTableCss = "duet-table{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:block;font-variant-numeric:tabular-nums}duet-table table,duet-table thead,duet-table tbody,duet-table tfoot,duet-table th,duet-table td,duet-table tr{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}duet-table.duet-m-0{margin:0 !important}duet-table table{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;text-align:left;border-spacing:0;border-collapse:separate}duet-table.duet-theme-turva table{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}duet-table td{-webkit-hyphens:auto;hyphens:auto;color:#00294d}duet-table.duet-theme-turva td{color:#171c3a}duet-table th{font-weight:600;line-height:1.25;color:#657787;text-align:left}duet-table.duet-theme-turva th{color:#747475}duet-table tbody th{font-weight:600;color:#00294d}duet-table.duet-theme-turva tbody th{color:#171c3a}duet-table .duet-table-action-row td:last-child{justify-self:end;padding-right:20px !important;white-space:nowrap}.duet-table-flattened tbody tr{display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto;gap:10px}.duet-table-flattened tbody tr.duet-table-action-row td:last-child::before{padding:0;content:\"\"}.duet-table-flattened thead tr{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-table-flattened td{grid-column:1/2;line-height:1.25}.duet-table-flattened td:not(:last-child){margin-bottom:16px !important}.duet-table-flattened td:first-child{grid-row:1;grid-column:1}.duet-table-flattened td:last-child{grid-row:1;grid-column:2}.duet-table-flattened tbody td,.duet-table-flattened tbody th,.duet-table-flattened tfoot td{padding:0 !important;text-align:left !important}.duet-table-flattened tbody th{font-weight:600;line-height:1.25;color:#657787;text-align:left}.duet-table-flattened td[data-heading]::before{margin-bottom:4px !important;display:block;font-size:1rem;font-weight:600;color:#00294d;content:attr(data-heading)}.duet-table-flattened.duet-theme-turva td[data-heading]::before{color:#171c3a}.duet-table-sticky thead th{position:sticky;top:0;background:white}.duet-table-striped td,.duet-table-striped th{padding:20px !important}@media (max-width: 35.9375em){.duet-table-striped td,.duet-table-striped th{padding:20px 12px !important}}.duet-table-striped tbody th{background:white}.duet-table-striped.duet-table-sticky thead th{border-bottom:1px solid #e1e3e6}.duet-table-striped.duet-table-sticky.duet-theme-turva thead th{border-bottom-color:#e4e4e6}.duet-table-striped tbody:not(:first-of-type) th{padding-top:40px !important}.duet-table-striped tbody:only-of-type tr:nth-of-type(odd){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(0, 80, 128, 0.04)}.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even){background:rgba(23, 28, 58, 0.04)}.duet-table-striped tfoot td{border-top:1px solid #e1e3e6}.duet-table-striped.duet-theme-turva tfoot td{border-top-color:#e4e4e6}.duet-table-striped.duet-table-flattened tbody:not(:first-of-type) th{padding-top:20px !important}.duet-table-striped.duet-table-flattened tr{padding:20px !important}.duet-table-striped.duet-table-flattened tfoot td{border-top:0}.duet-table-striped.duet-table-flattened tfoot tr{border-top:1px solid #e1e3e6}.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr{border-top-color:#e4e4e6}.duet-table-fixed th,.duet-table-minimal th,.duet-table-plain th{padding:16px !important;border-bottom:1px solid #657787}.duet-table-fixed th:first-child,.duet-table-minimal th:first-child,.duet-table-plain th:first-child{padding-left:0 !important}.duet-table-fixed th:last-child,.duet-table-minimal th:last-child,.duet-table-plain th:last-child{padding-right:0 !important}.duet-theme-turva.duet-table-fixed th,.duet-theme-turva.duet-table-minimal th,.duet-theme-turva.duet-table-plain th{border-bottom-color:#444445}.duet-table-fixed tbody th,.duet-table-minimal tbody th,.duet-table-plain tbody th{padding-top:40px !important;border-bottom-color:#e1e3e6}.duet-theme-turva.duet-table-fixed tbody th,.duet-theme-turva.duet-table-minimal tbody th,.duet-theme-turva.duet-table-plain tbody th{border-bottom-color:#e4e4e6}.duet-table-fixed td,.duet-table-minimal td,.duet-table-plain td{padding:16px !important}.duet-table-fixed td:first-child,.duet-table-minimal td:first-child,.duet-table-plain td:first-child{padding-left:0 !important}.duet-table-fixed td:last-child,.duet-table-minimal td:last-child,.duet-table-plain td:last-child{padding-right:0 !important}.duet-table-fixed tbody td,.duet-table-minimal tbody td,.duet-table-plain tbody td{border-bottom:1px solid #e1e3e6}.duet-theme-turva.duet-table-fixed tbody td,.duet-theme-turva.duet-table-minimal tbody td,.duet-theme-turva.duet-table-plain tbody td{border-bottom-color:#e4e4e6}.duet-table-flattened.duet-table-fixed tbody:first-of-type th,.duet-table-flattened.duet-table-minimal tbody:first-of-type th,.duet-table-flattened.duet-table-plain tbody:first-of-type th{padding-top:0 !important}.duet-table-flattened.duet-table-fixed td,.duet-table-flattened.duet-table-minimal td,.duet-table-flattened.duet-table-plain td,.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{border-bottom:0}.duet-table-flattened.duet-table-fixed tr,.duet-table-flattened.duet-table-minimal tr,.duet-table-flattened.duet-table-plain tr{padding:20px 0 !important}.duet-table-flattened.duet-table-fixed tbody th,.duet-table-flattened.duet-table-minimal tbody th,.duet-table-flattened.duet-table-plain tbody th{padding-top:20px !important}.duet-table-flattened.duet-table-fixed tfoot td,.duet-table-flattened.duet-table-minimal tfoot td,.duet-table-flattened.duet-table-plain tfoot td{margin-bottom:4px !important}.duet-table-flattened.duet-table-fixed tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-minimal tbody:not(:only-of-type) tr:first-child,.duet-table-flattened.duet-table-plain tbody:not(:only-of-type) tr:first-child{border-bottom:0}.duet-table-plain.duet-table-flattened tbody tr{border-bottom:1px solid #e1e3e6}.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr{border-bottom-color:#e4e4e6}.duet-table-minimal tbody tr,.duet-table-minimal tbody tr td{vertical-align:top;border-bottom:0 none}.duet-table-minimal tbody tr:last-of-type,.duet-table-minimal tbody tr:last-of-type td{border-bottom:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened tbody tr,.duet-table-minimal.duet-table-flattened tbody tr td{border-bottom:0 none}.duet-table-minimal.duet-table-flattened tbody tr td[data-heading]::before{display:none}.duet-table-minimal.duet-table-flattened tfoot{border-top:1px solid #e1e3e6}.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-fixed table{table-layout:fixed}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td,.duet-table-fixed tbody tr td:first-child{padding:4px !important;vertical-align:text-bottom;border-bottom:0 none}.duet-table-fixed thead{display:none}.duet-table-fixed tbody tr,.duet-table-fixed tbody tr td{border-bottom:0 none}.duet-table-fixed:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-fixed:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-scrollable{position:relative;width:100%;overflow-x:auto;background:linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0)), linear-gradient(-90deg, #fff 0%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 100% 0%;background-repeat:no-repeat;background-attachment:local, local, scroll, scroll;background-size:100px 100%, 100px 100%, 12px 100%, 12px 100%}.duet-table-selected-column{background:rgba(0, 119, 179, 0.08)}.duet-theme-turva .duet-table-selected-column{background:rgba(68, 68, 69, 0.08)}.duet-table-sortable tbody tr td:first-child,.duet-table-sortable thead tr th:first-child{padding:20px}.duet-table-sortable:not(.duet-table-flattened) tfoot{border-top:1px solid #e1e3e6}.duet-table-sortable:not(.duet-table-flattened).duet-theme-turva tfoot{border-top-color:#e4e4e6}.duet-table-actions table{table-layout:auto}.duet-table-actions thead th:last-child{width:1px;white-space:nowrap}";
 
 // remove wrapping speech marks.
 // media query tokens are wrapped in speech marks,
@@ -15201,6 +15245,11 @@ const stickyTopValues = {
   "with-links": parseFloat(sizeNavigation) * 16,
   "without-links": parseFloat(sizeHeader) * 16,
 };
+/**
+ * @slot dot-menu- If this slot is populated - the content will be displayed together with a ... type menu to the far right in the tsble header
+ * @slot header - Header slot for the table
+ * @slot footer - Footer slot for the table
+ */
 class DuetTable {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -15265,6 +15314,9 @@ class DuetTable {
       return;
     }
   }
+  /**
+   * Local methods.
+   */
   copyHeadingsToCells() {
     const headingElements = this.element.querySelectorAll("thead th");
     const rowElements = this.element.querySelectorAll("tbody tr");
@@ -16282,7 +16334,7 @@ const validateFile = (item, validators) => {
   if (item) {
     const { name, type, size } = item;
     const mime = validateFileMime(type, allowedMimetypes);
-    const ext = validateFileExtension(name, allowedExtensions);
+    const ext = validateFileExtension(name.toLowerCase(), allowedExtensions);
     const bytes = validateFileSize(size, maxBytes);
     if (!mime) {
       errorMessage = getError("duet-upload-101");
@@ -16362,7 +16414,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
   return xhr;
 };
 
-const duetUploadCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-upload,*.sc-duet-upload::after,*.sc-duet-upload::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-upload-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@::slotted([slot=header])*/.sc-duet-upload-s>[slot=header]{margin-bottom:16px}/*!@::slotted([slot=fileheader])*/.sc-duet-upload-s>[slot=fileheader]{margin:16px 0 0 0}/*!@::slotted([slot=filefooter])*/.sc-duet-upload-s>[slot=filefooter]{margin-top:16px}/*!@.duet-upload*/.duet-upload.sc-duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-upload-item-size*/.duet-upload-item-size.sc-duet-upload{font-size:0.75rem;font-weight:400}/*!@.duet-upload-filelist*/.duet-upload-filelist.sc-duet-upload{margin-bottom:25px}/*!@.duet-upload-filelist-empty*/.duet-upload-filelist-empty.sc-duet-upload{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}";
+const duetUploadCss = "/*!@*,\n*::after,\n*::before*/*.sc-duet-upload,*.sc-duet-upload::after,*.sc-duet-upload::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@:host*/.sc-duet-upload-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@::slotted([slot=header])*/.sc-duet-upload-s>[slot=header]{margin-bottom:16px}/*!@::slotted([slot=fileheader])*/.sc-duet-upload-s>[slot=fileheader]{margin:16px 0 0 0}/*!@::slotted([slot=filefooter])*/.sc-duet-upload-s>[slot=filefooter]{margin-top:16px}/*!@.duet-upload*/.duet-upload.sc-duet-upload{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}/*!@.duet-upload-item-size*/.duet-upload-item-size.sc-duet-upload{font-size:0.75rem;font-weight:400}/*!@.duet-upload-filelist*/.duet-upload-filelist.sc-duet-upload{margin-bottom:25px}/*!@.duet-upload-filelist-empty*/.duet-upload-filelist-empty.sc-duet-upload{display:flex;align-items:center;justify-content:center;width:100%;height:75px;margin:0 auto;font-size:1rem;font-weight:400;background-color:#f5f8fa}/*!@.duet-upload-editable-table-header-hidden*/.duet-upload-editable-table-header-hidden.sc-duet-upload{display:none}/*!@.duet-upload-editable-table tbody .duet-upload-editable-table-data*/.duet-upload-editable-table.sc-duet-upload tbody.sc-duet-upload .duet-upload-editable-table-data.sc-duet-upload{padding:0 !important;border:0}/*!@.duet-upload-editable-table duet-editable-table tfoot,\n.duet-upload-editable-table duet-editable-table thead*/.duet-upload-editable-table.sc-duet-upload duet-editable-table.sc-duet-upload tfoot.sc-duet-upload,.duet-upload-editable-table.sc-duet-upload duet-editable-table.sc-duet-upload thead.sc-duet-upload{display:none}/*!@.duet-upload-editable-table duet-editable-table .duet-editable-table-content*/.duet-upload-editable-table.sc-duet-upload duet-editable-table.sc-duet-upload .duet-editable-table-content.sc-duet-upload{padding-right:0 !important;padding-left:0 !important}/*!@.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td*/.duet-upload-editable-table.sc-duet-upload duet-editable-table.sc-duet-upload duet-table.sc-duet-upload .duet-table-action-row.sc-duet-upload td.sc-duet-upload{padding:0.75rem 0 !important}/*!@.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child*/.duet-upload-editable-table.sc-duet-upload duet-editable-table.sc-duet-upload duet-table.sc-duet-upload .duet-table-action-row.sc-duet-upload td.sc-duet-upload:last-child{padding-right:0 !important}/*!@.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button)*/.duet-upload-editable-table.sc-duet-upload duet-editable-table.sc-duet-upload .duet-editable-table-row-inprogress.sc-duet-upload duet-action-button.sc-duet-upload::part(button){border:0}";
 
 /**
  * @slot header  - named slot - to place content after description / caption
@@ -16384,25 +16436,6 @@ class DuetUpload {
     this.duetCancel = createEvent$2(this, "duetCancel", 3);
     this.duetProgress = createEvent$2(this, "duetProgress", 3);
     this.duetUpload = createEvent$2(this, "duetUpload", 3);
-    /**
-     * Own Properties
-     */
-    this.buttonId = createID("DuetButton");
-    this.labelId = createID("DuetLabel");
-    this.uploadId = createID("DuetUpload");
-    this.editableTableId = createID("DuetEditableTable");
-    this.filesInProgress = new Map();
-    this.fileMaxReached = false;
-    this.bytesMaxReached = false;
-    this.internalStatusMessageLabel = undefined;
-    /**
-     * Properties
-     */
-    this.DefaultGroups = {
-      inprogress: "inprogress",
-      success: "success",
-      failure: "failure",
-    };
     /**
      * State() variables
      */
@@ -16424,8 +16457,9 @@ class DuetUpload {
       {
         icon: "action-delete",
         color: "color-danger",
-        color_hover: "primary-dark",
-        id: "delete",
+        size: "x-small",
+        background: "gray-lightest",
+        name: "delete",
         map: ["success", "failure"],
         label: {
           fi: "Poista tiedosto",
@@ -16436,8 +16470,9 @@ class DuetUpload {
       {
         icon: "navigation-close",
         color: "primary",
-        color_hover: "primary-dark",
-        id: "cancel",
+        size: "x-small",
+        background: "gray-lightest",
+        name: "cancel",
         map: ["inprogress"],
         label: {
           fi: "Keskeytä lähetys",
@@ -16507,8 +16542,8 @@ class DuetUpload {
         inProgressWithErrors: "Uploading {filesInProgress}, {filesUploaded} uploaded of {filesTotal}, {filesWithErrors} failed",
         done: "All {filesTotal} added successfully",
         doneWithErrors: "Action completed, {filesUploaded} has been added successfully, {filesWithErrors} had errors",
-        files: "tiedostoa",
-        file: "tiedosto",
+        files: "File",
+        file: "file",
       },
     };
     /**
@@ -16663,19 +16698,72 @@ class DuetUpload {
      * by default this is off, setting this to true will limit the users choices to what has been explicitly set
      */
     this.limitSelection = false;
+    /**
+     * Own Properties
+     */
+    this.buttonId = createID("DuetButton");
+    this.labelId = createID("DuetLabel");
+    this.uploadId = createID("DuetUpload");
+    this.filesInProgress = new Map();
+    this.fileMaxReached = false;
+    this.bytesMaxReached = false;
+    this.internalStatusMessageLabel = undefined;
+    /**
+     * Properties
+     */
+    this.DefaultGroups = {
+      inprogress: "inprogress",
+      success: "success",
+      failure: "failure",
+    };
+    /**
+     * Array of group names that you want the editable table to use to display files
+     * @required
+     * @example [{ id: "success", label: {fi: "Onnistunut", en: "Success", sv: "Alt klart", }}]
+     */
+    this.groups = [
+      {
+        id: this.DefaultGroups.inprogress,
+        label: {
+          fi: "Kesken olevat tiedostot",
+          sv: "Filer inprogress",
+          en: "Files inprogress",
+        },
+      },
+      {
+        id: this.DefaultGroups.success,
+        label: {
+          fi: "Valmiit tiedostot",
+          sv: "Files success",
+          en: "Files success",
+        },
+      },
+      {
+        id: this.DefaultGroups.failure,
+        label: {
+          fi: "Tiedostot, joissa on virheitä",
+          sv: "Filer med fel",
+          en: "Files with errors",
+        },
+      },
+    ];
+    this.kick = debounce(() => {
+      this.tick = Date.now();
+    }, 30); // will trigger re-render
     /**
      * Private functions
      */
     this.listenForActionEvents = () => {
-      this.element.addEventListener("duetEditableItemAction", (e) => {
+      this.element.addEventListener("duetActionEvent", (e) => {
         const detail = e.detail;
-        const { action, keyName, originalEvent } = detail;
+        const { action, id, originalEvent } = detail;
+        console.log(e);
         switch (action) {
           case "delete":
-            this.onDelete(keyName, originalEvent);
+            this.onDelete(id, originalEvent);
             break;
           case "cancel":
-            this.onCancel(keyName, originalEvent);
+            this.onCancel(id, originalEvent);
             break;
           // code block
         }
@@ -16732,24 +16820,6 @@ class DuetUpload {
         return "none";
       }
     };
-    this.convertToDuetEditableTableItems = () => {
-      // we're always recreating the map - in order to force an update down stream.
-      const itemData = new Map();
-      //walk the files Map and convert to DuetEditableTableItemData
-      this.files.forEach((data, key, _originalMap) => {
-        const group = this.getGroupFromItemData(data);
-        const item = this.getItemHTMLFromItemData(data, group);
-        itemData.set(key, {
-          uid: data.uid,
-          item,
-          group,
-        });
-      });
-      return itemData;
-    };
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 30); // will trigger re-render
     this.genHashName = () => Date.now().toString(36) + Math.random();
     this.updateValueInMap = (item, key, value, kick = true) => {
       const fileItem = this.files.get(item);
@@ -16810,7 +16880,6 @@ class DuetUpload {
       this.nativeInput.value = "";
     };
     this.startUpload = async (ev, metaData = undefined) => {
-      await this.setFocus();
       this.metaData = metaData;
       this.nativeInput.click();
       this.onUpload(ev, metaData);
@@ -16873,9 +16942,18 @@ class DuetUpload {
         fileMaxReached: isTotalFileAmountAboveMax,
       };
     };
+    this.getItemFromUID = (uid) => {
+      for (const [key, value] of this.files.entries()) {
+        if (value.uid === uid) {
+          return { value, key };
+        }
+      }
+      return null;
+    };
     this.onDelete = (key, ev) => {
-      const deletedItem = this.files.get(key);
-      this.files.delete(key);
+      const retrievedKey = this.getItemFromUID(key).key;
+      const deletedItem = this.files.get(retrievedKey);
+      this.files.delete(retrievedKey);
       this.validateTotals();
       this.kick();
       this.duetDelete.emit({
@@ -16889,8 +16967,9 @@ class DuetUpload {
       this.resetFormFields();
     };
     this.onCancel = (key, ev) => {
-      const cancelledItem = this.files.get(key);
-      this.files.delete(key);
+      const retrievedKey = this.getItemFromUID(key).key;
+      const cancelledItem = this.files.get(retrievedKey);
+      this.files.delete(retrievedKey);
       if (!this.external) {
         const { xhr } = cancelledItem;
         xhr.abort();
@@ -16940,6 +17019,79 @@ class DuetUpload {
         data: { files: this.files },
       });
     };
+    /**
+     * @description This functions return sorted map items byg condition which are:
+     */
+    this.filterMap = () => {
+      const all = [...this.files.values()];
+      const inprogress = [];
+      const failure = [];
+      const success = [];
+      all.forEach(data => {
+        const group = this.getGroupFromItemData(data);
+        const item = this.getItemHTMLFromItemData(data, group);
+        if (group === this.DefaultGroups.success) {
+          success.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.inprogress) {
+          inprogress.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (group === this.DefaultGroups.failure) {
+          failure.push({
+            uid: data.uid,
+            item,
+            group,
+          });
+        }
+        else if (data.group) {
+          inprogress.push({
+            uid: data.uid,
+            item,
+            group: data.group,
+          });
+        }
+      });
+      return {
+        inprogress,
+        failure,
+        success,
+      };
+    };
+    this.getColumns = (group) => {
+      return [
+        {
+          sort_order: 1,
+          direction: 1,
+          index: 0,
+          key: group.id,
+          label: group.label,
+        },
+      ];
+    };
+    this.getActions = (id) => {
+      return this.actions.filter(item => item.map.includes(id));
+    };
+    this.renderEditableTableGroups = () => {
+      const filteredItems = this.filterMap();
+      const EditableTables = this.groups.map(group => {
+        const currentItems = filteredItems[group.id];
+        if (!(currentItems === null || currentItems === void 0 ? void 0 : currentItems.length)) {
+          return;
+        }
+        return (hAsync("duet-table", { variation: "plain", breakpoint: "none", role: "log", margin: this.hideGroups ? "none" : "auto" }, hAsync("table", { class: "duet-upload-editable-table" }, hAsync("thead", { class: "duet-upload-editable-table-header" }, hAsync("tr", null, hAsync("th", { class: {
+            "duet-upload-editable-table-header-hidden": this.hideGroups,
+          } }, !this.hideGroups ? (getLocaleString(group.label)) : (hAsync("duet-visually-hidden", null, getLocaleString(group.label)))))), hAsync("tbody", null, hAsync("tr", null, hAsync("td", { class: "duet-upload-editable-table-data" }, hAsync("duet-editable-table", { breakpoint: "none", variation: "plain", groupId: group.id, columns: this.getColumns(group), actions: this.getActions(group.id), margin: "none", rows: currentItems })))))));
+      });
+      return EditableTables;
+    };
   }
   watchValidHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
@@ -16963,6 +17115,68 @@ class DuetUpload {
     // listen to the events from the component
     this.verifyValidity();
   }
+  /**
+   * Sets focus on the specified `duet-input`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    if (this.nativeInput) {
+      this.nativeInput.focus(options);
+    }
+    return;
+  }
+  /**
+   * Method for invoking the upload sequence
+   */
+  async upload(metaData = undefined) {
+    await this.setFocus();
+    this.metaData = metaData;
+    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
+   */
+  async getFiles() {
+    if (!this.files || this.files.size === 0) {
+      return false;
+    }
+    return this.getFilesAsArray();
+  }
+  /**
+   * Convenience method for updating the value of a key:value inside an item in the files attribute
+   */
+  async updateValue(item, key, value) {
+    this.updateValueInMap(item, key, value);
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.uploadId;
+    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 (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("duet-fieldset", { label: this.label, caption: caption }, hAsync("slot", { name: "header" }), !this.files.size && (hAsync("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 && hAsync("slot", { name: "fileheader" }), !!this.files.size && (hAsync("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 && this.renderEditableTableGroups(), !!this.files.size && hAsync("slot", { name: "filefooter" }), hAsync("duet-spacer", { size: "large" }), !this.hideButton && (hAsync("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)), hAsync("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (hAsync("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"))), hAsync("duet-spacer", { size: "medium" }), hAsync("duet-visually-hidden", null, hAsync("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,
+      }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
+  }
   /**
    * XHR request utilities
    */
@@ -17084,68 +17298,6 @@ class DuetUpload {
       component: "duet-upload",
     });
   }
-  /**
-   * Sets focus on the specified `duet-input`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeInput) {
-      this.nativeInput.focus(options);
-    }
-    return;
-  }
-  /**
-   * Method for invoking the upload sequence
-   */
-  async upload(metaData = undefined) {
-    await this.setFocus();
-    this.metaData = metaData;
-    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
-   */
-  async getFiles() {
-    if (!this.files || this.files.size === 0) {
-      return false;
-    }
-    return this.getFilesAsArray();
-  }
-  /**
-   * Convenience method for updating the value of a key:value inside an item in the files attribute
-   */
-  async updateValue(item, key, value) {
-    this.updateValueInMap(item, key, value);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const identifier = this.identifier || this.uploadId;
-    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 (hAsync(Host, { class: { "duet-m-0": this.margin === "none" } }, hAsync("duet-fieldset", { label: this.label, caption: caption }, hAsync("slot", { name: "header" }), !this.files.size && (hAsync("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 && hAsync("slot", { name: "fileheader" }), !!this.files.size && (hAsync("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 && (hAsync("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 && hAsync("slot", { name: "filefooter" }), hAsync("duet-spacer", { size: "large" }), !this.hideButton && (hAsync("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)), hAsync("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (hAsync("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"))), hAsync("duet-spacer", { size: "medium" }), hAsync("duet-visually-hidden", null, hAsync("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,
-      }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
-  }
   get element() { return getElement(this); }
   static get watchers() { return {
     "valid": ["watchValidHandler"]
@@ -17161,7 +17313,7 @@ class DuetUpload {
       "accessibleOwns": [1, "accessible-owns"],
       "external": [4],
       "hideButton": [4, "hide-upload-button"],
-      "actions": [1],
+      "actions": [16],
       "uri": [1],
       "showLinks": [4, "show-links"],
       "caption": [1],
@@ -17175,7 +17327,6 @@ class DuetUpload {
       "identifier": [1],
       "margin": [1],
       "required": [4],
-      "groups": [1],
       "alignment": [1],
       "hideGroups": [4, "hide-table-labels"],
       "files": [1040],
@@ -17196,6 +17347,7 @@ class DuetUpload {
       "multiple": [4],
       "limitSelection": [4, "limit-selection"],
       "value": [1025],
+      "groups": [16],
       "tick": [32],
       "setFocus": [64],
       "upload": [64],
@@ -17340,6 +17492,7 @@ class DuetVisuallyHidden {
 }
 
 registerComponents([
+  DuetActionButton,
   DuetAlert,
   DuetBadge,
   DuetBreadcrumb,
@@ -17355,8 +17508,6 @@ registerComponents([
   DuetDatePicker,
   DuetDivider,
   DuetEditableTable,
-  DuetEditableTableButton,
-  DuetEditableTableItem,
   DuetEmptyState,
   DuetFieldset,
   DuetFooter,