@duetds/components 4.35.4 → 5.0.0

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

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 const NAMESPACE = 'duet';
-const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.15"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.2.18"};
 
 let scopeId;
 let contentRef;
@@ -1165,6 +1165,9 @@ const postUpdateComponent = (hostRef) => {
     const endPostUpdate = createTime('postUpdate', tagName);
     const instance = elm;
     const ancestorComponent = hostRef.$ancestorComponent$;
+    {
+        safeCall(instance, 'componentDidRender');
+    }
     if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
         hostRef.$flags$ |= 64 /* hasLoadedComponent */;
         {
@@ -1659,6 +1662,60 @@ const appGlobalScript = () => {
 
 const globalScripts = appGlobalScript;
 
+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]";
 }
@@ -1796,165 +1853,587 @@ const inheritGlobalTheme = (component) => {
   }
 };
 
-const duetAlertCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}:host(:focus){outline:0}:host(.user-is-tabbing: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){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-alert-is-dismissed){max-height:0;visibility:hidden;opacity:0;transform:scale(0.98)}:host(.duet-alert-is-dismissed) .duet-alert{margin:0 !important}.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{padding:0 !important}.duet-alert.duet-m-0{margin:0 !important}.duet-alert.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;background:#f3f4f5;border-color:#171c3a}.duet-alert.warning{background:#fffbf4;border-color:#f7b228}.duet-alert.warning.duet-theme-turva{background:#fffaf3;border-color:#faa40f}.duet-alert.danger{background:#fdf4f7;border-color:#de2362}.duet-alert.danger.duet-theme-turva{background:#fdf4f3;border-color:#e02a0d}.duet-alert.success{background:#f2f9f7;border-color:#00875a}.duet-alert.success.duet-theme-turva{background:#f3f9f6;border-color:#08874e}.duet-alert-dismiss{position:absolute;top:2px;right:2px}.duet-alert-container{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}.duet-alert-container span{width:100%}.duet-alert-has-icon .duet-alert-container{margin-top:2px !important}.duet-alert-icon{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}.duet-alert-icon duet-icon{width:20px;height:20px}.duet-alert-is-dismissible{padding:16px 48px 16px 16px;text-align:left}.duet-alert-is-dismissible .duet-alert-container{text-align:left}";
+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)'";
 
-let DuetAlert$1 = class extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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);
-    }
+const tokens$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colorWarning: colorWarning,
+  colorGrayDarker: colorGrayDarker,
+  colorGrayLighter: colorGrayLighter,
+  colorCategoryHome: colorCategoryHome,
+  colorPrimary: colorPrimary,
+  colorCategoryVehicle: colorCategoryVehicle,
+  colorSuccess: colorSuccess,
+  colorCategoryFamily: colorCategoryFamily,
+  colorPrimaryLightest: colorPrimaryLightest,
+  colorPrimaryLighter: colorPrimaryLighter,
+  colorBrandBlue: colorBrandBlue,
+  colorPrimaryDark: colorPrimaryDark,
+  colorGrayLightest: colorGrayLightest,
+  colorCategoryFinance: colorCategoryFinance,
+  colorGrayDark: colorGrayDark,
+  colorGrayLight: colorGrayLight,
+  colorSecondary: colorSecondary,
+  colorCategoryPet: colorCategoryPet,
+  colorPrimaryLight: colorPrimaryLight,
+  colorCategoryTravel: colorCategoryTravel,
+  colorGray: colorGray,
+  colorDanger: colorDanger,
+  colorGrayDarkerTurva: colorGrayDarkerTurva,
+  colorGrayLighterTurva: colorGrayLighterTurva,
+  colorCategoryHomeTurva: colorCategoryHomeTurva,
+  colorPrimaryTurva: colorPrimaryTurva,
+  colorCategoryVehicleTurva: colorCategoryVehicleTurva,
+  colorSuccessTurva: colorSuccessTurva,
+  colorPrimaryLightestTurva: colorPrimaryLightestTurva,
+  colorCategoryFamilyTurva: colorCategoryFamilyTurva,
+  colorCategoryUnionTurva: colorCategoryUnionTurva,
+  colorPrimaryLighterTurva: colorPrimaryLighterTurva,
+  colorPrimaryDarkTurva: colorPrimaryDarkTurva,
+  colorGrayLightestTurva: colorGrayLightestTurva,
+  colorGrayDarkTurva: colorGrayDarkTurva,
+  colorGrayLightTurva: colorGrayLightTurva,
+  colorBrandGrayTurva: colorBrandGrayTurva,
+  colorSecondaryTurva: colorSecondaryTurva,
+  colorPrimaryLightTurva: colorPrimaryLightTurva,
+  colorCategoryTravelTurva: colorCategoryTravelTurva,
+  colorGrayTurva: colorGrayTurva,
+  colorDangerTurva: colorDangerTurva,
+  colorWarningTurva: colorWarningTurva,
+  colorData07: colorData07,
+  colorData08: colorData08,
+  colorData09: colorData09,
+  colorData10: colorData10,
+  colorData11: colorData11,
+  colorData01: colorData01,
+  colorData12: colorData12,
+  colorData02: colorData02,
+  colorData13: colorData13,
+  colorData03: colorData03,
+  colorData14: colorData14,
+  colorData04: colorData04,
+  colorData15: colorData15,
+  colorData05: colorData05,
+  colorData06: colorData06,
+  fontWeightExtraBold: fontWeightExtraBold,
+  letterSpacingHeading: letterSpacingHeading,
+  fontFamilyHeadingTurva: fontFamilyHeadingTurva,
+  fontFamilyTextTurva: fontFamilyTextTurva,
+  fontFamilyHeading: fontFamilyHeading,
+  fontFamilyText: fontFamilyText,
+  fontWeightBold: fontWeightBold,
+  fontWeightNormal: fontWeightNormal,
+  fontWeightSemiBold: fontWeightSemiBold,
+  fontSizeXxxxLarge: fontSizeXxxxLarge,
+  fontSizeXxxLarge: fontSizeXxxLarge,
+  fontSizeXxLarge: fontSizeXxLarge,
+  fontSizeXLarge: fontSizeXLarge,
+  fontSizeLarge: fontSizeLarge,
+  fontSizeMedium: fontSizeMedium,
+  fontSizeSmall: fontSizeSmall,
+  fontSizeXSmall: fontSizeXSmall,
+  radiusSharp: radiusSharp,
+  radiusDefault: radiusDefault,
+  radiusCircle: radiusCircle,
+  radiusPill: radiusPill,
+  shadowTooltipTurva: shadowTooltipTurva,
+  shadowDefault: shadowDefault,
+  shadowTooltip: shadowTooltip,
+  shadowCardTurva: shadowCardTurva,
+  shadowModal: shadowModal,
+  shadowCard: shadowCard,
+  shadowHoverTurva: shadowHoverTurva,
+  shadowHover: shadowHover,
+  shadowDefaultTurva: shadowDefaultTurva,
+  spaceXxSmall: spaceXxSmall,
+  spaceLarge: spaceLarge,
+  spaceXSmall: spaceXSmall,
+  spaceXxxSmall: spaceXxxSmall,
+  spaceSmall: spaceSmall,
+  spaceMedium: spaceMedium,
+  spaceXxLarge: spaceXxLarge,
+  spaceXxxxLarge: spaceXxxxLarge,
+  spaceXxxxxLarge: spaceXxxxxLarge,
+  spaceXxxLarge: spaceXxxLarge,
+  spaceXLarge: spaceXLarge,
+  sizeIconXxLarge: sizeIconXxLarge,
+  sizeFormBorder: sizeFormBorder,
+  sizeStepMedium: sizeStepMedium,
+  sizeButtonMinWidth: sizeButtonMinWidth,
+  sizeHeader: sizeHeader,
+  sizeIconXxxLarge: sizeIconXxxLarge,
+  sizeIconXLarge: sizeIconXLarge,
+  sizeIconXxSmall: sizeIconXxSmall,
+  sizeStepSmall: sizeStepSmall,
+  sizeNavigation: sizeNavigation,
+  sizeIconLarge: sizeIconLarge,
+  sizeLayoutMaxWidth: sizeLayoutMaxWidth,
+  sizeTappableSquare: sizeTappableSquare,
+  sizeIconXSmall: sizeIconXSmall,
+  sizeIconXxxSmall: sizeIconXxxSmall,
+  sizeButtonBorder: sizeButtonBorder,
+  sizeButtonTinyBorder: sizeButtonTinyBorder,
+  sizeIconMedium: sizeIconMedium,
+  sizeIconSmall: sizeIconSmall,
+  opacity85: opacity85,
+  opacity75: opacity75,
+  opacity50: opacity50,
+  opacity30: opacity30,
+  zIndexDropdown: zIndexDropdown,
+  zIndexSpinner: zIndexSpinner,
+  zIndexDefault: zIndexDefault,
+  zIndexToast: zIndexToast,
+  zIndexPopup: zIndexPopup,
+  zIndexModal: zIndexModal,
+  zIndexSticky: zIndexSticky,
+  zIndexMasked: zIndexMasked,
+  zIndexDeep: zIndexDeep,
+  zIndexOverlay: zIndexOverlay,
+  zIndexMask: zIndexMask,
+  zIndexHeader: zIndexHeader,
+  lineHeightMedium: lineHeightMedium,
+  lineHeightSmall: lineHeightSmall,
+  lineHeightXSmall: lineHeightXSmall,
+  transitionQuickly: transitionQuickly,
+  transitionSlowly: transitionSlowly,
+  mediaQueryXxSmall: mediaQueryXxSmall,
+  mediaQueryXSmall: mediaQueryXSmall,
+  mediaQuerySmall: mediaQuerySmall,
+  mediaQueryMedium: mediaQueryMedium,
+  mediaQueryLarge: mediaQueryLarge,
+  mediaQueryXLarge: mediaQueryXLarge,
+  mediaQueryXxLarge: mediaQueryXxLarge,
+  mediaQueryXxxLarge: mediaQueryXxxLarge
+});
+
+const allowedThemes = ["turva"];
+function isDashCase(str) {
+  const dash = str.includes("-");
+  const barredString = str.includes(" ") || str.includes("_");
+  const barredStartingString = str.charAt(0) === "-";
+  return dash && !barredString && !barredStartingString;
+}
+function capitalize(str = "") {
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+}
+function lowerCaseFirst(str = "") {
+  return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;
+}
+function camelize(str = "") {
+  const arr = str.split("-");
+  //loop through each element of the array and capitalize the first letter.'
+  arr.forEach((string, index) => {
+    arr[index] = capitalize(string);
+  });
+  return arr.join("");
+}
+function getTheme(theme = "") {
+  if (allowedThemes.includes(theme.toLowerCase())) {
+    return theme.toLowerCase();
   }
-  /**
-   * 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 (h$1(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, h$1("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",
-      } }, h$1("div", { class: "duet-alert-container" }, this.icon && (h$1("div", { class: "duet-alert-icon" }, h$1("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), h$1("span", null, h$1("slot", null))), this.dismissible && (h$1("div", { class: "duet-alert-dismiss" }, h$1("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 }))))));
+  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)}`;
   }
-  static get style() { return duetAlertCss; }
-};
+  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 duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.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{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{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{background:#fef3df}.duet-badge.warning.duet-theme-turva{background:#fef1db}.duet-badge.danger{background:#fce9ef}.duet-badge.danger.duet-theme-turva{background:#fceae7}.duet-badge.success{background:#e6f3ef}.duet-badge.success.duet-theme-turva{background:#e6f3ed}";
+const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}button.duet-action-button{white-space:nowrap}button.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{color:#171c3a;background:#f5f5f7}button.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){button.duet-action-button{width:32px;height:32px}}button.duet-action-button:not(:disabled):hover{background:#e9ecee !important}.duet-theme-turva button.duet-action-button:not(:disabled):hover{background:#e9e9eb !important}button.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva button.duet-action-button:focus{box-shadow:0 0 0 2px #171c3a !important}button.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-theme-turva button.duet-action-button:active:focus{background:#ddddde !important}button.duet-action-button:disabled{color:#909599;cursor:default;background:#f5f8fa;opacity:0.75}.duet-theme-turva button.duet-action-button:disabled{color:#747475;background:#f5f5f7}";
 
-let DuetBadge$1 = class extends H {
+let DuetActionButton$1 = class extends H {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.duetActionEvent = createEvent$2(this, "duetActionEvent", 6);
+    this.numbersStore = "";
     /**
-     * Theme of the badge.
+     * Theme of the pagination.
      */
     this.theme = "";
     /**
-     * Style variation of the alert.
+     * Name of the icon to display
      */
-    this.variation = "default";
+    this.iconName = "action-arrow-left-small";
     /**
-     * Controls the margin of the component.
+     * Color of the icon to display
      */
-    this.margin = "auto";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one of the class.
-   */
-  render() {
-    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("div", { class: {
-        "duet-badge": true,
-        [this.variation]: true,
-        "duet-theme-turva": this.theme === "turva",
-      } }, h$1("slot", null))));
+    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,
+      });
+    });
   }
-  static get style() { return duetBadgeCss; }
+  //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 (h$1(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h$1("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 }, h$1("duet-icon", { part: "icon", name: this.iconName, color: this.iconColor, margin: "none", size: this.iconSize }), h$1("duet-visually-hidden", null, h$1("slot", null)))));
+  }
+  get element() { return this; }
+  static get style() { return duetActionButtonCss; }
 };
 
