@duetds/components 5.2.0 → 5.2.3

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.3.9"};
+const Env = /* duet */ {"cdnURILocal":"http://0.0.0.0:3334","cdnURIProd":"https://cdn.duetds.com/api","duetIconVersion":"2.3.12"};
 
 let scopeId;
 let contentRef;
@@ -91,7 +91,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
     let scopeId = getScopeId(cmpMeta);
-    let style = styles.get(scopeId);
+    const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
     styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : doc;
@@ -181,7 +181,7 @@ const h$1 = (nodeName, vnodeData, ...children) => {
     let slotName = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -390,7 +390,7 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             if ((isProp || (isComplex && newValue !== null)) && !isSvg) {
                 try {
                     if (!elm.tagName.includes('-')) {
-                        let n = newValue == null ? '' : newValue;
+                        const n = newValue == null ? '' : newValue;
                         // Workaround for Safari, moving the <input> caret when re-assigning the same valued
                         if (memberName === 'list') {
                             isProp = false;
@@ -467,7 +467,7 @@ const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {
 };
 const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {
     // tslint:disable-next-line: prefer-const
-    let newVNode = newParentVNode.$children$[childIndex];
+    const newVNode = newParentVNode.$children$[childIndex];
     let i = 0;
     let elm;
     let childNode;
@@ -800,7 +800,7 @@ const patch = (oldVNode, newVNode) => {
 };
 const updateFallbackSlotVisibility = (elm) => {
     // tslint:disable-next-line: prefer-const
-    let childNodes = elm.childNodes;
+    const childNodes = elm.childNodes;
     let childNode;
     let i;
     let ilen;
@@ -853,8 +853,8 @@ const relocateSlotContent = (elm) => {
     let relocateNodeData;
     let j;
     let i = 0;
-    let childNodes = elm.childNodes;
-    let ilen = childNodes.length;
+    const childNodes = elm.childNodes;
+    const ilen = childNodes.length;
     for (; i < ilen; i++) {
         childNode = childNodes[i];
         if (childNode['s-sr'] && (node = childNode['s-cr']) && node.parentNode) {
@@ -3267,7 +3267,7 @@ const h = (nodeName, vnodeData, ...children) => {
     let slotName = null;
     let simple = false;
     let lastSimple = false;
-    let vNodeChildren = [];
+    const vNodeChildren = [];
     const walk = (c) => {
         for (let i = 0; i < c.length; i++) {
             child = c[i];
@@ -5931,6 +5931,7 @@ const DuetEditableTable$1 = class extends H {
   render() {
     return (h$1(Host, { class: {
         [`duet-editable-table-${this.variation}`]: true,
+        "duet-editable-table": true,
         [`duet-editable-table-${this.theme}`]: true,
         // sticky only valid when in regular table layout
         "duet-editable-table-scrollable": this.breakpoint === "none-scrollable",
@@ -5938,7 +5939,7 @@ const DuetEditableTable$1 = class extends H {
         "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" }))))))));
+      } }, h$1("duet-table", { class: "duet-editable-table-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 element() { return this; }
   static get style() { return duetEditableTableCss; }
@@ -8926,27 +8927,77 @@ var actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"
 
 var actionSubtract={"title":"action-subtract","tags":"action subtract minus remove delete cancel","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 12.788a.75.75 0 0 1 0-1.5h22.5a.75.75 0 0 1 0 1.5z\"/></svg>"};
 
-const parseLocaleFloat = (str, locale) => {
-  // remove spaces and non-numeric characters
-  // "12 345,67€" -> "12345,67"
-  // "12,345.67€" -> "12,345.67"
-  str = str.replace(/\s+/g, "").replace(/[^0-9\.,]+/g, "");
-  switch (locale) {
-    case "fi-FI":
-    case "sv-SE":
-      // "12345,67" -> "12345.67"
-      str = str.replace(",", ".");
-      break;
-    case "en-US":
-    case "en-GB":
-      // "12,345.67" -> "12345.67"
-      str = str.replace(/,/g, "");
-      break;
-    default:
-      throw new TypeError(`Unrecognised locale: ${locale}`);
-  }
-  return parseFloat(str);
-};
+/**
+ *  function that takes a string value or number and looks for any character resembling a minus,
+ *  it will then replace it with a hypen-minus and return the parseFloat value of that string
+ *  it will string / number cast the value to a number and return that number
+ *  known issues: if a negative number is indicated with other characters than a "minus like" character, it will throw
+ *  - an example is that some locales use (number) as an indicator for negative values instead of -number
+ */
+function SafeParseFloat(value, locale) {
+  let results;
+  if (typeof value === "string") {
+    //the minuses are NOT the same characters, they differ in unicode for some languages
+    // "‐", "−", "–", and "—"
+    let convertedMinus = value.replace("−", "-").replace("‐", "-").replace("−", "-").replace("–", "-").replace("—", "-");
+    if (locale) {
+      convertedMinus = ConvertToEnUS(convertedMinus, locale, false);
+    }
+    // replace all possible spaces from the string
+    convertedMinus = convertedMinus.replace(/\s+/g, "");
+    convertedMinus = convertedMinus.replace(/(?!^-?\d*\.{0,1}\d+$)/g, "");
+    /*
+    example: https://regex101.com/r/np7FqS/1
+      /(?!^-?\d*\.{0,1}\d+$)/g
+      Negative Lookahead (?!^-?\d*\.{0,1}\d+$)
+      Assert that the Regex below does not match
+      ^ asserts position at start of a line
+      - matches the character - with index 4510 (2D16 or 558) literally (case sensitive)
+      ? matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
+      \d matches a digit (equivalent to [0-9])
+      * matches the previous token between zero and unlimited times, as many times as possible, giving back as needed (greedy)
+      \. matches the character . with index 4610 (2E16 or 568) literally (case sensitive)
+      {0,1} matches the previous token between zero and one times, as many times as possible, giving back as needed (greedy)
+      \d matches a digit (equivalent to [0-9])
+      + matches the previous token between one and unlimited times, as many times as possible, giving back as needed (greedy)
+      $ asserts position at the end of a line
+      Global pattern flags
+      g modifier: global. All matches (don't return after first match)
+      m modifier: multi line. Causes ^ and $ to match the begin/end of each line (not only begin/end of string)
+    */
+    results = parseFloat(convertedMinus);
+  }
+  if (typeof value === "number") {
+    results = parseFloat(String(value));
+  }
+  if (!isNaN(Number(results))) {
+    return Number(results);
+  }
+  if (value === null || value === undefined) {
+    return null;
+  }
+  throw new Error("Invalid value passed to SafeParseFloat");
+}
+// string conversion function that takes a locale and coverts decimal indicator to en-US indicator
+// and takes the thousand separator for the given locale and transforms that to the en-US separator
+function ConvertToEnUS(value, locale, replaceThousands = false) {
+  let replacedValue;
+  const localeSeparator = new Intl.NumberFormat(locale).format(1 / 2).replace(/[0-9]/g, "");
+  const enUSSeparator = new Intl.NumberFormat("en-US").format(1 / 2).replace(/[0-9]/g, "");
+  const thousandSeparator = new Intl.NumberFormat(locale).format(1000).replace(/[0-9]/g, "");
+  const enUSThousandSeparator = new Intl.NumberFormat("en-US").format(1000).replace(/[0-9]/g, "");
+  // double conversions to avoid ,->. and .->, at the same time resulting in a double conversion
+  replacedValue = value.replace(localeSeparator, "DECIMALSEPARATOR");
+  if (replaceThousands) {
+    replacedValue = replacedValue.replace(thousandSeparator, "THOUSANDSEPARATOR");
+  }
+  else {
+    replacedValue = replacedValue.replace(thousandSeparator, "");
+  }
+  replacedValue = replacedValue.replace("DECIMALSEPARATOR", enUSSeparator);
+  replacedValue = replacedValue.replace("THOUSANDSEPARATOR", enUSThousandSeparator);
+  return replacedValue;
+}
 const roundTo = (val, multiple) => Math.round(val / multiple) * multiple;
 const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
 
@@ -9123,7 +9174,7 @@ const DuetNumberInput$1 = class extends H {
     this.handleChange = (ev) => {
       const input = ev.target;
       if (input && input.value) {
-        let value = this.cleanValue(input.value);
+        let value = SafeParseFloat(input.value, this.locale);
         // Make sure that everything works if the user clears the input and
         // starts typing non-numeric characters.
         if (isNaN(value) || value == null) {
@@ -9133,7 +9184,7 @@ const DuetNumberInput$1 = class extends H {
         this.duetInput.emit({
           component: "duet-number-input",
           originalEvent: ev,
-          value: this.cleanValue(this.value).toString(),
+          value: SafeParseFloat(this.value, this.locale).toString(),
           valueAsNumber: value,
         });
       }
@@ -9154,30 +9205,29 @@ const DuetNumberInput$1 = class extends H {
       if (input.value) {
         // On blur we want to make sure that the user input is between the min and max values,
         // and also round it up or down to the nearest step.
-        let value = this.cleanValue(input.value);
+        let value = SafeParseFloat(input.value, this.locale);
         if (this.rounding) {
           value = roundTo(value, this.step);
         }
         value = clamp(value, this.min, this.max);
-        if (value !== this.cleanValue(this.value) || value !== this.cleanValue(this.focusedValue)) {
+        if (value !== SafeParseFloat(this.value, this.locale) ||
+          value !== SafeParseFloat(this.focusedValue, this.locale)) {
           this.setValue(value);
           this.emitChange(ev);
         }
       }
-      else {
-        this.duetChange.emit({
-          originalEvent: ev,
-          value: null,
-          valueAsNumber: null,
-          component: "duet-number-input",
-        });
-      }
+      this.duetChange.emit({
+        originalEvent: ev,
+        value: null,
+        valueAsNumber: null,
+        component: "duet-number-input",
+      });
     };
     /**
      * Local methods.
      */
     this.emitChange = (ev) => {
-      const currentValue = this.cleanValue(this.value);
+      const currentValue = SafeParseFloat(this.value, this.locale);
       this.duetChange.emit({
         originalEvent: ev,
         value: currentValue.toString(),
@@ -9185,10 +9235,6 @@ const DuetNumberInput$1 = class extends H {
         component: "duet-number-input",
       });
     };
-    this.cleanValue = (value) => {
-      // Returns a number that can be used in calculations.
-      return value ? parseLocaleFloat(value, this.locale) : null;
-    };
     this.localizeValue = (value) => {
       // Returns a localized string that can be used as input value.
       return value.toLocaleString(this.locale);
@@ -9205,13 +9251,13 @@ const DuetNumberInput$1 = class extends H {
       if (ev) {
         ev.preventDefault();
       }
-      const currentValue = this.cleanValue(this.value);
+      const cleanedValue = SafeParseFloat(this.value, this.locale);
       // Only fire change event when necessary
-      if (currentValue === this.max) {
+      if (cleanedValue === this.max) {
         return;
       }
       // in cases where no value set, incrementing should go to min
-      let newValue = currentValue == null ? this.min : currentValue + this.step;
+      let newValue = cleanedValue == null ? this.min : cleanedValue + this.step;
       // handle cases where value is not multiple of step
       // e.g. if someone enters 199, with a step of 100, add should go to 200
       // and if someone enters 101, add should also go to 200
@@ -9219,8 +9265,8 @@ const DuetNumberInput$1 = class extends H {
         const adjustment = newValue % this.step;
         newValue -= adjustment;
       }
-      newValue = clamp(newValue, this.min, this.max);
-      this.value = this.localizeValue(newValue);
+      const clampedValue = clamp(newValue, this.min, this.max);
+      this.value = this.localizeValue(clampedValue);
       this.emitChange(ev);
     };
     this.subtract = (ev) => {
@@ -9229,7 +9275,7 @@ const DuetNumberInput$1 = class extends H {
       if (ev) {
         ev.preventDefault();
       }
-      const currentValue = this.cleanValue(this.value);
+      const currentValue = SafeParseFloat(this.value, this.locale);
       // Only fire change event when necessary.
       if (currentValue === this.min) {
         return;
@@ -9254,7 +9300,7 @@ const DuetNumberInput$1 = class extends H {
     inheritGlobalTheme(this);
     // Format the number value to a localeString initially.
     if (this.value) {
-      this.value = this.localizeValue(parseLocaleFloat(this.value, this.locale));
+      this.value = this.localizeValue(SafeParseFloat(this.value, this.locale));
     }
   }
   /**
@@ -9269,7 +9315,7 @@ const DuetNumberInput$1 = class extends H {
     this.duetInputElement.value = "";
   }
   formatAnnouncement() {
-    const current = this.cleanValue(this.value);
+    const current = SafeParseFloat(this.value, this.locale);
     if (current == null) {
       return "";
     }
@@ -9282,7 +9328,7 @@ const DuetNumberInput$1 = class extends H {
   render() {
     const identifier = this.identifier || this.inputId;
     const maxlength = `${this.localizeValue(this.max)} ${this.unit}`.length;
-    const cleanedValue = this.cleanValue(this.value);
+    const cleanedValue = SafeParseFloat(this.value, this.locale);
     return (h$1(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-expand": this.expand,
@@ -9428,6 +9474,7 @@ const DuetPagination$1 = class extends H {
           await this.setFocus();
         }
       }
+      return true;
     };
     //helper to emit relevant page events
     this.emitPageEvent = debounce((ev, passedPage) => {
@@ -9441,7 +9488,7 @@ const DuetPagination$1 = class extends H {
         type: "page",
         originalEvent: ev,
       });
-    }, 500);
+    }, 100);
     // this will return the entered number, or the current page if the user presses enter
     this.getEnteredNumber = debounce(ev => {
       this.emitPageEvent(ev, this.numbersStore);
@@ -9459,7 +9506,7 @@ const DuetPagination$1 = class extends H {
     }, 500);
   }
   watchStateHandler(newValue, oldValue) {
-    this.actionChain(newValue, oldValue);
+    return this.actionChain(newValue, oldValue);
   }
   /**
    * Component lifecycle events.
@@ -9487,6 +9534,7 @@ const DuetPagination$1 = class extends H {
     e.preventDefault();
     e.stopPropagation();
     this.current = this.current + dir;
+    this.emitPageEvent(e);
   }
   //handle a11y keyboard navigation events
   async onKeyboardDown(e) {
@@ -9529,8 +9577,9 @@ const DuetPagination$1 = class extends H {
   sectionClickHandler(e, direction) {
     e.preventDefault();
     let next = this.internalSectionIndex + direction;
-    if (next >= this.totalPages / this.take) {
-      next = this.totalPages / this.take - 1;
+    const takePerVisibleItems = this.take * this.visibleItems;
+    if (next * takePerVisibleItems > this.total) {
+      next = this.internalSectionIndex;
     }
     const newSection = next;
     this.internalSectionIndex = newSection >= 0 ? newSection : 0;
@@ -9540,12 +9589,14 @@ const DuetPagination$1 = class extends H {
     e.preventDefault();
     this.internalSectionIndex = 0;
     this.current = 1;
+    this.emitPageEvent(e);
   }
   //handles click on the jump (total) button
   jumpToEnd(e) {
     e.preventDefault();
-    this.internalSectionIndex = this.totalPages / this.take - 1;
+    this.internalSectionIndex = Math.ceil(this.totalPages / this.take - 1);
     this.current = this.totalPages;
+    this.emitPageEvent(e);
   }
   // render the individual page numbers
   renderPageNumbers() {
@@ -9585,7 +9636,7 @@ const DuetPagination$1 = class extends H {
       }, 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$1, 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$1, 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: {
+      }, 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$1, null, h$1("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-jump" }, h$1("duet-button", { class: "duet-pagination-link duet-pagination-link-jump-back", "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 duet-pagination-link-dots-back", "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.visibleItems + 2) < this.totalPages && this.shouldDisplayNavigation() && (h$1(Fragment$1, null, h$1("li", { class: "duet-pagination-item", role: "menuitem", part: "navigation-section" }, h$1("duet-button", { class: "duet-pagination-link duet-pagination-link-dots-forward", "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 duet-pagination-link-jump-forward", "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 &&
@@ -10216,15 +10267,15 @@ const DuetRangeStepper$1 = class extends H {
       this.handleStepClick(e);
     };
   }
-  watchStateHandler(newValue) {
-    if (newValue === 1) {
+  watchStepIndexStateHandler(newValue) {
+    if (newValue <= 1) {
       this.leftBnRef.setAttribute("disabled", "");
       this.rightBnRef.focus();
     }
     else {
       this.leftBnRef.removeAttribute("disabled");
     }
-    if (newValue === this.total / this.stepSize) {
+    if (newValue >= this.total / this.stepSize) {
       this.rightBnRef.setAttribute("disabled", "");
       this.leftBnRef.focus();
     }
@@ -10232,12 +10283,20 @@ const DuetRangeStepper$1 = class extends H {
       this.rightBnRef.removeAttribute("disabled");
     }
   }
+  watchStepSizeStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      if (this.stepIndex * newValue > this.total) {
+        this.stepIndex = this.total / newValue;
+      }
+    }
+  }
   handleStepClick(e) {
+    const from = this.stepIndex * this.stepSize - this.stepSize;
     this.duetRangeStepUpdate.emit({
       originalEvent: e,
       component: "duet-range-stepper",
-      from: this.stepIndex * this.stepSize - this.stepSize,
-      to: this.stepIndex * this.stepSize,
+      from: from,
+      to: this.getTo(),
       index: this.stepIndex,
     });
   }
@@ -10245,7 +10304,7 @@ const DuetRangeStepper$1 = class extends H {
     inheritGlobalTheme(this);
   }
   componentDidLoad() {
-    this.watchStateHandler(this.stepIndex);
+    this.watchStepIndexStateHandler(this.stepIndex);
   }
   increment(direction) {
     const newIndex = this.stepIndex + direction;
@@ -10253,20 +10312,28 @@ const DuetRangeStepper$1 = class extends H {
       this.stepIndex = 1;
     }
     else {
-      if (newIndex * this.stepSize <= this.total) {
+      if (newIndex * this.stepSize < this.total + this.stepSize) {
         this.stepIndex = newIndex;
       }
+      else if (newIndex * this.stepSize > this.total + this.stepSize) {
+        this.stepIndex = Math.floor(this.total / this.stepSize);
+      }
     }
   }
+  getTo() {
+    const to = this.stepIndex * this.stepSize;
+    const result = to > this.total ? this.total : to;
+    return result;
+  }
   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;
+    let start = Math.floor((this.stepIndex - 1) * this.stepSize);
     //easy fix for starting position
     if (start === 0) {
       start = 1;
     }
-    const end = this.stepIndex * this.stepSize;
+    const end = Math.floor(this.stepIndex * this.stepSize);
     return this.ariaLabels.x_of_y
       .replace("{0}", String(start))
       .replace("{1}", String(end))
@@ -10304,7 +10371,8 @@ const DuetRangeStepper$1 = class extends H {
   }
   get element() { return this; }
   static get watchers() { return {
-    "stepIndex": ["watchStateHandler"]
+    "stepIndex": ["watchStepIndexStateHandler"],
+    "stepSize": ["watchStepSizeStateHandler"]
   }; }
   static get style() { return duetRangeStepperCss; }
 };
@@ -11230,7 +11298,7 @@ const 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 .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}";
+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 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)}.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}.duet-editable-table-table.duet-table-flattened tr{display:grid;grid-template-columns:repeat(2, 1fr);grid-auto-rows:auto;gap:10px}.duet-editable-table-table.duet-table-flattened tr.duet-table-action-row td:last-child::before{padding:0;content:\"\"}.duet-editable-table-table.duet-table-flattened td{grid-column:1/2}.duet-editable-table-table.duet-table-flattened td:first-child{grid-row:1;grid-column:1}.duet-editable-table-table.duet-table-flattened td:last-child{grid-row:1;grid-column:2}";
 
 // remove wrapping speech marks.
 // media query tokens are wrapped in speech marks,
@@ -13444,7 +13512,7 @@ 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"],"accessibleDetails":[1,"accessible-details"],"accessibleLabelledBy":[1,"accessible-labelled-by"],"accessibleDescription":[1,"accessible-description"],"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],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleDetails":[1,"accessible-details"],"accessibleLabelledBy":[1,"accessible-labelled-by"],"accessibleDescription":[1,"accessible-description"],"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 DuetPagination = /*@__PURE__*/proxyCustomElement(DuetPagination$1, [1,"duet-pagination",{"theme":[1025],"jumpString":[1,"jump-string"],"variation":[1],"accessibleDescribedBy":[1,"accessible-described-by"],"accessibleDetails":[1,"accessible-details"],"accessibleLabelledBy":[1,"accessible-labelled-by"],"accessibleDescription":[1,"accessible-description"],"accessibleLabelsDefaults":[16],"accessibleLabels":[16],"take":[2],"visibleItems":[2,"visible-items"],"total":[2],"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"],"accessibleDetails":[1,"accessible-details"],"accessibleLabelledBy":[1,"accessible-labelled-by"],"accessibleDescription":[1,"accessible-description"],"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"],"accessibleDetails":[1,"accessible-details"],"accessibleLabelledBy":[1,"accessible-labelled-by"],"accessibleDescription":[1,"accessible-description"],"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]}]);
@@ -13539,7 +13607,7 @@ const defineCustomElements = (opts) => {
 };
 
 /*
- Stencil Client Platform v2.15.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v2.16.0 | MIT Licensed | https://stenciljs.com
  */
 /**
  * @license
@@ -13555,7 +13623,6 @@ const defineCustomElements = (opts) => {
 const safeSelector = (selector) => {
     const placeholders = [];
     let index = 0;
-    let content;
     // Replaces attribute selectors with placeholders.
     // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
     selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
@@ -13566,7 +13633,7 @@ const safeSelector = (selector) => {
     });
     // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
     // WS and "+" would otherwise be interpreted as selector separators.
-    content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+    const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
         const replaceBy = `__ph-${index}__`;
         placeholders.push(exp);
         index++;