-const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
+const duetAlertCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;max-height:999px;border-radius:4px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}:host(:focus){outline:0}:host(.user-is-tabbing: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){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-alert-is-dismissed){max-height:0;visibility:hidden;opacity:0;transform:scale(0.98)}:host(.duet-alert-is-dismissed) .duet-alert{margin:0 !important}.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{padding:0 !important}.duet-alert.duet-m-0{margin:0 !important}.duet-alert.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;background:#f3f4f5;border-color:#171c3a}.duet-alert.warning{background:#fffbf4;border-color:#f7b228}.duet-alert.warning.duet-theme-turva{background:#fffaf3;border-color:#faa40f}.duet-alert.danger{background:#fdf4f7;border-color:#de2362}.duet-alert.danger.duet-theme-turva{background:#fdf4f3;border-color:#e02a0d}.duet-alert.success{background:#f2f9f7;border-color:#00875a}.duet-alert.success.duet-theme-turva{background:#f3f9f6;border-color:#08874e}.duet-alert-dismiss{position:absolute;top:2px;right:2px}.duet-alert-container{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 auto !important}.duet-alert-container span{width:100%}.duet-alert-has-icon .duet-alert-container{margin-top:2px !important}.duet-alert-icon{display:inline-block;align-self:center;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}.duet-alert-icon duet-icon{width:20px;height:20px}.duet-alert-is-dismissible{padding:16px 48px 16px 16px;text-align:left}.duet-alert-is-dismissible .duet-alert-container{text-align:left}";
 
-let DuetBreadcrumb$1 = class extends H {
+let DuetAlert$1 = class extends H {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.duetDismiss = createEvent$2(this, "duetDismiss", 7);
     /**
-     * Theme
+     * Theme of the card.
      */
     this.theme = "";
     /**
-     * Href
+     * State() variables
+     * Inlined decorator, alphabetical order.
      */
-    this.href = "";
+    this.isDismissed = false;
     /**
-     * Icon
+     * 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.
@@ -1962,451 +2441,179 @@ let DuetBreadcrumb$1 = class extends H {
   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() {
-    return (h$1(Host, null, h$1("a", { class: {
-        "duet-breadcrumb": true,
+    const closeColor = this.theme === "turva" ? "secondary-turva" : "secondary";
+    const role = this.variation === "danger" || this.variation === "warning" ? "alert" : "status";
+    return (h$1(Host, { tabindex: "0", class: { "duet-theme-turva": this.theme === "turva", "duet-alert-is-dismissed": this.isDismissed }, role: this.announcements ? role : undefined }, h$1("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",
-      }, href: this.href, "aria-label": this.accessibleLabel }, this.icon && h$1("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && h$1("slot", null))));
+      } }, h$1("div", { class: "duet-alert-container" }, this.icon && (h$1("div", { class: "duet-alert-icon" }, h$1("duet-icon", { size: "auto", name: this.icon, color: "currentColor" }))), h$1("span", null, h$1("slot", null))), this.dismissible && (h$1("div", { class: "duet-alert-dismiss" }, h$1("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 duetBreadcrumbCss; }
+  static get style() { return duetAlertCss; }
 };
 
-var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
-
-const duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block}.duet-breadcrumbs{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs ol{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 16px;color:#00294d;list-style:none;background:#f3f9fc;border-bottom:1px solid #e1e3e6}@media (min-width: 62em){.duet-breadcrumbs ol{padding:10px 36px}}.duet-breadcrumbs.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs.duet-theme-turva ol{color:#171c3a;background:#fcf3f4}.duet-breadcrumbs .duet-breadrumbs-arrow{display:inherit;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}.duet-breadcrumbs .hide{display:none}";
+const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.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{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{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{background:#fef3df}.duet-badge.warning.duet-theme-turva{background:#fef1db}.duet-badge.danger{background:#fce9ef}.duet-badge.danger.duet-theme-turva{background:#fceae7}.duet-badge.success{background:#e6f3ef}.duet-badge.success.duet-theme-turva{background:#e6f3ed}";
 
-let DuetBreadcrumbs$1 = class extends H {
+let DuetBadge$1 = class extends H {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.observers = [];
-    this.breadcrumbsAriaLabel = getLocaleString({
-      fi: "Murupolku",
-      sv: "Ströbröd",
-      en: "Breadcrumbs",
-    });
     /**
-     * Theme
+     * 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);
-    this.children = Array.from(this.element.children);
   }
-  connectedCallback() {
-    Array.from(this.element.children).forEach(child => {
-      const observer = new MutationObserver(() => (this.children = Array.from(this.element.children)));
-      observer.observe(child, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        characterData: true,
-      });
-      this.observers = [...this.observers, observer];
-    });
+  /**
+   * render() function
+   * Always the last one of the class.
+   */
+  render() {
+    return (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("div", { class: {
+        "duet-badge": true,
+        [this.variation]: true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h$1("slot", null))));
   }
-  disconnectedCallback() {
-    this.observers.forEach(observer => observer.disconnect());
-    this.observers = [];
+  static get style() { return duetBadgeCss; }
+};
+
+const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;color:#00294d;text-decoration:none}.duet-breadcrumb:hover{color:#004d80}.duet-breadcrumb.duet-theme-turva{color:#171c3a}.duet-breadcrumb.duet-theme-turva:hover{color:#940925}.duet-breadcrumb:focus{outline:0}.duet-breadcrumb:active{opacity:0.75}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
+
+let DuetBreadcrumb$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * Theme
+     */
+    this.theme = "";
+    /**
+     * Href
+     */
+    this.href = "";
+    /**
+     * Icon
+     */
+    this.icon = "";
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
   }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (h$1(Host, null, h$1("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
-        "duet-breadcrumbs": true,
+    return (h$1(Host, null, h$1("a", { class: {
+        "duet-breadcrumb": true,
         "duet-theme-turva": this.theme === "turva",
-      } }, h$1("ol", null, this.children.map((child, index) => (h$1(Fragment, null, index > 0 && (h$1("li", { "aria-hidden": "true" }, h$1("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" }))), h$1("li", { innerHTML: child.outerHTML }), h$1("div", { class: "hide" }, h$1("slot", null)))))))));
+      }, href: this.href, "aria-label": this.accessibleLabel }, this.icon && h$1("duet-icon", { size: "x-small", name: this.icon, margin: "none", color: "currentColor" }), !this.icon && h$1("slot", null))));
   }
-  get element() { return this; }
-  static get style() { return duetBreadcrumbsCss; }
+  static get style() { return duetBreadcrumbCss; }
 };
 
-const DuetStringsExternalDefaults = {
-  fi: "Avautuu uuteen ikkunaan",
-  sv: "Öppnas i nytt fönster",
-  en: "Opens in a new window",
-};
+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 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 tokens$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colorWarning: colorWarning,
-  colorGrayDarker: colorGrayDarker,
-  colorGrayLighter: colorGrayLighter,
-  colorCategoryHome: colorCategoryHome,
-  colorPrimary: colorPrimary,
-  colorCategoryVehicle: colorCategoryVehicle,
-  colorSuccess: colorSuccess,
-  colorCategoryFamily: colorCategoryFamily,
-  colorPrimaryLightest: colorPrimaryLightest,
-  colorPrimaryLighter: colorPrimaryLighter,
-  colorBrandBlue: colorBrandBlue,
-  colorPrimaryDark: colorPrimaryDark,
-  colorGrayLightest: colorGrayLightest,
-  colorCategoryFinance: colorCategoryFinance,
-  colorGrayDark: colorGrayDark,
-  colorGrayLight: colorGrayLight,
-  colorSecondary: colorSecondary,
-  colorCategoryPet: colorCategoryPet,
-  colorPrimaryLight: colorPrimaryLight,
-  colorCategoryTravel: colorCategoryTravel,
-  colorGray: colorGray,
-  colorDanger: colorDanger,
-  colorGrayDarkerTurva: colorGrayDarkerTurva,
-  colorGrayLighterTurva: colorGrayLighterTurva,
-  colorCategoryHomeTurva: colorCategoryHomeTurva,
-  colorPrimaryTurva: colorPrimaryTurva,
-  colorCategoryVehicleTurva: colorCategoryVehicleTurva,
-  colorSuccessTurva: colorSuccessTurva,
-  colorPrimaryLightestTurva: colorPrimaryLightestTurva,
-  colorCategoryFamilyTurva: colorCategoryFamilyTurva,
-  colorCategoryUnionTurva: colorCategoryUnionTurva,
-  colorPrimaryLighterTurva: colorPrimaryLighterTurva,
-  colorPrimaryDarkTurva: colorPrimaryDarkTurva,
-  colorGrayLightestTurva: colorGrayLightestTurva,
-  colorGrayDarkTurva: colorGrayDarkTurva,
-  colorGrayLightTurva: colorGrayLightTurva,
-  colorBrandGrayTurva: colorBrandGrayTurva,
-  colorSecondaryTurva: colorSecondaryTurva,
-  colorPrimaryLightTurva: colorPrimaryLightTurva,
-  colorCategoryTravelTurva: colorCategoryTravelTurva,
-  colorGrayTurva: colorGrayTurva,
-  colorDangerTurva: colorDangerTurva,
-  colorWarningTurva: colorWarningTurva,
-  colorData07: colorData07,
-  colorData08: colorData08,
-  colorData09: colorData09,
-  colorData10: colorData10,
-  colorData11: colorData11,
-  colorData01: colorData01,
-  colorData12: colorData12,
-  colorData02: colorData02,
-  colorData13: colorData13,
-  colorData03: colorData03,
-  colorData14: colorData14,
-  colorData04: colorData04,
-  colorData15: colorData15,
-  colorData05: colorData05,
-  colorData06: colorData06,
-  fontWeightExtraBold: fontWeightExtraBold,
-  letterSpacingHeading: letterSpacingHeading,
-  fontFamilyHeadingTurva: fontFamilyHeadingTurva,
-  fontFamilyTextTurva: fontFamilyTextTurva,
-  fontFamilyHeading: fontFamilyHeading,
-  fontFamilyText: fontFamilyText,
-  fontWeightBold: fontWeightBold,
-  fontWeightNormal: fontWeightNormal,
-  fontWeightSemiBold: fontWeightSemiBold,
-  fontSizeXxxxLarge: fontSizeXxxxLarge,
-  fontSizeXxxLarge: fontSizeXxxLarge,
-  fontSizeXxLarge: fontSizeXxLarge,
-  fontSizeXLarge: fontSizeXLarge,
-  fontSizeLarge: fontSizeLarge,
-  fontSizeMedium: fontSizeMedium,
-  fontSizeSmall: fontSizeSmall,
-  fontSizeXSmall: fontSizeXSmall,
-  radiusSharp: radiusSharp,
-  radiusDefault: radiusDefault,
-  radiusCircle: radiusCircle,
-  radiusPill: radiusPill,
-  shadowTooltipTurva: shadowTooltipTurva,
-  shadowDefault: shadowDefault,
-  shadowTooltip: shadowTooltip,
-  shadowCardTurva: shadowCardTurva,
-  shadowModal: shadowModal,
-  shadowCard: shadowCard,
-  shadowHoverTurva: shadowHoverTurva,
-  shadowHover: shadowHover,
-  shadowDefaultTurva: shadowDefaultTurva,
-  spaceXxSmall: spaceXxSmall,
-  spaceLarge: spaceLarge,
-  spaceXSmall: spaceXSmall,
-  spaceXxxSmall: spaceXxxSmall,
-  spaceSmall: spaceSmall,
-  spaceMedium: spaceMedium,
-  spaceXxLarge: spaceXxLarge,
-  spaceXxxxLarge: spaceXxxxLarge,
-  spaceXxxxxLarge: spaceXxxxxLarge,
-  spaceXxxLarge: spaceXxxLarge,
-  spaceXLarge: spaceXLarge,
-  sizeIconXxLarge: sizeIconXxLarge,
-  sizeFormBorder: sizeFormBorder,
-  sizeStepMedium: sizeStepMedium,
-  sizeButtonMinWidth: sizeButtonMinWidth,
-  sizeHeader: sizeHeader,
-  sizeIconXxxLarge: sizeIconXxxLarge,
-  sizeIconXLarge: sizeIconXLarge,
-  sizeIconXxSmall: sizeIconXxSmall,
-  sizeStepSmall: sizeStepSmall,
-  sizeNavigation: sizeNavigation,
-  sizeIconLarge: sizeIconLarge,
-  sizeLayoutMaxWidth: sizeLayoutMaxWidth,
-  sizeTappableSquare: sizeTappableSquare,
-  sizeIconXSmall: sizeIconXSmall,
-  sizeIconXxxSmall: sizeIconXxxSmall,
-  sizeButtonBorder: sizeButtonBorder,
-  sizeButtonTinyBorder: sizeButtonTinyBorder,
-  sizeIconMedium: sizeIconMedium,
-  sizeIconSmall: sizeIconSmall,
-  opacity85: opacity85,
-  opacity75: opacity75,
-  opacity50: opacity50,
-  opacity30: opacity30,
-  zIndexDropdown: zIndexDropdown,
-  zIndexSpinner: zIndexSpinner,
-  zIndexDefault: zIndexDefault,
-  zIndexToast: zIndexToast,
-  zIndexPopup: zIndexPopup,
-  zIndexModal: zIndexModal,
-  zIndexSticky: zIndexSticky,
-  zIndexMasked: zIndexMasked,
-  zIndexDeep: zIndexDeep,
-  zIndexOverlay: zIndexOverlay,
-  zIndexMask: zIndexMask,
-  zIndexHeader: zIndexHeader,
-  lineHeightMedium: lineHeightMedium,
-  lineHeightSmall: lineHeightSmall,
-  lineHeightXSmall: lineHeightXSmall,
-  transitionQuickly: transitionQuickly,
-  transitionSlowly: transitionSlowly,
-  mediaQueryXxSmall: mediaQueryXxSmall,
-  mediaQueryXSmall: mediaQueryXSmall,
-  mediaQuerySmall: mediaQuerySmall,
-  mediaQueryMedium: mediaQueryMedium,
-  mediaQueryLarge: mediaQueryLarge,
-  mediaQueryXLarge: mediaQueryXLarge,
-  mediaQueryXxLarge: mediaQueryXxLarge,
-  mediaQueryXxxLarge: mediaQueryXxxLarge
-});
+const duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block}.duet-breadcrumbs{font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs ol{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 16px;color:#00294d;list-style:none;background:#f3f9fc;border-bottom:1px solid #e1e3e6}@media (min-width: 62em){.duet-breadcrumbs ol{padding:10px 36px}}.duet-breadcrumbs.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs.duet-theme-turva ol{color:#171c3a;background:#fcf3f4}.duet-breadcrumbs .duet-breadrumbs-arrow{display:inherit;align-items:center;justify-content:center;width:0.375rem;height:0.375rem}.duet-breadcrumbs .hide{display:none}";
 
-const allowedThemes = ["turva"];
-function isDashCase(str) {
-  const dash = str.includes("-");
-  const barredString = str.includes(" ") || str.includes("_");
-  const barredStartingString = str.charAt(0) === "-";
-  return dash && !barredString && !barredStartingString;
-}
-function capitalize(str = "") {
-  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
-}
-function lowerCaseFirst(str = "") {
-  return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;
-}
-function camelize(str = "") {
-  const arr = str.split("-");
-  //loop through each element of the array and capitalize the first letter.'
-  arr.forEach((string, index) => {
-    arr[index] = capitalize(string);
-  });
-  return arr.join("");
-}
-function getTheme(theme = "") {
-  if (allowedThemes.includes(theme.toLowerCase())) {
-    return theme.toLowerCase();
-  }
-  return "";
-}
-function hasColor(str = "") {
-  return str.indexOf("Color") === 0 || str.indexOf("color") === 0;
-}
-function addColor(str = "") {
-  if (str && !isDashCase(str) && !hasColor(str)) {
-    return `color${capitalize(str)}`;
+let DuetBreadcrumbs$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.observers = [];
+    this.breadcrumbsAriaLabel = getLocaleString({
+      fi: "Murupolku",
+      sv: "Ströbröd",
+      en: "Breadcrumbs",
+    });
+    /**
+     * Theme
+     */
+    this.theme = "";
   }
-  return str;
-}
-function addTheme(str, theme) {
-  const hasTheme = getTheme(theme).length;
-  if (hasTheme && str.indexOf(theme) === -1) {
-    return `${str}${capitalize(theme)}`;
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.children = Array.from(this.element.children);
   }
-  return str;
-}
-function getColorByName(name, theme = "") {
-  if (!name) {
-    return undefined;
+  connectedCallback() {
+    Array.from(this.element.children).forEach(child => {
+      const observer = new MutationObserver(() => (this.children = Array.from(this.element.children)));
+      observer.observe(child, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        characterData: true,
+      });
+      this.observers = [...this.observers, observer];
+    });
   }
-  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];
+  disconnectedCallback() {
+    this.observers.forEach(observer => observer.disconnect());
+    this.observers = [];
   }
-  return resolvedToken;
-}
-function convertToColorName(name = "", theme = "") {
-  let colorResolution = name;
-  const dash = isDashCase(name);
-  if (dash) {
-    colorResolution = camelize(colorResolution);
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    return (h$1(Host, null, h$1("nav", { "aria-label": this.breadcrumbsAriaLabel, class: {
+        "duet-breadcrumbs": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h$1("ol", null, this.children.map((child, index) => (h$1(Fragment, null, index > 0 && (h$1("li", { "aria-hidden": "true" }, h$1("duet-icon", { class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" }))), h$1("li", { innerHTML: child.outerHTML }), h$1("div", { class: "hide" }, h$1("slot", null)))))))));
   }
-  colorResolution = addColor(colorResolution);
-  colorResolution = addTheme(colorResolution, theme);
-  // takes care of the case where colorPrimaryDark ends up with ColorPrimaryDark
-  colorResolution = lowerCaseFirst(colorResolution);
-  return colorResolution;
-}
+  get element() { return this; }
+  static get style() { return duetBreadcrumbsCss; }
+};
+
+const DuetStringsExternalDefaults = {
+  fi: "Avautuu uuteen ikkunaan",
+  sv: "Öppnas i nytt fönster",
+  en: "Opens in a new window",
+};
 
-const duetButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;min-width:8rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#0077b3 !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){padding:9px 19px 10px !important;min-width:5.3333333333rem;font-size:0.875rem}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}.duet-theme-turva .duet-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30 !important}.duet-button .duet-button-contents{position:relative;display:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button:active{opacity:0.75;transition:none}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{color:#c60c30 !important;border-color:#e4e4e6}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.default.duet-button-negative{background-color:white}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:#e4e4e6 !important}.duet-button.default.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.primary{color:white !important;background:#0077b3;border-color:#0077b3}.duet-theme-turva .duet-button.primary{color:white !important;background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.primary:focus{outline:0;box-shadow:0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}.duet-button.secondary{color:#00294d !important;background:transparent;border-color:#00294d}.duet-theme-turva .duet-button.secondary{color:#171c3a !important;border-color:#171c3a}.duet-button.secondary:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.secondary.duet-button-negative{color:#e1e3e6 !important;border-color:white}.duet-theme-turva .duet-button.secondary.duet-button-negative{color:#e4e4e6 !important}.duet-button.secondary.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.negative{color:#00294d !important;background:white;border-color:white}.duet-theme-turva .duet-button.negative{color:#171c3a !important}.duet-button.negative:hover{color:white !important;background:transparent;border-color:white}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:white !important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive-primary{color:white !important;background:#e02a0d;border-color:#e02a0d}.duet-button.destructive-primary:hover{background:#b21c4e;border-color:#b21c4e;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:white !important;background:#b3220a;border-color:#b3220a}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:#c60c30 !important;background:transparent;border-color:transparent}.duet-button.plain.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:#657787 !important;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}.duet-button.plain:hover{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:#940925 !important}.duet-button.plain.duet-button-negative{color:white !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:#e4e4e6 !important}.duet-button.plain.duet-button-negative:hover{color:#0077b3 !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:#c60c30 !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:#657787 !important;background:#e1e3e6 !important;border-color:#e1e3e6 !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-button-is-loading.primary{color:white}.duet-button-is-loading.default{color:#0077b3}.duet-button-is-loading.default.duet-theme-turva{color:#c60c30}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
+const duetButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;width:100%;min-width:8rem;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:#0077b3 !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button.duet-button-text-center{text-align:center !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){padding:9px 19px 10px !important;min-width:5.3333333333rem;font-size:0.875rem}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !important}.duet-theme-turva .duet-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30 !important}.duet-button .duet-button-contents{position:relative;display:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button:active{opacity:0.75;transition:none}.duet-button.default{border-color:#e1e3e6}.duet-theme-turva .duet-button.default{color:#c60c30 !important;border-color:#e4e4e6}.duet-button.default:hover{border-color:#0077b3}.duet-theme-turva .duet-button.default:hover{border-color:#c60c30}.duet-button.default.duet-button-negative{background-color:white}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:#e4e4e6 !important}.duet-button.default.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.primary{color:white !important;background:#0077b3;border-color:#0077b3}.duet-theme-turva .duet-button.primary{color:white !important;background:#c60c30;border-color:#c60c30}.duet-button.primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover{background:#940925;border-color:#940925}.duet-button.primary:focus{outline:0;box-shadow:0 0 0 1px white, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus{box-shadow:0 0 0 1px white, 0 0 0 4px rgba(23, 28, 58, 0.7)}.duet-button.secondary{color:#00294d !important;background:transparent;border-color:#00294d}.duet-theme-turva .duet-button.secondary{color:#171c3a !important;border-color:#171c3a}.duet-button.secondary:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.secondary.duet-button-negative{color:#e1e3e6 !important;border-color:white}.duet-theme-turva .duet-button.secondary.duet-button-negative{color:#e4e4e6 !important}.duet-button.secondary.duet-button-negative:hover{color:#0077b3 !important;border-color:#0077b3}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover{color:#c60c30 !important;border-color:#c60c30}.duet-button.negative{color:#00294d !important;background:white;border-color:white}.duet-theme-turva .duet-button.negative{color:#171c3a !important}.duet-button.negative:hover{color:white !important;background:transparent;border-color:white}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #171c3a, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:white !important;background:#de2362;border-color:#de2362}.duet-theme-turva .duet-button.destructive-primary{color:white !important;background:#e02a0d;border-color:#e02a0d}.duet-button.destructive-primary:hover{background:#b21c4e;border-color:#b21c4e;box-shadow:0 4px 20px rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:#de2362 !important;background:white;border-color:#de2362}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:#e02a0d !important;background:white;border-color:#e02a0d}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:white !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:white !important;background:#b3220a;border-color:#b3220a}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:#c60c30 !important;background:transparent;border-color:transparent}.duet-button.plain.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:#657787 !important;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;background:transparent !important;border-color:#e4e4e6 !important}.duet-button.plain:hover{color:#004d80 !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:#940925 !important}.duet-button.plain.duet-button-negative{color:white !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:#e4e4e6 !important}.duet-button.plain.duet-button-negative:hover{color:#0077b3 !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:#c60c30 !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:#657787 !important;background:#e1e3e6 !important;border-color:#e1e3e6 !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:#747475 !important;background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-button-is-loading.primary{color:white}.duet-button-is-loading.default{color:#0077b3}.duet-button-is-loading.default.duet-theme-turva{color:#c60c30}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
 
 let DuetButton$1 = class extends H {
   constructor() {
@@ -2415,6 +2622,10 @@ let DuetButton$1 = class extends H {
     this.__attachShadow();
     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
      */
@@ -2441,6 +2652,10 @@ let DuetButton$1 = class extends H {
      * Controls the padding of the component.
      */
     this.padding = "auto";
+    /**
+     * Centers the text of a button
+     */
+    this.centerText = false;
     /**
      * Controls the text wrapping.
      */
@@ -2605,6 +2820,7 @@ let DuetButton$1 = class extends H {
         "duet-button": true,
         "duet-button-is-small": this.size === "small",
         "duet-button-icon-only": this.iconOnly,
+        "duet-button-text-center": this.centerText,
         "duet-button-negative": this.negative || this.variation === "negative",
         [this.variation]: true,
         disabled: this.disabled,
@@ -2630,7 +2846,7 @@ let DuetButton$1 = class extends H {
         "duet-theme-turva": this.theme === "turva",
         "duet-button-negative": this.negative || this.variation === "negative",
         [this.variation]: true,
-      } }, this.url ? (h$1("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h$1("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h$1("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined }), commonChildren)), this.loading && h$1("duet-spinner", { color: "currentColor" }))));
+      } }, this.url ? (h$1("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && h$1("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (h$1("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined }), commonChildren)), this.loading && h$1("duet-spinner", { color: "currentColor" }))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -2690,24 +2906,6 @@ let DuetCaption$1 = class extends H {
 
 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 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 isQuestionKey = (e) => e.key === "?";
-const isEnterKey = (e) => e.key === "Enter" || e.keyCode === 13;
-const isKeyboardClick = (e) => isEnterKey(e) || isSpaceKey(e);
-
 const duetCardCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}:host(.duet-card-info){margin-bottom:16px !important}:host(.duet-m-0){margin:0 !important}.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{padding:0 !important}.duet-card.duet-m-0{margin:0 !important}.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{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (min-width: 36em){.duet-card{padding:28px !important}}.duet-card.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";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{padding:20px !important}}@media (min-width: 36em){.duet-card.medium{padding:28px !important}}@media (min-width: 48em){.duet-card.medium{padding:36px !important}}@media (min-width: 36em){.duet-card.large{padding:36px !important}}@media (min-width: 48em){.duet-card.large{padding:48px !important}}@media (min-width: 36em){.duet-card.x-large{padding:48px !important}}@media (min-width: 48em){.duet-card.x-large{padding:72px !important}}.duet-card.duet-card-collapsed{padding-bottom:0 !important}@media (min-width: 36em){.duet-card.duet-card-collapsed{padding-bottom:0 !important}}.duet-card.info{background:rgba(0, 80, 128, 0.04) !important;box-shadow:none}.duet-card.info.duet-theme-turva{background:rgba(23, 28, 58, 0.035) !important}.duet-card.plain{box-shadow:none}.duet-card.plain:not(.duet-card-has-bg){background:transparent !important}.duet-card-heading-grid{display:flex;flex-direction:row}.duet-card-icon{align-self:center}.duet-card-heading-text{flex:1;word-break:break-word}.duet-card-secondary-heading{font-size:1rem;font-weight:600;word-break:break-word}.duet-card-secondary-heading--inline{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{display:none}}.duet-card-secondary-heading--new-line{display:none}@media (max-width: 22.5em){.duet-card-secondary-heading--new-line{display:block}}.duet-card-heading{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{padding:15px 28px 16px !important;margin:-28px -28px 20px}}.duet-card-heading[role=button]{-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{outline:0}:host(.user-is-tabbing) .duet-card-heading[role=button]: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{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-card-collapsed .duet-card-heading{margin-bottom:0 !important;border-bottom:0 !important}.duet-theme-turva .duet-card-heading{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{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}.medium .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.medium .duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){.medium .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}.large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.large .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){.large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}.x-large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.x-large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){.x-large .duet-card-heading{padding:39px 72px 40px !important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0 0 20px !important;margin:0 0 20px}.duet-card-footer{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{background:#f5f5f7}@media (min-width: 36em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){.x-small .duet-card-footer{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){.medium .duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.medium .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){.large .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){.large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){.x-large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){.x-large .duet-card-footer{padding:39px 72px 40px !important;margin:48px -72px -72px}}.none .duet-card-footer{padding:12px 0 !important;margin:20px 0 0}.duet-card-content{width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-caret{position:relative;top:6px;align-self:flex-start;transition:300ms ease}[aria-expanded=false] .duet-card-caret{transform:rotate(-180deg)}.duet-card-image-mask{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{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){.medium .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){.medium .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){.large .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){.large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){.x-large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){.x-large .duet-card-image-mask{width:calc(100% + 144px);margin:-72px 0 36px -72px}}.none .duet-card-image-mask{width:100%;margin:0 0 20px}.duet-card-image{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{transition:box-shadow 300ms ease, background-position 300ms ease}a.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{transform:scale(1.024)}.duet-theme-turva a.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{transition:none;transform:translateY(1px)}";
 
 let DuetCard$1 = class extends H {
@@ -4158,7 +4356,7 @@ let DuetCollapsible$1 = class extends H {
         "duet-collapsible-heading": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-collapsible-normal-weight": this.headingWeight === "normal",
-      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h$1("div", { class: "duet-collapsible-heading-icon" }, h$1("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h$1("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading)), h$1("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" } }, h$1("slot", null))));
+      }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h$1("div", { class: "duet-collapsible-heading-icon" }, h$1("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: actionArrowDownSmall.svg })), h$1("div", { class: "duet-collapsible-heading-content", part: "duet-collapsible-heading-content" }, this.heading)), h$1("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" }, part: "duet-collapsible-content" }, h$1("slot", null))));
   }
   get element() { return this; }
   static get style() { return duetCollapsibleCss; }
@@ -4592,7 +4790,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}";
 
 let DuetDatePicker$1 = class extends H {
   constructor() {
@@ -4988,7 +5186,7 @@ let DuetDatePicker$1 = class extends H {
         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 }, h$1(FocusGuard, { moveFocusTo: this.focusedDayNode }), h$1("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h$1("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h$1("div", { class: "duet-date-dialog-mobile-header" }, h$1("duet-label", { margin: "none" }, this.label), h$1("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h$1("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h$1("duet-visually-hidden", null, text.closeLabel))), h$1("div", { class: "duet-date-dialog-header" }, h$1("div", { class: "duet-date-dialog-dropdowns" }, h$1("duet-visually-hidden", null, h$1("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h$1("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, text.monthLabelsShort[focusedMonth]), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h$1("option", { key: year, selected: year === focusedYear }, year)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, this.focusedDay.getFullYear()), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h$1("div", { class: "duet-date-dialog-buttons" }, h$1("button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h$1("duet-icon", { name: "action-arrow-left-small", color: "currentColor", margin: "none", size: "xx-small" }), h$1("duet-visually-hidden", null, text.prevMonthLabel)), h$1("button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h$1("duet-icon", { name: "action-arrow-right-small", color: "currentColor", margin: "none", size: "xx-small" }), h$1("duet-visually-hidden", null, text.nextMonthLabel)))), h$1(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 })), h$1(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 }, h$1(FocusGuard, { moveFocusTo: this.focusedDayNode }), h$1("div", { class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h$1("duet-visually-hidden", { "aria-live": "polite" }, text.keyboardInstruction), h$1("div", { class: "duet-date-dialog-mobile-header" }, h$1("duet-label", { margin: "none" }, this.label), h$1("button", { class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h$1("duet-icon", { name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h$1("duet-visually-hidden", null, text.closeLabel))), h$1("div", { class: "duet-date-dialog-header" }, h$1("div", { class: "duet-date-dialog-dropdowns" }, h$1("duet-visually-hidden", null, h$1("h2", { id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.monthSelectId }, text.monthSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h$1("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, text.monthLabelsShort[focusedMonth]), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h$1("duet-visually-hidden", null, h$1("label", { htmlFor: this.yearSelectId }, text.yearSelectLabel)), h$1("div", { class: "duet-date-dialog-select" }, h$1("select", { id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h$1("option", { key: year, selected: year === focusedYear }, year)))), h$1("div", { class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h$1("span", null, this.focusedDay.getFullYear()), h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h$1("div", { class: "duet-date-dialog-buttons" }, h$1("duet-action-button", { class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), h$1("duet-action-button", { class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), h$1(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 })), h$1(FocusGuard, { moveFocusTo: this.closeButtonNode }))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -5014,394 +5212,241 @@ let DuetDivider$1 = class extends H {
     /**
      * Controls the margin of the component.
      */
-    this.margin = "auto";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    return (h$1("div", { class: {
-        "duet-m-0": this.margin === "none",
-        "duet-m-s": this.margin === "small",
-        "duet-divider": true,
-        "duet-theme-turva": this.theme === "turva",
-      } }));
-  }
-  get element() { return this; }
-  static get style() { return duetDividerCss; }
-};
-
-const debounce = (func, timeout = 50) => {
-  let timer;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(undefined, args);
-    }, timeout);
-  };
-};
-
-/**
- * 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{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{padding:0 !important;font-size:0;border-bottom:0}";
-
-let DuetEditableTable$1 = class extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.template = undefined;
-    /**
-     * State() variables
-     * @internal
-     */
-    this.tick = Date.now();
-    /**
-     * Map of items that contain list of things.
-     */
-    this.items = new Map();
-    /**
-     * Key used to set vertical alignment of action buttons
-     */
-    this.alignment = "middle";
-    /**
-     * Array of internationalized defaults for the default groups labels.
-     */
-    this.groupsLabelDefaults = {
-      fi: "Kaikki",
-      en: "All items",
-      sv: "Alla objekt",
-    };
-    /**
-     * Array of internationalized defaults for the default action labels.
-     */
-    this.actionLabelDefaults = {
-      fi: "Toiminnot",
-      en: "Actions",
-      sv: "Handlingar",
-    };
-    /**
-     * 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", }}].
-     */
-    this.groups = [
-      { id: "all", label: this.groupsLabelDefaults, actionLabel: this.actionLabelDefaults },
-    ];
-    /**
-     * Array of actions that are mapped via the map variable to the various groups defined in group.
-     * @default undefined
-     * @example [{
-                variation: "default",
-                icon: "action-edit-2",
-                id: "edit",
-                map: ["success"],
-                label: {
-                  fi: " Label",
-                  en: " Label",
-                  sv: " Label",
-                }
-              }]
-     */
-    this.actions = undefined;
-    /**
-     * Shows or hides the table labels.
-     */
-    this.hideGroups = false;
-    /**
-     * Exposes the aria role for optimizing accessibility.
-     */
-    this.accessibleRole = undefined;
-    /**
-     * Theme of the table.
-     */
-    this.theme = "";
-    /**
-     * Private methods.
-     */
-    this.kick = debounce(() => {
-      this.tick = Date.now();
-    }, 100); // will trigger re-render
-    /**
-     * If a user defines a template section within editable table, try to read an use it.
-     */
-    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.filterMap = needle => {
-      if (needle === "all") {
-        return Array.from(this.items);
-      }
-      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 (h$1(Host, { class: {
-        "duet-theme-turva": this.theme === "turva",
-      } }, this.internalGroupArray.map(group => {
-      const currentGroup = this.filterMap(group.id);
-      if (!currentGroup.length) {
-        return;
-      }
-      return (h$1("duet-table", { variation: "plain", breakpoint: "none", role: "", margin: this.hideGroups ? "none" : "auto" }, h$1("table", { class: "duet-editable-table", "aria-role": this.accessibleRole }, h$1("thead", { class: "duet-editable-table-header" }, h$1("tr", null, h$1("th", { class: {
-          "duet-editable-table-header-hidden": this.hideGroups,
-        } }, !this.hideGroups ? (getLocaleString(group.label)) : (h$1("duet-visually-hidden", null, getLocaleString(group.label)))), h$1("th", { class: {
-          "duet-editable-table-header-hidden": this.hideGroups,
-        } }, h$1("duet-visually-hidden", null, group.actionLabel
-        ? getLocaleString(group.actionLabel)
-        : getLocaleString(this.actionLabelDefaults))))), h$1("tbody", null, currentGroup.map(dataAsArray => {
-        const [key, value] = dataAsArray;
-        return (h$1("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 this; }
-  static get style() { return duetEditableTableCss; }
-};
-
-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}";
-
-let DuetEditableTableButton$1 = class extends H {
-  constructor() {
-    super();
-    this.__registerHost();
-    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;
-    };
+    this.margin = "auto";
   }
   /**
-   /**
    * 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",
-    });
-  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    return (h$1("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) }, h$1("duet-icon", { class: "duet-editable-table-actions-items-icon", size: "x-small", name: this.actions.icon, color: this.getColours(), margin: "none" })));
+    return (h$1("div", { class: {
+        "duet-m-0": this.margin === "none",
+        "duet-m-s": this.margin === "small",
+        "duet-divider": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }));
   }
-  get el() { return this; }
-  static get style() { return duetEditableTableButtonCss; }
+  get element() { return this; }
+  static get style() { return duetDividerCss; }
 };
 
 //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 (h("td", { innerHTML: data, class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }));
+    return h("td", { innerHTML: data, class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } });
   }
   else {
-    return (h("td", { class: "duet-editable-table-content", part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
+    return (h("td", { class: classNames, part: `${groupId}content`, style: { verticalAlign: alignment } }, data));
   }
 };
 
-const duetEditableTableItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{display:table-row;height:32px}.duet-editable-table-content,.duet-editable-table-actions{height:32px;padding:12px 0;vertical-align:middle;break-word:break-all;border-bottom:1px solid #e1e3e6}.duet-editable-table-actions-items{display:flex;justify-content:flex-end}.duet-editable-table-actions-items duet-editable-table-button{padding-left:8px}.duet-editable-table .editable-item-small{font-size:0.75rem;font-weight:400}";
+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}";
 
-let DuetEditableTableItem$1 = class extends H {
+let DuetEditableTable$1 = class extends H {
   constructor() {
     super();
     this.__registerHost();
-    this.__attachShadow();
-    this.duetEditableItemAction = createEvent$2(this, "duetEditableItemAction", 7);
-    this.isHovering = false;
+    this.duetTableToggle = createEvent$2(this, "duetTableToggle", 7);
+    this.duetMenuClick = createEvent$2(this, "duetMenuClick", 7);
     /**
-     * Theme of the empty state component.
+     * Duet-table: margin of the component.
      */
-    this.theme = "";
+    this.margin = "auto";
+    /**
+     * Duet-table: Style variation of the table.
+     */
+    this.variation = "striped";
+    /**
+     * Duet-table: Controls whether the table has a sticky header.
+     * Sticky headers are not compatible with breakpoint="none-scrollable".
+     */
+    this.sticky = false;
+    /**
+     * Duet-table: Adjust the distance from top of the viewport (in pixels) when the
+     * table header becomes sticky.
+     */
+    this.stickyDistance = "with-links";
     /**
-     * Actions that can be performed on the element
+     * 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.breakpoint = "small";
+    /**
+     * Define actions for all items in a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
      */
     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
+     * Define columns for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
+     */
+    this.columns = undefined;
+    /**
+     * Define rows for a table
+     * An alternative to inline HTML table.
+     * required for Sortable tables
+     * @default undefined
+     */
+    this.rows = undefined;
+    /**
+     * Controls whether the table is sortable by headers
+     */
+    this.sortable = false;
+    /**
+     * Optional id that get passed to the table and used to setup ::parts
      */
     this.groupId = "";
     /**
-     * Key used to set vertical alignment of action buttons
+     * Theme of the table.
      */
-    this.alignment = "middle";
+    this.theme = "";
     /**
-     * Key used to identify item, when running actions
+     * Exposes the aria role for optimizing accessibility.
      */
-    this.keyName = "";
+    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",
+    };
     /**
-     * Object of data itemsused to render the entire row
+     * Private methods.
      */
-    this.data = undefined;
-  }
-  watchPropHandler(_newValue, _oldValue) {
-    // console.log("The new value of activated is: ", _newValue)
+    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.handleKeyDown = (column, e) => {
+      if (isKeyboardClick(e)) {
+        this.toggleColumn(column, e);
+      }
+    };
   }
   /**
-   /**
    * Component lifecycle events.
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
+  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";
+      }
+      else if (!!sort_order && direction === -1) {
+        return "action-arrow-up-small";
+      }
+      return "action-subtract-small";
+    };
+    return (h$1("span", { class: "duet-table-label", "data-index": index }, h$1("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;
+    });
+  }
+  renderTableHeader() {
+    if (!this.columns) {
+      return;
+    }
+    const sortedColumns = this.getSortedColumns();
+    return (h$1("tr", { class: {
+        "duet-table-action-header": !!this.actions,
+      } }, sortedColumns.map(column => {
+      if (column.display !== false) {
+        return h$1("th", { scope: "col" }, this.createLabel(column));
+      }
+    }), this.actions && (h$1("th", { scope: "col", class: "duet-table-action-header-heading" }, this.actions && h$1("duet-visually-hidden", null, getLocaleString(this.actionColumnLabel))))));
+  }
+  renderActions(rowItem, index) {
+    // escape early
+    if (!this.actions) {
+      return;
+    }
+    // iterate through actions and add them in the sidebar
+    return (h$1("td", { class: "duet-text-right" }, this.actions.map(actionItem => {
+      return (h$1("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 }));
+    })));
+  }
+  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) => (h$1("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 h$1(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 (h$1(Host, { role: "row" }, h$1(TableData, { data: this.data.item, alignment: this.alignment, groupId: this.groupId }), h$1("td", { class: "duet-editable-table-actions", style: { verticalAlign: this.alignment } }, h$1("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 (h$1("duet-editable-table-button", { keyName: this.keyName, group: this.data.group, uid: this.data.uid, actions: result, theme: this.theme }));
-    })))));
+    return (h$1(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",
+      } }, h$1("duet-table", { sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint }, h$1("table", { role: this.accessibleRole }, h$1("caption", null, h$1("slot", { name: "tcaption" })), h$1("thead", null, h$1("tr", null, h$1("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { name: "thead-first" }))), this.renderTableHeader(), h$1("tr", null, h$1("td", { class: "duet-editable-table-actions-menu", colSpan: 99 }, h$1("slot", { name: "thead-last" })))), h$1("tbody", null, this.renderTableBody()), h$1("tfoot", null, h$1("tr", null, h$1("th", { class: "duet-editable-table-footer-menu", colSpan: 99 }, h$1("slot", { name: "tfoot" }))))))));
   }
-  get el() { return this; }
-  static get watchers() { return {
-    "data": ["watchPropHandler"]
-  }; }
-  static get style() { return duetEditableTableItemCss; }
+  get element() { return this; }
+  static get style() { return duetEditableTableCss; }
 };
 
 const duetEmptyStateCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:#00294d;text-align:center;background:#f5f8fa;border-radius:4px}.duet-empty-state.duet-theme-turva{color:#171c3a;background:#f5f5f7}";
@@ -8578,6 +8623,295 @@ let DuetNumberInput$1 = class extends H {
   static get style() { return duetNumberInputCss; }
 };
 
+const shouldDisplayNavigation = (visibleItems, total, take) => {
+  if (visibleItems * 2 > total / take) {
+    return false;
+  }
+  return true;
+};
+
+const duetPaginationCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-pagination-nav{position:relative}.duet-pagination ::part(button){border:0}.duet-pagination,.duet-pagination li{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}.duet-pagination-item-is-active .duet-pagination-page-number{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}.duet-pagination duet-button{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}.duet-pagination-overlay{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}.duet-pagination.duet-pagination-is-dimmed{opacity:0.5}";
+
+let DuetPagination$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetPageChange = createEvent$2(this, "duetPageChange", 3);
+    this.listId = createID("duet-pagination-list");
+    this.numbersStore = "";
+    /**
+     * State() variables
+     * @internal
+     */
+    this.totalPages = 10;
+    /**
+     * State() variables
+     * @internal
+     */
+    this.internalSectionIndex = 0;
+    /**
+     * Theme of the pagination.
+     */
+    this.theme = "";
+    /**
+     * Characters to use for the jump buttons.
+     */
+    this.jumpString = "...";
+    /**
+     * Variation of the paginator (compact and default supported)
+     */
+    this.variation = "default";
+    /**
+     * Default pagination labels
+     */
+    this.accessibleLabelsDefaults = {
+      en: {
+        next_page: "Next page",
+        previous_page: "Previous page",
+        first_page: "First page",
+        last_page: "Last page",
+        jump_to: "Jump to page",
+        go_to: "Go to page",
+        description: "You may use arrow keys to select page number, or enter a page number when this element is in focus to jump to a page",
+        pagination_label: "Pagination, choose a number to jump to a page",
+        prev_section: "Show previous {0} page numbers, screen reader user should use arrowkeys to navigate",
+        next_section: "Show next {0} page numbers, screen reader user should use arrowkeys to navigate",
+      },
+      fi: {
+        next_page: "Seuraava sivu",
+        previous_page: "Edellinen sivu",
+        first_page: "Ensimmäinen sivu",
+        last_page: "Viimeinen sivu",
+        jump_to: "Siirry sivulle",
+        go_to: "Siirry sivulle",
+        description: "Voit käyttää nuolinäppäimiä sivunumeron valitsemiseen, tai kirjoittaa sivunumeron, jos tämä elementti on aktiivinen, siirtymään sivulle",
+        pagination_label: "Sivutus, valitse sivunumero siirtyäksesi sivulle",
+        prev_section: "Näytä edelliset {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
+        next_section: "Näytä seuraavat {0} sivunumerot, käyttäjän pitää käyttää nuolinäppäimiä navigoidaksesi",
+      },
+      sv: {
+        next_page: "Nästa sida",
+        previous_page: "Föregående sida",
+        first_page: "Första sidan",
+        last_page: "Sista sidan",
+        jump_to: "Hoppa till sida",
+        go_to: "Hoppa till sida",
+        description: "Du kan använda piltangenterna för att välja sida, eller skriva in sida när elementet är i fokus för att hoppa till en sida",
+        pagination_label: "Sidutning, välj en siffra för att hoppa till en sida",
+        prev_section: "Visa föregående {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
+        next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+    /**
+     * The size of the take, when paginating.
+     */
+    this.take = 5;
+    /**
+     * Amount of visible page numbers to show
+     */
+    this.visibleItems = 5;
+    /**
+     * The total size of the paginating data
+     */
+    this.total = 1000;
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    /**
+     * The current page
+     */
+    this.current = 1;
+    /**
+     * Private methods.
+     */
+    // called from the watcher and used to make sure any changed to current also updates the internal section index
+    this.actionChain = async (after, before) => {
+      if (after === 0) {
+        this.current = 1;
+      }
+      else if (before !== after) {
+        const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+        if (calculatedSectionIndex !== this.internalSectionIndex) {
+          this.internalSectionIndex = calculatedSectionIndex;
+          await this.setFocus();
+        }
+      }
+    };
+    //helper to emit relevant page events
+    this.emitPageEvent = debounce((ev, passedPage) => {
+      const page = Number(passedPage || this.current);
+      this.duetPageChange.emit({
+        component: "duet-pagination",
+        from: page * this.take,
+        to: page * this.take + this.take,
+        current: page,
+        take: this.take,
+        type: "page",
+        originalEvent: ev,
+      });
+    }, 500);
+    // this will return the entered number, or the current page if the user presses enter
+    this.getEnteredNumber = debounce(ev => {
+      this.emitPageEvent(ev, this.numbersStore);
+      this.current = Number(this.numbersStore);
+      this.numbersStore = "";
+      this.duetPageChange.emit({
+        component: "duet-pagination",
+        from: this.current * this.take,
+        to: this.current * this.take + this.take,
+        current: this.current,
+        take: this.take,
+        type: "jump",
+        originalEvent: ev,
+      });
+    }, 500);
+  }
+  watchStateHandler(newValue, oldValue) {
+    this.actionChain(newValue, oldValue);
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    // we want to keep the internal current index in sync with the current prop, but take advantage of the multiple with 0 for the first iteration
+    this.internalSectionIndex = Math.ceil(this.current / this.visibleItems) - 1;
+    this.calculatePageTake();
+    inheritGlobalTheme(this);
+  }
+  componentWillRender() {
+    if (this.internalSectionIndex !== 0 && this.internalSectionIndex !== this.totalPages) {
+      this.calculatePageTake();
+    }
+  }
+  componentDidRender() {
+    this.setFocus();
+  }
+  //get totalpages from visible and total
+  calculatePageTake() {
+    this.totalPages = Math.ceil(this.total / this.take);
+  }
+  //set update current when mouse click on page number
+  async onMouseHandler(e, dir) {
+    e.preventDefault();
+    e.stopPropagation();
+    this.current = this.current + dir;
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    let next = this.current;
+    // handle a11y based keyboard navigation for left/right/up/down
+    if (isArrowLeftKey(e) || isArrowUpKey(e)) {
+      next--;
+    }
+    if (isArrowRightKey(e) || isArrowDownKey(e)) {
+      next++;
+    }
+    if (isArrowKey(e)) {
+      if (next <= this.totalPages) {
+        this.current = next;
+        this.emitPageEvent(e);
+      }
+    }
+    //handle the jump feature, where numbers can be entered
+    if (isNumber(e) && this.shouldDisplayNavigation()) {
+      this.numbersStore = this.numbersStore + e.key;
+      if (Number(this.numbersStore) > this.totalPages) {
+        this.numbersStore = this.totalPages + "";
+      }
+      this.getEnteredNumber(e);
+    }
+  }
+  // utility to set focus on active button
+  async setFocus() {
+    const currentDomElement = this.nativeNav.querySelector(`li.duet-pagination-item-is-active duet-button`);
+    currentDomElement && (await currentDomElement.setFocus());
+  }
+  //handles click on page numbers
+  pageClickHandler(e) {
+    e.preventDefault();
+    const clickedId = Number(e.target.getAttribute("data-id"));
+    this.current = clickedId;
+    this.emitPageEvent({}, clickedId);
+  }
+  //handles click on the next section buttons
+  sectionClickHandler(e, direction) {
+    e.preventDefault();
+    let next = this.internalSectionIndex + direction;
+    if (next >= this.totalPages / this.take) {
+      next = this.totalPages / this.take - 1;
+    }
+    const newSection = next;
+    this.internalSectionIndex = newSection >= 0 ? newSection : 0;
+  }
+  //handles click on the jump (1)button
+  jumpToStart(e) {
+    e.preventDefault();
+    this.internalSectionIndex = 0;
+    this.current = 1;
+  }
+  //handles click on the jump (total) button
+  jumpToEnd(e) {
+    e.preventDefault();
+    this.internalSectionIndex = this.totalPages / this.take - 1;
+    this.current = this.totalPages;
+  }
+  // render the individual page numbers
+  renderPageNumbers() {
+    const items = [];
+    let i = this.internalSectionIndex * this.visibleItems;
+    do {
+      i++;
+      if (i > this.totalPages) {
+        break;
+      }
+      items.push(h$1("li", { class: {
+          "duet-pagination-item": true,
+          "duet-pagination-item-is-active": i === this.current,
+        }, role: "menuitem" }, h$1("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.accessibleLabels.go_to} ${i}`, onClick: e => this.pageClickHandler(e) }, h$1("div", { class: "duet-pagination-page-number", "aria-hidden": true }, i))));
+    } while (i < this.visibleItems + this.internalSectionIndex * this.visibleItems);
+    return items;
+  }
+  shouldDisplayNavigation() {
+    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 (h$1(Host, { onKeyDown: e => this.onKeyboardDown(e) }, h$1("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 !== "" && (h$1("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, h$1("duet-badge", null, "jump to page : ", this.numbersStore))), h$1("ol", { id: this.listId, class: {
+        "duet-pagination": true,
+        "duet-pagination-is-dimmed": this.numbersStore !== "",
+      }, role: "menubar", "aria-label": this.accessibleLabels.pagination_label, "aria-description": this.accessibleLabels.description }, h$1("li", { class: {
+        "duet-pagination-page-button": true,
+        "duet-pagination-button-first": true,
+      }, role: "menuitem", part: "navigation-arrow" }, h$1("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() && (h$1(Fragment, null, h$1("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h$1("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) }, h$1("div", { class: "duet-pagination-page-number" }, "1"))), h$1("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h$1("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) }, h$1("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))))), this.renderPageNumbers(), this.internalSectionIndex !== this.totalPages / this.visibleItems - 1 && this.shouldDisplayNavigation() && (h$1(Fragment, null, h$1("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h$1("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) }, h$1("div", { class: "duet-pagination-page-number", "aria-hidden": "true" }, "..."))), h$1("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h$1("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) }, h$1("div", { class: "duet-pagination-page-number" }, this.totalPages))))), h$1("li", { class: {
+        "duet-pagination-page-button": true,
+        "duet-pagination-button-last": true,
+      }, role: "menuitem", part: "navigation-arrow" }, h$1("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 this; }
+  static get watchers() { return {
+    "current": ["watchStateHandler"]
+  }; }
+  static get style() { return duetPaginationCss; }
+};
+
 const duetParagraphCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}.duet-paragraph{margin-bottom:16px !important;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;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;color:#00294d}.duet-paragraph.duet-p-0{padding:0 !important}.duet-paragraph.duet-m-0{margin:0 !important}.duet-paragraph.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a}.duet-paragraph.duet-paragraph-small{font-size:0.875rem}.duet-paragraph.duet-paragraph-semi-bold{font-weight:600}.duet-paragraph.duet-paragraph-bold{font-weight:700}.duet-paragraph.duet-m-0{margin:0 !important}.duet-paragraph.intro{font-size:2.7vw;margin-bottom:28px !important;-webkit-hyphens:inherit;hyphens:inherit}@media (max-width: 37.037037037rem){.duet-paragraph.intro{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-paragraph.intro{font-size:1.25rem}}.duet-paragraph.intro.duet-m-0{margin:0 !important}::slotted(a){font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-style:normal;font-weight:400;color:#0077b3;text-decoration:underline;transition:300ms ease}::slotted(a).duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#c60c30}::slotted(a):hover{color:#004d80;text-decoration:none}::slotted(a):hover.duet-theme-turva{color:#940925}::slotted(a):active{opacity:0.75;transition:none}";
 
 let DuetParagraph$1 = class extends H {
@@ -9072,41 +9406,197 @@ let DuetRangeSlider$1 = class extends H {
   componentWillLoad() {
     inheritGlobalTheme(this);
   }
-  /**
-   * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
-   * `input.focus()`.
-   */
-  async setFocus(options) {
-    this.nativeInput.focus(options);
+  /**
+   * Sets focus on the specified `duet-range-slider`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeInput.focus(options);
+  }
+  /**
+   * Local methods.
+   */
+  calculatePercentage() {
+    return ((this.value - this.min) / (this.max - this.min)) * 100;
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.rangeId;
+    const theme = this.theme === "turva" ? "turva" : "default";
+    const { inactive, active } = colors[theme];
+    const percentage = this.calculatePercentage();
+    const rangeStyles = {
+      background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
+    };
+    return (h$1(Host, { class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h$1("div", { class: {
+        "duet-range-container": true,
+        "duet-label-hidden": this.labelHidden,
+        "duet-theme-turva": this.theme === "turva",
+        "duet-ie": isInternetExplorer(),
+        "duet-range-disabled": this.disabled,
+      } }, h$1("duet-label", { theme: theme, margin: "small", for: identifier }, this.label), h$1("output", { "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h$1("input", { onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+  }
+  get element() { return this; }
+  static get style() { return duetRangeSliderCss; }
+};
+
+const duetRangeStepperCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.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{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:#00294d}.duet-range-stepper ::part(button){border:0}";
+
+let DuetRangeStepper$1 = class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.duetRangeStepUpdate = createEvent$2(this, "duetRangeStepUpdate", 7);
+    this.leftBn = createID("duetRangeStepper-left");
+    this.rightBn = createID("duetRangeStepper-right");
+    /**
+     * Theme of the component.
+     */
+    this.theme = "";
+    /**
+     * Start value
+     * @default 1
+     */
+    this.stepIndex = 1;
+    /**
+     * How big is the step
+     * @default 99
+     */
+    this.stepSize = 50;
+    /**
+     * Total of
+     * @default undefined
+     */
+    this.total = 1000;
+    /**
+     * Default range stepper labels
+     */
+    this.ariaLabelsDefaults = {
+      en: {
+        next_increment: "Next range increment",
+        previous_increment: "Previous range increment",
+        x_of_y: "{0}–{1} of {2}",
+      },
+      fi: {
+        next_increment: "Seuraava välillä",
+        previous_increment: "Edellinen välillä",
+        x_of_y: "{0}–{1} / {2}",
+      },
+      sv: {
+        next_increment: "Nästa intervall",
+        previous_increment: "Föregående intervall",
+        x_of_y: "{0}–{1} av {2}",
+      },
+    };
+    /**
+     * Default pagination labels
+     */
+    this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+    /**
+     * Used to indicate which dom element with ID this element controls
+     */
+    this.ariaControls = "";
+    this.handleClick = (e, direction) => {
+      e.preventDefault();
+      this.increment(direction);
+      this.handleStepClick(e);
+    };
+  }
+  watchStateHandler(newValue) {
+    if (newValue === 1) {
+      this.leftBnRef.setAttribute("disabled", "");
+      this.rightBnRef.focus();
+    }
+    else {
+      this.leftBnRef.removeAttribute("disabled");
+    }
+    if (newValue === this.total / this.stepSize) {
+      this.rightBnRef.setAttribute("disabled", "");
+      this.leftBnRef.focus();
+    }
+    else {
+      this.rightBnRef.removeAttribute("disabled");
+    }
+  }
+  handleStepClick(e) {
+    this.duetRangeStepUpdate.emit({
+      originalEvent: e,
+      component: "duet-range-stepper",
+      from: this.stepIndex * this.stepSize - this.stepSize,
+      to: this.stepIndex * this.stepSize,
+      index: this.stepIndex,
+    });
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  componentDidLoad() {
+    this.watchStateHandler(this.stepIndex);
   }
-  /**
-   * Local methods.
-   */
-  calculatePercentage() {
-    return ((this.value - this.min) / (this.max - this.min)) * 100;
+  increment(direction) {
+    const newIndex = this.stepIndex + direction;
+    if (newIndex <= 0) {
+      this.stepIndex = 1;
+    }
+    else {
+      if (newIndex * this.stepSize <= this.total) {
+        this.stepIndex = newIndex;
+      }
+    }
+  }
+  generateStepSize() {
+    // this function uses this.stepIndex and this.range to generate a range of number like 1-100
+    // this is used to generate the step size
+    let start = (this.stepIndex - 1) * this.stepSize;
+    //easy fix for starting position
+    if (start === 0) {
+      start = 1;
+    }
+    const end = this.stepIndex * this.stepSize;
+    return this.ariaLabels.x_of_y
+      .replace("{0}", String(start))
+      .replace("{1}", String(end))
+      .replace("{2}", String(this.total));
+  }
+  //handle a11y keyboard navigation events
+  async onKeyboardDown(e) {
+    // handle a11y based keyboard navigation for left/right/up/down
+    let next = this.stepIndex;
+    let dir = 1;
+    if (isArrowLeftKey(e) || isArrowUpKey(e) || isMinusKey(e)) {
+      next--;
+      dir = -1;
+      this.leftBnRef.focus();
+    }
+    if (isArrowRightKey(e) || isArrowDownKey(e) || isPlusKey(e)) {
+      next++;
+      dir = 1;
+    }
+    if (isArrowKey(e)) {
+      if (next > 0 && next * this.stepSize <= this.total) {
+        this.handleClick(e, dir);
+      }
+    }
   }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
-    const identifier = this.identifier || this.rangeId;
-    const theme = this.theme === "turva" ? "turva" : "default";
-    const { inactive, active } = colors[theme];
-    const percentage = this.calculatePercentage();
-    const rangeStyles = {
-      background: `-webkit-linear-gradient(left,${active} 0%,${active} ${percentage}%,${inactive} ${percentage}%)`,
-    };
-    return (h$1(Host, { class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h$1("div", { class: {
-        "duet-range-container": true,
-        "duet-label-hidden": this.labelHidden,
+    return (h$1("div", { class: {
+        "duet-range-stepper": true,
         "duet-theme-turva": this.theme === "turva",
-        "duet-ie": isInternetExplorer(),
-        "duet-range-disabled": this.disabled,
-      } }, h$1("duet-label", { theme: theme, margin: "small", for: identifier }, this.label), h$1("output", { "aria-hidden": "true", htmlFor: identifier, class: "duet-output" }, this.value.toLocaleString(this.locale), this.unit), h$1("input", { onInput: this.onInput, onChange: this.onChange, ref: input => (this.nativeInput = input), type: "range", min: this.min, max: this.max, step: this.step, value: this.value, style: rangeStyles, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} ${this.unit}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, name: this.name, disabled: this.disabled, required: this.required, class: "duet-range" }))));
+      }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h$1("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h$1("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" }), h$1("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 this; }
-  static get style() { return duetRangeSliderCss; }
+  static get watchers() { return {
+    "stepIndex": ["watchStateHandler"]
+  }; }
+  static get style() { return duetRangeStepperCss; }
 };
 
 const duetScrollableCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}:host{position:relative !important}:host .duet-scrollable-items{display:flex}:host .duet-scrollable-items .duet-scrollable-button{position:relative;flex:0 0 auto;flex-basis:40px;padding:10px;cursor:pointer}:host .duet-scrollable-items .duet-scrollable-button:active{transform:scale(0.8)}:host .duet-scrollable-items .duet-scrollable-button--left{left:-12px}:host .duet-scrollable-items .duet-scrollable-button--right{right:-12px}:host .duet-scrollable-items .duet-scrollable-button--occluded{display:none}:host .duet-scrollable-items .duet-scrollable-list{display:flex;flex-wrap:nowrap;gap:20px;padding-top:2px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-margin:0 20px;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-overflow-scrolling:touch;}:host .duet-scrollable-items .duet-scrollable-list::-webkit-scrollbar{display:none}::slotted(*){scroll-snap-align:center;margin-left:0;-webkit-transition:-webkit-transform 0.2s ease-in-out;transition:-webkit-transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out;transition:transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out}";
@@ -9268,7 +9758,7 @@ let DuetScrollable$1 = class extends H {
   static get style() { return duetScrollableCss; }
 };
 
-const duetSelectCss = "@charset \"UTF-8\";*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{position:relative;top:4px;right:auto}}.duet-select-placeholder.sc-duet-select{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:white}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select::after{content:\"  \"}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-help.sc-duet-select{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:#657787;border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{color:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
+const duetSelectCss = "@charset \"UTF-8\";*.sc-duet-select,*.sc-duet-select::after,*.sc-duet-select::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-select-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}.sc-duet-select-h:last-child,.sc-duet-select-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-select-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-select-h{width:100% !important}}.duet-select-variation-tiny.sc-duet-select-h{position:relative;top:-2px;width:72px;margin:0 !important;vertical-align:baseline}.duet-m-0.sc-duet-select-h{margin:0 !important}duet-tooltip.sc-duet-select{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-select{position:relative;top:4px;right:auto}}.duet-select-placeholder.sc-duet-select{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:white}.duet-select-container.sc-duet-select{position:relative;width:100%}.duet-select-container.duet-select-variation-tiny.sc-duet-select{width:72px}.duet-select-wrapper.sc-duet-select{position:relative;width:100%;padding:15px 14px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-variation-tiny.sc-duet-select .duet-select-wrapper.sc-duet-select{width:81px;padding:0 !important}.duet-select-wrapper.sc-duet-select::after{content:\"  \"}.duet-select-wrapper.sc-duet-select select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;margin:0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#909599;box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{border-color:#747475;box-shadow:0 0 0 1px #747475}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:hover+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#171c3a}.duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#0077b3}.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-wrapper.sc-duet-select select.sc-duet-select:focus+.duet-select.sc-duet-select{box-shadow:0 0 0 1px #e02a0d}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select{cursor:default !important}.duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#00294d !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:#00294d !important}.duet-theme-turva.sc-duet-select .duet-select-wrapper.sc-duet-select select[disabled].sc-duet-select+.duet-select.sc-duet-select{color:#171c3a !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important;-webkit-text-fill-color:#171c3a !important}.duet-select.sc-duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5;color:#00294d;text-align:left;text-overflow:ellipsis;white-space:nowrap;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#de2362 !important}.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select{border-color:#e02a0d !important}.duet-theme-turva.has-error.sc-duet-select .duet-select.sc-duet-select .duet-select-icon.sc-duet-select{color:#e02a0d !important}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a;border-color:#747475}.duet-select.sc-duet-select svg.sc-duet-select{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:#00294d;pointer-events:none;transform:translateY(-50%)}.duet-theme-turva.sc-duet-select .duet-select.sc-duet-select svg.sc-duet-select{color:#171c3a}.duet-select-variation-tiny.sc-duet-select .duet-select.sc-duet-select{width:72px;min-width:inherit;padding:0 !important;margin-bottom:-4px;overflow:visible;font-weight:600;text-align:center}.duet-select-variation-tiny.sc-duet-select .duet-select.sc-duet-select duet-icon.sc-duet-select{padding-left:10px}.duet-select-help.sc-duet-select{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:#657787;border-radius:4px}.duet-select-help.sc-duet-select span.sc-duet-select{display:block;margin-top:8px}.duet-theme-turva.sc-duet-select .duet-select-help.sc-duet-select{color:#747475}.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#de2362}.duet-theme-turva.has-error.sc-duet-select .duet-select-help.sc-duet-select{color:#e02a0d}.duet-label-hidden.sc-duet-select duet-label.sc-duet-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 
 function isOptionGroup(item) {
   return "options" in item;
@@ -9304,6 +9794,10 @@ let DuetSelect$1 = class extends H {
      * Inlined decorator, alphabetical order.
      */
     this.processedItems = null;
+    /**
+     * Variation of dropdown. -tiny is used for small numbers / tiny option ranges.
+     */
+    this.variation = "default";
     /**
      * Controls the margin of the component.
      */
@@ -9435,15 +9929,23 @@ let DuetSelect$1 = class extends H {
    */
   render() {
     const identifier = this.identifier || this.selectId;
-    return (h$1(Host, { onClick: this.onClick, class: { "duet-m-0": this.margin === "none", "duet-expand": this.expand } }, h$1("div", { class: {
+    return (h$1(Host, { onClick: this.onClick, class: {
+        "duet-m-0": this.margin === "none",
+        "duet-expand": this.expand,
+        "duet-select-variation-tiny": this.variation === "tiny",
+      } }, h$1("div", { class: {
         "duet-select-container": true,
         "duet-label-hidden": this.labelHidden,
         "duet-theme-turva": this.theme === "turva",
+        "duet-select-variation-tiny": this.variation === "tiny",
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
       } }, h$1("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, id: this.labelId, for: identifier }, this.label), this.tooltip && (h$1("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (h$1("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), h$1("div", { class: "duet-select-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (h$1("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-select-placeholder", size: "small" }, this.placeholder)), h$1("select", { ref: select => (this.nativeSelect = select), disabled: this.disabled, name: this.name, id: identifier, role: this.role, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, required: this.required, "aria-describedby": this.accessibleDescribedBy }, this.placeholder && (h$1("option", { disabled: true, selected: true, value: "" }, this.placeholder)), !this.processedItems ? (h$1("option", null, "Virhe valintoja ladattaessa. P\u00E4ivit\u00E4 sivu ja kokeile uusiksi.")) : (this.processedItems.map(item => {
       return isOptionGroup(item) ? this.renderOptionGroup(item) : this.renderOption(item);
-    }))), h$1("div", { class: "duet-select", "aria-hidden": "true" }, h$1("span", { key: this.value }, this.getSelectedItemLabel()), h$1("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h$1("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" })))), h$1("span", { class: "duet-select-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h$1("span", null, this.error)))));
+    }))), h$1("div", { class: {
+        "duet-select": true,
+        "duet-select-variation-tiny": this.variation === "tiny",
+      }, "aria-hidden": "true" }, h$1("span", { key: this.value }, this.getSelectedItemLabel()), this.variation !== "tiny" && (h$1("svg", { role: "img", class: "duet-select-icon", fill: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h$1("path", { d: "m12 18.999c-.4 0-.776-.156-1.059-.438l-10.721-10.72c-.142-.142-.22-.33-.22-.531 0-.2.078-.389.22-.53.142-.142.33-.22.53-.22s.389.078.53.22l10.72 10.719 10.72-10.719c.142-.142.33-.22.53-.22s.389.078.53.22c.142.142.22.33.22.53s-.078.389-.22.53l-10.72 10.72c-.282.283-.659.439-1.06.439z" }))), this.variation === "tiny" && (h$1("duet-icon", { name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xx-small" })))), h$1("span", { class: "duet-select-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && h$1("span", null, this.error)))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -9891,7 +10393,7 @@ let DuetTabGroup$1 = class extends H {
     };
     this.renderTab = () => {
       const renderedTabs = this.tabs.map((element, index) => {
-        return (h$1("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), part: `${this.identifier}-button`, type: "button", class: {
+        return (h$1("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
             "duet-p-0": this.padding === "none",
             "duet-tab-button": true,
             selected: element.selected,
@@ -10014,7 +10516,7 @@ let DuetTabGroup$1 = class extends H {
   static get style() { return duetTabGroupCss; }
 };
 
-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,
@@ -10075,9 +10577,9 @@ let DuetTable$1 = class extends H {
   }
   connectedCallback() {
     this.mq = matchMedia(breakpointToToken[this.breakpoint]);
-    this.mq.addEventListener("change", this.handleMediaQueryChange);
+    this.mq.addEventListener("change", debounce(this.handleMediaQueryChange, 50));
     this.handleMediaQueryChange(this.mq);
-    this.observer = new MutationObserver(() => this.copyHeadingsToCells());
+    this.observer = new MutationObserver(() => debounce(this.copyHeadingsToCells(), 50));
     this.observer.observe(this.element, {
       childList: true,
       subtree: true,
@@ -10108,6 +10610,9 @@ let DuetTable$1 = class extends H {
     this.mq = null;
     this.matchesBreakpoint = true;
   }
+  /**
+   * Local methods.
+   */
   copyHeadingsToCells() {
     const headingElements = this.element.querySelectorAll("thead th");
     const rowElements = this.element.querySelectorAll("tbody tr");
@@ -11007,7 +11512,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");
@@ -11087,7 +11592,7 @@ const makeXhrRequest = ({ payload, options, onFailure, onSuccess, onProgress })
   return xhr;
 };
 
-const duetUploadCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.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{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{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 = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}::slotted([slot=header]){margin-bottom:16px}::slotted([slot=fileheader]){margin:16px 0 0 0}::slotted([slot=filefooter]){margin-top:16px}.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{font-size:0.75rem;font-weight:400}.duet-upload-filelist{margin-bottom:25px}.duet-upload-filelist-empty{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{display:none}.duet-upload-editable-table tbody .duet-upload-editable-table-data{padding:0 !important;border:0}.duet-upload-editable-table duet-editable-table tfoot,.duet-upload-editable-table duet-editable-table thead{display:none}.duet-upload-editable-table duet-editable-table .duet-editable-table-content{padding-right:0 !important;padding-left:0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td{padding:0.75rem 0 !important}.duet-upload-editable-table duet-editable-table duet-table .duet-table-action-row td:last-child{padding-right:0 !important}.duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button){border:0}";
 
 let DuetUpload$1 = class extends H {
   constructor() {
@@ -11103,25 +11608,6 @@ let DuetUpload$1 = class extends H {
     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
      */
@@ -11143,8 +11629,9 @@ let DuetUpload$1 = class extends H {
       {
         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",
@@ -11155,8 +11642,9 @@ let DuetUpload$1 = class extends H {
       {
         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",
@@ -11226,8 +11714,8 @@ let DuetUpload$1 = class extends H {
         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",
       },
     };
     /**
@@ -11382,19 +11870,72 @@ let DuetUpload$1 = class extends H {
      * 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
         }
@@ -11451,24 +11992,6 @@ let DuetUpload$1 = class extends H {
         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);
@@ -11529,7 +12052,6 @@ let DuetUpload$1 = class extends H {
       this.nativeInput.value = "";
     };
     this.startUpload = async (ev, metaData = undefined) => {
-      await this.setFocus();
       this.metaData = metaData;
       this.nativeInput.click();
       this.onUpload(ev, metaData);
@@ -11592,9 +12114,18 @@ let DuetUpload$1 = class extends H {
         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({
@@ -11608,8 +12139,9 @@ let DuetUpload$1 = class extends H {
       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();
@@ -11659,6 +12191,79 @@ let DuetUpload$1 = class extends H {
         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 (h$1("duet-table", { variation: "plain", breakpoint: "none", role: "log", margin: this.hideGroups ? "none" : "auto" }, h$1("table", { class: "duet-upload-editable-table" }, h$1("thead", { class: "duet-upload-editable-table-header" }, h$1("tr", null, h$1("th", { class: {
+            "duet-upload-editable-table-header-hidden": this.hideGroups,
+          } }, !this.hideGroups ? (getLocaleString(group.label)) : (h$1("duet-visually-hidden", null, getLocaleString(group.label)))))), h$1("tbody", null, h$1("tr", null, h$1("td", { class: "duet-upload-editable-table-data" }, h$1("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) {
@@ -11682,6 +12287,68 @@ let DuetUpload$1 = class extends H {
     // 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 (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { label: this.label, caption: caption }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+        "duet-upload-filelist-empty": !this.files.size,
+        "duet-upload-filelist": true,
+        "duet-upload-filelist-filled": this.files.size,
+      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderEditableTableGroups(), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("duet-spacer", { size: "large" }), !this.hideButton && (h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h$1("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h$1("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h$1("duet-spacer", { size: "medium" }), h$1("duet-visually-hidden", null, h$1("input", { ref: input => {
+        this.nativeInput = input;
+      }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
+        "duet-upload": true,
+      }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
+  }
   /**
    * XHR request utilities
    */
@@ -11803,68 +12470,6 @@ let DuetUpload$1 = class extends H {
       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 (h$1(Host, { class: { "duet-m-0": this.margin === "none" } }, h$1("duet-fieldset", { label: this.label, caption: caption }, h$1("slot", { name: "header" }), !this.files.size && (h$1("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
-        "duet-upload-filelist-empty": !this.files.size,
-        "duet-upload-filelist": true,
-        "duet-upload-filelist-filled": this.files.size,
-      }, id: this.labelId, for: identifier }, this.fileListEmpty)), !!this.files.size && h$1("slot", { name: "fileheader" }), !!this.files.size && (h$1("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && (h$1("duet-editable-table", { part: this.identifier ? `${this.identifier}-editable-table` : "duet-upload-editable-table", "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })), !!this.files.size && h$1("slot", { name: "filefooter" }), h$1("duet-spacer", { size: "large" }), !this.hideButton && (h$1("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)), h$1("duet-spacer", { size: "medium" }), (this.fileMaxReached || this.bytesMaxReached) && (h$1("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301"), this.bytesMaxReached && getI18nError("duet-upload-202"))), h$1("duet-spacer", { size: "medium" }), h$1("duet-visually-hidden", null, h$1("input", { ref: input => {
-        this.nativeInput = input;
-      }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
-        "duet-upload": true,
-      }, disabled: this.disabled, "aria-hidden": "true", required: this.required, name: this.name, id: this.identifier, multiple: this.multiple, capture: "user" })))));
-  }
   get element() { return this; }
   static get watchers() { return {
     "valid": ["watchValidHandler"]
@@ -11983,11 +12588,12 @@ let DuetVisuallyHidden$1 = class extends H {
 };
 
 globalScripts();
+const DuetActionButton = /*@__PURE__*/proxyCustomElement(DuetActionButton$1, [1,"duet-action-button",{"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]}]);
 const DuetAlert = /*@__PURE__*/proxyCustomElement(DuetAlert$1, [1,"duet-alert",{"theme":[1025],"accessibleLabelDefaults":[1,"accessible-label-default"],"accessibleLabel":[1,"accessible-label"],"announcements":[4],"icon":[1],"autoDismiss":[2,"auto-dismiss"],"margin":[1],"padding":[1],"variation":[1],"dismissible":[4],"isDismissed":[32],"timeoutID":[32]}]);
 const DuetBadge = /*@__PURE__*/proxyCustomElement(DuetBadge$1, [1,"duet-badge",{"theme":[1025],"variation":[1],"margin":[1]}]);
 const DuetBreadcrumb = /*@__PURE__*/proxyCustomElement(DuetBreadcrumb$1, [1,"duet-breadcrumb",{"theme":[1025],"href":[1025],"icon":[1025],"accessibleLabel":[1,"accessible-label"]}]);
 const DuetBreadcrumbs = /*@__PURE__*/proxyCustomElement(DuetBreadcrumbs$1, [1,"duet-breadcrumbs",{"theme":[1025],"children":[32]}]);
-const DuetButton = /*@__PURE__*/proxyCustomElement(DuetButton$1, [1,"duet-button",{"accessibleLabel":[1,"accessible-label"],"accessibleControls":[1,"accessible-controls"],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleExpanded":[4,"accessible-expanded"],"accessiblePressed":[4,"accessible-pressed"],"loading":[4],"variation":[1],"negative":[4],"theme":[1025],"margin":[1],"padding":[1],"wrapping":[1],"expand":[4],"fixed":[4],"disabled":[516],"name":[1],"value":[1],"identifier":[1],"submit":[516],"external":[4],"language":[1],"accessibleLabelExternalDefaults":[1,"accessible-label-external-default"],"accessibleLabelExternal":[1,"accessible-label-external"],"icon":[1],"color":[1],"iconRight":[4,"icon-right"],"iconSize":[1,"icon-size"],"size":[1],"iconOnly":[4,"icon-only"],"url":[513]}]);
+const DuetButton = /*@__PURE__*/proxyCustomElement(DuetButton$1, [1,"duet-button",{"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"],"accessibleExpanded":[4,"accessible-expanded"],"accessiblePressed":[4,"accessible-pressed"],"loading":[4],"variation":[1],"negative":[4],"theme":[1025],"margin":[1],"padding":[1],"centerText":[4,"center-text"],"wrapping":[1],"expand":[4],"fixed":[4],"disabled":[516],"name":[1],"value":[1],"identifier":[1],"submit":[516],"external":[4],"language":[1],"accessibleLabelExternalDefaults":[1,"accessible-label-external-default"],"accessibleLabelExternal":[1,"accessible-label-external"],"icon":[1],"color":[1],"iconRight":[4,"icon-right"],"iconSize":[1,"icon-size"],"size":[1],"iconOnly":[4,"icon-only"],"url":[513]}]);
 const DuetCaption = /*@__PURE__*/proxyCustomElement(DuetCaption$1, [1,"duet-caption",{"theme":[1025],"margin":[1],"selected":[4],"size":[1]}]);
 const DuetCard = /*@__PURE__*/proxyCustomElement(DuetCard$1, [1,"duet-card",{"accessibleLabel":[1,"accessible-label"],"heading":[1],"secondaryHeading":[1,"secondary-heading"],"variation":[1],"collapsible":[4],"open":[1540],"headingLevel":[1,"heading-level"],"icon":[1],"image":[1],"background":[1],"padding":[1],"margin":[1],"theme":[1025],"url":[1]}]);
 const DuetCheckbox = /*@__PURE__*/proxyCustomElement(DuetCheckbox$1, [2,"duet-checkbox",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"margin":[1],"accessibleControls":[1,"accessible-controls"],"accessibleIndex":[1,"accessible-index"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"required":[4],"theme":[1025],"disabled":[516],"identifier":[1],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"role":[1],"checked":[1540],"value":[1537]}]);
@@ -11997,9 +12603,7 @@ const DuetCollapsible = /*@__PURE__*/proxyCustomElement(DuetCollapsible$1, [1,"d
 const DuetCookieConsent = /*@__PURE__*/proxyCustomElement(DuetCookieConsent$1, [1,"duet-cookie-consent",{"accessibleLabel":[1,"accessible-label"],"theme":[1025]}]);
 const DuetDatePicker = /*@__PURE__*/proxyCustomElement(DuetDatePicker$1, [2,"duet-date-picker",{"theme":[1025],"expand":[4],"name":[1],"identifier":[1],"label":[1],"caption":[1],"margin":[1],"language":[1],"placeholderDefaults":[1,"placeholder-default"],"placeholder":[1],"echoPlaceholder":[1540,"echo-placeholder"],"disabled":[516],"error":[1],"labelHidden":[4,"label-hidden"],"role":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"required":[4],"direction":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"value":[1537],"min":[1],"max":[1],"validity":[1040],"open":[32],"focusedDay":[32],"inputValue":[32]},[[4,"click","handleDocumentClick"]]]);
 const DuetDivider = /*@__PURE__*/proxyCustomElement(DuetDivider$1, [1,"duet-divider",{"theme":[1025],"margin":[1]}]);
-const DuetEditableTable = /*@__PURE__*/proxyCustomElement(DuetEditableTable$1, [1,"duet-editable-table",{"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]}]);
-const DuetEditableTableButton = /*@__PURE__*/proxyCustomElement(DuetEditableTableButton$1, [2,"duet-editable-table-button",{"theme":[1025],"actions":[16],"uid":[1],"group":[1],"keyName":[1,"key-name"],"isHovering":[32]}]);
-const DuetEditableTableItem = /*@__PURE__*/proxyCustomElement(DuetEditableTableItem$1, [1,"duet-editable-table-item",{"theme":[1025],"actions":[16],"groupId":[1,"group-id"],"alignment":[1],"keyName":[1,"key-name"],"data":[1040],"isHovering":[32]}]);
+const DuetEditableTable = /*@__PURE__*/proxyCustomElement(DuetEditableTable$1, [6,"duet-editable-table",{"margin":[1],"variation":[1],"sticky":[4],"stickyDistance":[1,"sticky-distance"],"breakpoint":[1],"actions":[1040],"columns":[1040],"rows":[1040],"sortable":[4],"groupId":[1,"group-id"],"theme":[1025],"accessibleRole":[1,"accessible-role"]}]);
 const DuetEmptyState = /*@__PURE__*/proxyCustomElement(DuetEmptyState$1, [1,"duet-empty-state",{"theme":[1025],"icon":[1],"size":[1]}]);
 const DuetFieldset = /*@__PURE__*/proxyCustomElement(DuetFieldset$1, [1,"duet-fieldset",{"theme":[1025],"margin":[1],"caption":[1],"label":[1],"error":[1],"labelHidden":[4,"label-hidden"],"hasTooltip":[32]}]);
 const DuetFooter = /*@__PURE__*/proxyCustomElement(DuetFooter$1, [1,"duet-footer",{"theme":[1025],"variation":[1],"margin":[1],"logoHref":[1,"logo-href"],"language":[1025],"items":[8],"accessibleLabelExternalDefaults":[1,"accessible-label-external-default"],"accessibleLabelExternal":[1,"accessible-label-external"],"menu":[8],"processedItems":[32],"processedMenu":[32]}]);
@@ -12020,13 +12624,15 @@ const DuetModal = /*@__PURE__*/proxyCustomElement(DuetModal$1, [1,"duet-modal",{
 const DuetNotification = /*@__PURE__*/proxyCustomElement(DuetNotification$1, [1,"duet-notification",{"language":[1],"accessibleLabelUnreadDefaults":[16],"accessibleLabelUnread":[1,"accessible-label-unread"],"url":[1],"date":[1],"highlight":[4],"external":[4],"theme":[1025]}]);
 const DuetNotificationDrawer = /*@__PURE__*/proxyCustomElement(DuetNotificationDrawer$1, [1,"duet-notification-drawer",{"icon":[1],"label":[1],"language":[1],"accessibleLabelNotificationsDefaults":[1,"accessible-label-notification-default"],"accessibleLabelNotifications":[1,"accessible-label-notifications"],"badge":[4],"theme":[1025],"direction":[1],"isOpen":[32],"hasNotifications":[32]},[[6,"focus","handleClickFocusOutside"],[6,"click","handleClickFocusOutside"]]]);
 const DuetNumberInput = /*@__PURE__*/proxyCustomElement(DuetNumberInput$1, [2,"duet-number-input",{"language":[1025],"locale":[1],"unit":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleLiveDefaults":[1,"accessible-live-default"],"accessibleLive":[1,"accessible-live"],"accessibleLiveEnabled":[4,"accessible-live-enabled"],"accessibleAddDefaults":[1,"accessible-add-default"],"accessibleAdd":[1,"accessible-add"],"accessibleSubtractDefaults":[1,"accessible-subtract-defaults"],"accessibleSubtract":[1,"accessible-subtract"],"theme":[1025],"margin":[1],"expand":[4],"identifier":[1],"min":[2],"labelDefaults":[1,"label-default"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[2],"name":[1],"error":[1],"tooltip":[1],"step":[2],"rounding":[4],"role":[1],"disabled":[516],"required":[4],"value":[1025],"focusedValue":[32]}]);
+const DuetPagination = /*@__PURE__*/proxyCustomElement(DuetPagination$1, [1,"duet-pagination",{"theme":[1025],"jumpString":[1,"jump-string"],"variation":[1],"accessibleLabelsDefaults":[16],"accessibleLabels":[16],"take":[1026],"visibleItems":[1026,"visible-items"],"total":[1026],"ariaControls":[1,"accessible-controls"],"current":[1026],"numbersStore":[32],"totalPages":[32],"internalSectionIndex":[32]}]);
 const DuetParagraph = /*@__PURE__*/proxyCustomElement(DuetParagraph$1, [1,"duet-paragraph",{"theme":[1025],"margin":[1],"size":[1],"weight":[1],"variation":[1],"color":[1]}]);
 const DuetProgress = /*@__PURE__*/proxyCustomElement(DuetProgress$1, [0,"duet-progress",{"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleLabel":[1,"accessible-label"],"accessibleLabelUploadDefaults":[1,"accessible-label-upload-defaults"],"accessibleLabelUpload":[1,"accessible-label-upload"],"progress":[1538],"caption":[1],"height":[1],"theme":[1025]}]);
 const DuetRadio = /*@__PURE__*/proxyCustomElement(DuetRadio$1, [2,"duet-radio",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleIndex":[1,"accessible-index"],"margin":[1],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"theme":[1025],"disabled":[516],"required":[4],"blockEvents":[4,"block-events"],"identifier":[1],"label":[1],"name":[1],"role":[1],"groupDisabled":[4,"group-disabled"],"groupDirection":[1,"group-direction"],"groupResponsive":[4,"group-responsive"],"checked":[1540],"value":[1537]}]);
 const DuetRadioGroup = /*@__PURE__*/proxyCustomElement(DuetRadioGroup$1, [6,"duet-radio-group",{"direction":[1],"margin":[1],"theme":[1025],"error":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"name":[1],"label":[1],"labelHidden":[4,"label-hidden"],"caption":[1],"responsive":[4],"value":[1537],"disabled":[4]}]);
 const DuetRangeSlider = /*@__PURE__*/proxyCustomElement(DuetRangeSlider$1, [2,"duet-range-slider",{"theme":[1025],"margin":[1],"expand":[4],"identifier":[1],"name":[1],"required":[4],"disabled":[516],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"min":[2],"label":[1],"labelHidden":[4,"label-hidden"],"unit":[1],"max":[2],"step":[2],"locale":[1],"value":[1026],"debounce":[2]}]);
+const DuetRangeStepper = /*@__PURE__*/proxyCustomElement(DuetRangeStepper$1, [1,"duet-range-stepper",{"theme":[1025],"stepIndex":[1026,"step-index"],"stepSize":[2,"step-size"],"total":[2],"ariaLabelsDefaults":[16],"ariaLabels":[16],"ariaControls":[1,"accessible-controls"]}]);
 const DuetScrollable = /*@__PURE__*/proxyCustomElement(DuetScrollable$1, [1,"duet-scrollable",{"theme":[1025],"identifier":[1],"selected":[1026],"tablistAtStart":[32],"isTabContentSmallerThanWrapper":[32],"tablistAtEnd":[32],"childrenData":[32]}]);
-const DuetSelect = /*@__PURE__*/proxyCustomElement(DuetSelect$1, [2,"duet-select",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleDescribedBy":[1,"accessible-described-by"],"margin":[1],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"error":[1],"expand":[4],"value":[1537],"theme":[1025],"labelHidden":[4,"label-hidden"],"identifier":[1],"name":[1],"placeholder":[1],"caption":[1],"echoPlaceholder":[4,"echo-placeholder"],"items":[1],"disabled":[516],"required":[4],"label":[1],"role":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"processedItems":[32]}]);
+const DuetSelect = /*@__PURE__*/proxyCustomElement(DuetSelect$1, [2,"duet-select",{"variation":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleDescribedBy":[1,"accessible-described-by"],"margin":[1],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"error":[1],"expand":[4],"value":[1537],"theme":[1025],"labelHidden":[4,"label-hidden"],"identifier":[1],"name":[1],"placeholder":[1],"caption":[1],"echoPlaceholder":[4,"echo-placeholder"],"items":[1],"disabled":[516],"required":[4],"label":[1],"role":[1],"tooltip":[1],"tooltipDirection":[1,"tooltip-direction"],"processedItems":[32]}]);
 const DuetSpacer = /*@__PURE__*/proxyCustomElement(DuetSpacer$1, [1,"duet-spacer",{"size":[1],"direction":[1],"breakpoint":[1]}]);
 const DuetSpinner = /*@__PURE__*/proxyCustomElement(DuetSpinner$1, [1,"duet-spinner",{"accessibleLabel":[1,"accessible-label"],"color":[1],"size":[1],"theme":[1025]}]);
 const DuetStep = /*@__PURE__*/proxyCustomElement(DuetStep$1, [6,"duet-step",{"theme":[1025],"heading":[1],"headingLevel":[1,"heading-level"],"stepIndex":[2,"step-index"],"state":[1],"roundedTop":[4,"rounded-top"],"roundedBottom":[4,"rounded-bottom"]}]);
@@ -12038,13 +12644,14 @@ const DuetTextarea = /*@__PURE__*/proxyCustomElement(DuetTextarea$1, [2,"duet-te
 const DuetToggle = /*@__PURE__*/proxyCustomElement(DuetToggle$1, [2,"duet-toggle",{"theme":[1025],"margin":[1],"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"accessibleDescribedBy":[1,"accessible-described-by"],"label":[1],"required":[4],"disabled":[516],"checked":[1540],"value":[1537],"identifier":[1],"name":[1],"role":[1]}]);
 const DuetTooltip = /*@__PURE__*/proxyCustomElement(DuetTooltip$1, [1,"duet-tooltip",{"theme":[1025],"language":[1025],"accessibleLabelDefault":[1,"accessible-label-default"],"accessibleLabel":[1,"accessible-label"],"accessibleInputLabel":[1,"accessible-input-label"],"accessibleCloseLabelDefault":[1,"accessible-close-label-default"],"accessibleCloseLabel":[1,"accessible-close-label"],"label":[1],"breakpoint":[1],"direction":[1],"positionVertical":[513,"position-vertical"],"positionHorizontal":[513,"position-horizontal"],"active":[1540],"openDown":[32]},[[9,"scroll","onScroll"],[4,"click","handleDocumentClick"]]]);
 const DuetTray = /*@__PURE__*/proxyCustomElement(DuetTray$1, [1,"duet-tray",{"language":[1025],"accessibleCloseLabelDefaults":[1,"accessible-close-label-default"],"accessibleCloseLabel":[1,"accessible-close-label"],"accessibleOpenLabelDefaults":[1,"accessible-open-label-default"],"accessibleOpenLabel":[1,"accessible-open-label"],"theme":[1025],"active":[516],"autoHide":[4,"auto-hide"],"responsive":[4],"expanded":[32],"hiddenState":[32]},[[9,"scroll","getFrame"],[16,"click","handleBodyClick"]]]);
-const DuetUpload = /*@__PURE__*/proxyCustomElement(DuetUpload$1, [1,"duet-upload",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"external":[4],"hideButton":[4,"hide-upload-button"],"actions":[1],"uri":[1],"showLinks":[4,"show-links"],"caption":[1],"statusLabelDefaults":[1,"status-label-default"],"statusMessageLabel":[1,"status-message-label"],"buttonLabelDefaults":[1,"button-label-default"],"buttonLabel":[1,"button-label"],"accessibleButtonLabel":[1,"accessible-button-label"],"theme":[1025],"disabled":[516],"identifier":[1],"margin":[1],"required":[4],"groups":[1],"alignment":[1],"hideGroups":[4,"hide-table-labels"],"files":[1040],"valid":[1540],"labelDefaults":[1,"label-default"],"label":[1],"descriptionDefaults":[1,"description-default"],"description":[1],"fileListEmptyDefaults":[1,"list-empty-default"],"fileListEmpty":[1,"file-list-empty"],"error":[1],"name":[1],"maxBytes":[2,"max-bytes"],"maxBytesTotal":[2,"max-bytes-total"],"maxFiles":[2,"max-files"],"allowedExtensions":[1,"allowed-extensions"],"allowedMimetypes":[1,"allowed-mimetypes"],"multiple":[4],"limitSelection":[4,"limit-selection"],"value":[1025],"tick":[32]}]);
+const DuetUpload = /*@__PURE__*/proxyCustomElement(DuetUpload$1, [1,"duet-upload",{"accessibleActiveDescendant":[1,"accessible-active-descendant"],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleControls":[1,"accessible-controls"],"accessibleOwns":[1,"accessible-owns"],"external":[4],"hideButton":[4,"hide-upload-button"],"actions":[16],"uri":[1],"showLinks":[4,"show-links"],"caption":[1],"statusLabelDefaults":[1,"status-label-default"],"statusMessageLabel":[1,"status-message-label"],"buttonLabelDefaults":[1,"button-label-default"],"buttonLabel":[1,"button-label"],"accessibleButtonLabel":[1,"accessible-button-label"],"theme":[1025],"disabled":[516],"identifier":[1],"margin":[1],"required":[4],"alignment":[1],"hideGroups":[4,"hide-table-labels"],"files":[1040],"valid":[1540],"labelDefaults":[1,"label-default"],"label":[1],"descriptionDefaults":[1,"description-default"],"description":[1],"fileListEmptyDefaults":[1,"list-empty-default"],"fileListEmpty":[1,"file-list-empty"],"error":[1],"name":[1],"maxBytes":[2,"max-bytes"],"maxBytesTotal":[2,"max-bytes-total"],"maxFiles":[2,"max-files"],"allowedExtensions":[1,"allowed-extensions"],"allowedMimetypes":[1,"allowed-mimetypes"],"multiple":[4],"limitSelection":[4,"limit-selection"],"value":[1025],"groups":[16],"tick":[32]}]);
 const DuetUploadAriaStatus = /*@__PURE__*/proxyCustomElement(DuetUploadAriaStatus$1, [1,"duet-upload-aria-status",{"statusMessageLabel":[16],"accessibleAriaLive":[1,"accessible-aria-live"],"valid":[2],"total":[2],"invalid":[2],"inprogress":[2],"statusMessage":[32]}]);
 const DuetVisuallyHidden = /*@__PURE__*/proxyCustomElement(DuetVisuallyHidden$1, [1,"duet-visually-hidden"]);
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
-      DuetAlert,
+      DuetActionButton,
+  DuetAlert,
   DuetBadge,
   DuetBreadcrumb,
   DuetBreadcrumbs,
@@ -12059,8 +12666,6 @@ const defineCustomElements = (opts) => {
   DuetDatePicker,
   DuetDivider,
   DuetEditableTable,
-  DuetEditableTableButton,
-  DuetEditableTableItem,
   DuetEmptyState,
   DuetFieldset,
   DuetFooter,
@@ -12081,11 +12686,13 @@ const defineCustomElements = (opts) => {
   DuetNotification,
   DuetNotificationDrawer,
   DuetNumberInput,
+  DuetPagination,
   DuetParagraph,
   DuetProgress,
   DuetRadio,
   DuetRadioGroup,
   DuetRangeSlider,
+  DuetRangeStepper,
   DuetScrollable,
   DuetSelect,
   DuetSpacer,
@@ -12502,4 +13109,4 @@ const shadowCss = /*#__PURE__*/Object.freeze({
   scopeCss: scopeCss
 });
 
-export { DuetAlert, DuetBadge, DuetBreadcrumb, DuetBreadcrumbs, DuetButton, DuetCaption, DuetCard, DuetCheckbox, DuetChoice, DuetChoiceGroup, DuetCollapsible, DuetCookieConsent, DuetDatePicker, DuetDivider, DuetEditableTable, DuetEditableTableButton, DuetEditableTableItem, DuetEmptyState, DuetFieldset, DuetFooter, DuetGrid, DuetGridItem, DuetHeader, DuetHeading, DuetHero, DuetIcon, DuetInput, DuetLabel, DuetLayout, DuetLink, DuetList, DuetListItem, DuetLogo, DuetModal, DuetNotification, DuetNotificationDrawer, DuetNumberInput, DuetParagraph, DuetProgress, DuetRadio, DuetRadioGroup, DuetRangeSlider, DuetScrollable, DuetSelect, DuetSpacer, DuetSpinner, DuetStep, DuetStepper, DuetTab, DuetTabGroup, DuetTable, DuetTextarea, DuetToggle, DuetTooltip, DuetTray, DuetUpload, DuetUploadAriaStatus, DuetVisuallyHidden, defineCustomElements, setAssetPath, setPlatformOptions };
+export { DuetActionButton, DuetAlert, DuetBadge, DuetBreadcrumb, DuetBreadcrumbs, DuetButton, DuetCaption, DuetCard, DuetCheckbox, DuetChoice, DuetChoiceGroup, DuetCollapsible, DuetCookieConsent, DuetDatePicker, DuetDivider, DuetEditableTable, DuetEmptyState, DuetFieldset, DuetFooter, DuetGrid, DuetGridItem, DuetHeader, DuetHeading, DuetHero, DuetIcon, DuetInput, DuetLabel, DuetLayout, DuetLink, DuetList, DuetListItem, DuetLogo, DuetModal, DuetNotification, DuetNotificationDrawer, DuetNumberInput, DuetPagination, DuetParagraph, DuetProgress, DuetRadio, DuetRadioGroup, DuetRangeSlider, DuetRangeStepper, DuetScrollable, DuetSelect, DuetSpacer, DuetSpinner, DuetStep, DuetStepper, DuetTab, DuetTabGroup, DuetTable, DuetTextarea, DuetToggle, DuetTooltip, DuetTray, DuetUpload, DuetUploadAriaStatus, DuetVisuallyHidden, defineCustomElements, setAssetPath, setPlatformOptions };