@duetds/components 5.1.8 → 5.2.1

package/lib/cjs/duet-number-input.cjs.entry.js

@@ -5,38 +5,88 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 require('./string-utils-5cadd058.js');
 
 var actionAdd={"title":"action-add","tags":"action add plus","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 24a.75.75 0 0 1-.75-.75v-10.5H.75a.75.75 0 0 1 0-1.5h10.5V.75a.75.75 0 0 1 1.5 0v10.5h10.5a.75.75 0 0 1 0 1.5h-10.5v10.5A.75.75 0 0 1 12 24z\"/></svg>"};
 
 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}`);
+/**
+ *  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);
   }
-  return parseFloat(str);
-};
+  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);
 
@@ -65,6 +115,18 @@ const DuetNumberInput = class {
      * Unit for the number input.
      */
     this.unit = languageUtils.getLocale(this.language).money;
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Defaults for accessibleLive
      * @default {fi: "{current} euroa valittuna", en: "{current} euros selected", sv: "{current} valda euro"}
@@ -200,7 +262,7 @@ const DuetNumberInput = class {
     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) {
@@ -210,7 +272,7 @@ const DuetNumberInput = class {
         this.duetInput.emit({
           component: "duet-number-input",
           originalEvent: ev,
-          value: this.cleanValue(this.value).toString(),
+          value: SafeParseFloat(this.value, this.locale).toString(),
           valueAsNumber: value,
         });
       }
@@ -231,30 +293,29 @@ const DuetNumberInput = class {
       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(),
@@ -262,10 +323,6 @@ const DuetNumberInput = class {
         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);
@@ -282,13 +339,13 @@ const DuetNumberInput = class {
       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
@@ -296,8 +353,8 @@ const DuetNumberInput = class {
         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) => {
@@ -306,7 +363,7 @@ const DuetNumberInput = class {
       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;
@@ -331,7 +388,7 @@ const DuetNumberInput = class {
     themeableComponent.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));
     }
   }
   /**
@@ -346,7 +403,7 @@ const DuetNumberInput = class {
     this.duetInputElement.value = "";
   }
   formatAnnouncement() {
-    const current = this.cleanValue(this.value);
+    const current = SafeParseFloat(this.value, this.locale);
     if (current == null) {
       return "";
     }
@@ -359,12 +416,12 @@ const DuetNumberInput = class {
   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 (index.h(index.Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-expand": this.expand,
         "duet-m-0": this.margin === "none",
-      } }, index.h("div", { class: "duet-number-container" }, index.h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, index.h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, index.h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, index.h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), index.h("duet-icon", { icon: actionSubtract.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), index.h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, index.h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), index.h("duet-icon", { icon: actionAdd.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (index.h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
+      } }, index.h("div", { class: "duet-number-container" }, index.h("duet-input", { ref: input => (this.duetInputElement = input), onDuetChange: event => this.handleChange(event), onDuetFocus: this.handleFocus, onDuetBlur: event => this.handleBlur(event), onKeyDown: event => this.handleKeyDown(event), label: this.label, value: this.value ? `${this.value} ${this.unit}` : "", error: this.error, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": cleanedValue != null ? cleanedValue : "", maxlength: maxlength, name: this.name, component: "number", required: this.required, disabled: this.disabled, role: this.role, labelHidden: this.labelHidden, tooltip: this.tooltip, identifier: identifier, theme: this.theme, margin: "none", expand: true, numericKeyboard: true, autoComplete: "off", type: "text", accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleLabelledBy: this.accessibleLabelledBy, accessibleDescription: this.accessibleDescription, accessibleDetails: this.accessibleDetails, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy }, index.h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } }, index.h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue == null || cleanedValue === this.min ? "true" : "false", class: "duet-number-button duet-number-button-subtract", onClick: this.subtract, type: "button" }, index.h("duet-visually-hidden", null, this.accessibleSubtract, " ", this.step), index.h("duet-icon", { icon: actionSubtract.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })), index.h("button", { "aria-controls": identifier, disabled: this.disabled, "aria-disabled": cleanedValue === this.max ? "true" : "false", class: "duet-number-button duet-number-button-add", onClick: this.add, type: "button" }, index.h("duet-visually-hidden", null, this.accessibleAdd, " ", this.step), index.h("duet-icon", { icon: actionAdd.svg, size: "small", margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary" })))), this.accessibleLiveEnabled && (index.h("duet-visually-hidden", { "aria-live": "polite", "aria-atomic": "true", "aria-relevant": "all" }, this.formatAnnouncement())))));
   }
   get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-pagination_2.cjs.entry.js

@@ -5,12 +5,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const jsUtils = require('./js-utils-be1d29ae.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 require('./string-utils-5cadd058.js');
 
 const shouldDisplayNavigation = (visibleItems, total, take) => {
@@ -50,6 +50,22 @@ const DuetPagination = class {
      * Variation of the paginator (compact and default supported)
      */
     this.variation = "default";
+    /**
+     * Described By id
+     */
+    this.accessibleDescribedBy = undefined;
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Default pagination labels
      */
@@ -278,7 +294,7 @@ const DuetPagination = class {
    * Always the last one in the class.
    */
   render() {
-    return (index.h(index.Host, { onKeyDown: e => this.onKeyboardDown(e) }, index.h("nav", { role: "navigation", "aria-labelledby": this.listId, "aria-describedby": this.listId, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
+    return (index.h(index.Host, { onKeyDown: e => this.onKeyboardDown(e) }, index.h("nav", { role: "navigation", "aria-labelledby": this.accessibleLabelledBy ? `${this.accessibleLabelledBy} ${this.listId}` : this.listId, "aria-describedby": this.accessibleDescribedBy ? `${this.accessibleDescribedBy} ${this.listId}` : this.listId, "aria-descriptions": this.accessibleDescription, "aria-details": this.accessibleDetails, ref: el => (this.nativeNav = el), "aria-controls": this.ariaControls, class: {
         "duet-pagination-nav": true,
         [`duet-pagination-variation-${this.variation}`]: true,
       } }, this.numbersStore !== "" && (index.h("div", { "aria-live": "assertive", "aria-relevant": "text", class: "duet-pagination-overlay", "aria-label": `${this.accessibleLabels.jump_to} ${this.numbersStore}`, part: "navigation-overlay" }, index.h("duet-badge", null, "jump to page : ", this.numbersStore))), index.h("ol", { id: this.listId, class: {

package/lib/cjs/duet-progress.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 require('./string-utils-5cadd058.js');
 
 const duetProgressCss = "*,*::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;width:100%;height:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:#f3f9fc;border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:#fcf3f4}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:#0077b3;border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:#c60c30}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:#0077b3;border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-theme-turva .duet-progress progress[value]{color:#c60c30}.duet-progress progress[value]::-webkit-progress-bar{background-color:#f3f9fc;border-radius:0}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-bar{background-color:#fcf3f4}.duet-progress progress[value]::-webkit-progress-value{background-color:#0077b3;background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-theme-turva .duet-progress progress[value]::-webkit-progress-value{background-color:#c60c30}.duet-progress progress[value] ::-moz-progress-bar{background-color:#f3f9fc}.duet-theme-turva .duet-progress progress[value] ::-moz-progress-bar{background-color:#fcf3f4}";
@@ -21,6 +21,18 @@ const DuetProgress = class {
      */
     this.progressId = createId.createID("DuetProgress");
     this.progressLabelId = createId.createID("DuetProgressLabel");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Defaults for accessibleLabel
      */
@@ -66,7 +78,7 @@ const DuetProgress = class {
         "duet-progress-start": this.progress === 0,
         "duet-progress-inprogress": this.progress < 99 && this.progress !== 0,
         "duet-theme-turva": this.theme === "turva",
-      } }, index.h("duet-visually-hidden", null, index.h("label", { htmlFor: this.progressLabelId }, this.progress !== 0 && (index.h("span", null, this.accessibleLabel, ", ", this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))), this.caption && (index.h("div", { class: "duet-progress-caption" }, index.h("span", null, this.caption))), index.h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" }, index.h("div", { class: "progress-bar" }, index.h("span", { style: { width: `${this.progress}%;` } }, "Progress: ", this.progress, "%"))))));
+      } }, index.h("duet-visually-hidden", null, index.h("label", { htmlFor: this.progressLabelId }, this.progress !== 0 && (index.h("span", null, this.accessibleLabel, ", ", this.accessibleLabelUpload[this.progress < 99 ? 1 : 0])))), this.caption && (index.h("div", { class: "duet-progress-caption" }, index.h("span", null, this.caption))), index.h("progress", { id: this.progressLabelId, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: "progressbar", value: this.progress, max: "100", "aria-valuemin": "0", "aria-valuemax": "100" }, index.h("div", { class: "progress-bar" }, index.h("span", { style: { width: `${this.progress}%;` } }, "Progress: ", this.progress, "%"))))));
   }
   get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-radio_2.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 const watchOptions = require('./watch-options-d88afac0.js');
 
 const duetRadioCss = "*.sc-duet-radio,*.sc-duet-radio::after,*.sc-duet-radio::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-radio-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:28px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-radio-h:last-child,.sc-duet-radio-h:last-of-type{margin-right:0 !important}.vertical.sc-duet-radio-h{margin-right:0 !important}.horizontal.sc-duet-radio-h{margin-bottom:0 !important;width:auto}.horizontal.sc-duet-radio-h .duet-label.sc-duet-radio span.sc-duet-radio{max-width:100%}@media (min-width: 48em){.horizontal-responsive.sc-duet-radio-h{margin-right:28px !important;margin-bottom:0 !important;width:auto}.horizontal-responsive.sc-duet-radio-h:last-child,.horizontal-responsive.sc-duet-radio-h:last-of-type{margin-right:0 !important}.horizontal-responsive.sc-duet-radio-h .duet-label.sc-duet-radio span.sc-duet-radio{max-width:100%}}.duet-m-0.sc-duet-radio-h{margin:0 !important}.sc-duet-radio-h:last-child:not(:only-child){margin-right:0 !important;margin-bottom:0 !important}.duet-label.sc-duet-radio{position:relative;z-index:100;display:flex;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:#00294d;cursor:pointer;background:transparent}.duet-theme-turva.sc-duet-radio .duet-label.sc-duet-radio{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-label.sc-duet-radio span.sc-duet-radio{flex-grow:1;font-size:1rem}.duet-label-hidden.sc-duet-radio .duet-label.sc-duet-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-radio-container.sc-duet-radio{position:relative;width:100%;height:100%}.duet-radio.sc-duet-radio{padding:14px !important;position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;cursor:pointer;opacity:0}.duet-radio.sc-duet-radio+label.sc-duet-radio::before{z-index:100;flex-shrink:0;width:20px;height:20px;margin:2px 10px 1px 1px;content:\"\";background:white;border:1px solid #00294d;border-radius:50%}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio+label.sc-duet-radio::before{border-color:#171c3a}.duet-radio.sc-duet-radio:focus+label.sc-duet-radio::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio:focus+label.sc-duet-radio::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-radio.sc-duet-radio:checked+label.sc-duet-radio::after{position:absolute;top:6px;left:5px;z-index:200;flex-shrink:0;width:12px;height:12px;content:\"\";background:#00294d;border-radius:50%}.duet-theme-turva.sc-duet-radio .duet-radio.sc-duet-radio:checked+label.sc-duet-radio::after{background:#171c3a}.duet-radio[disabled].sc-duet-radio{cursor:default}.duet-radio[disabled].sc-duet-radio+label.sc-duet-radio{color:#657787}.duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio+label.sc-duet-radio{color:#747475}.duet-radio[disabled].sc-duet-radio+label.sc-duet-radio::before{border-color:#cfd2d4}.duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio+label.sc-duet-radio::before{border-color:#cfcfd1}.duet-radio[disabled].sc-duet-radio:checked+label.sc-duet-radio::before{border:1px solid #657787}.duet-radio[disabled].sc-duet-radio:checked+label.sc-duet-radio::after{background:#657787}.duet-theme-turva.sc-duet-radio .duet-radio[disabled].sc-duet-radio:checked+label.sc-duet-radio::after{background:#747475;border-color:#747475}";
@@ -22,6 +22,18 @@ const DuetRadio = class {
      * Own Properties.
      */
     this.radioId = createId.createID("DuetRadio");
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Controls the margin of the component.
      */
@@ -110,7 +122,7 @@ const DuetRadio = class {
         horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
         "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
         "duet-m-0": this.margin === "none",
-      } }, index.h("div", { class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, index.h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }), index.h("label", { class: "duet-label", htmlFor: identifier }, index.h("span", null, this.label)))));
+      } }, index.h("div", { class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, index.h("input", { type: "radio", onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, value: this.value, tabindex: this.accessibleIndex, class: { "duet-radio": true, disabled: this.disabled || this.groupDisabled }, checked: this.checked, disabled: this.disabled || this.groupDisabled, required: this.required, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, role: this.role, name: this.name, id: identifier, ref: input => (this.nativeInput = input) }), index.h("label", { class: "duet-label", htmlFor: identifier }, index.h("span", null, this.label)))));
   }
   get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-range-slider.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
 const tokens_module = require('./tokens.module-ef598645.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const isInternetExplorer = require('./is-internet-explorer-91361c56.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 
 const duetRangeSliderCss = "*.sc-duet-range-slider,*.sc-duet-range-slider::after,*.sc-duet-range-slider::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-range-slider-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%;text-align:left;vertical-align:bottom}.sc-duet-range-slider-h:last-child,.sc-duet-range-slider-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-range-slider-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-range-slider-h{width:100% !important}}.duet-m-0.sc-duet-range-slider-h{margin:0 !important}.duet-range-container.sc-duet-range-slider{position:relative;width:100%}.duet-output.sc-duet-range-slider{position:absolute;top:12px;right:0;z-index:200;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;color:#00294d;background:white}.duet-theme-turva.sc-duet-range-slider .duet-output.sc-duet-range-slider{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-range-disabled.sc-duet-range-slider .duet-output.sc-duet-range-slider{color:#909599}.duet-range-disabled.duet-theme-turva.sc-duet-range-slider .duet-output.sc-duet-range-slider{color:#747475}.duet-range.sc-duet-range-slider{position:relative;z-index:100;width:100%;height:4px;background:#cfd2d4;border-radius:4px}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider{background:#cfcfd1}.duet-ie.sc-duet-range-slider .duet-range.sc-duet-range-slider{display:block;width:auto;height:26px;background:transparent !important}.duet-range.sc-duet-range-slider::-moz-range-track{height:1px;background:transparent !important;border:0;-moz-appearance:none}.duet-range.sc-duet-range-slider::-ms-track{color:transparent;background:transparent;border:0}.duet-range.sc-duet-range-slider:focus,.duet-range.sc-duet-range-slider:active{outline:0}.user-is-tabbing.sc-duet-range-slider-h .duet-range.sc-duet-range-slider:focus{box-shadow:0 0 0 1px white, 0 0 0 3px rgba(0, 119, 179, 0.75)}.user-is-tabbing.sc-duet-range-slider-h .duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:focus{box-shadow:0 0 0 1px white, 0 0 0 3px #171c3a}.duet-range.sc-duet-range-slider::-webkit-slider-runnable-track{background:transparent}.duet-range.sc-duet-range-slider::-webkit-slider-thumb{position:relative;width:24px;height:24px;cursor:-webkit-grab;background:white;border:1px solid #909599;border-radius:50%;transition:box-shadow 300ms ease;-webkit-appearance:none}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-webkit-slider-thumb{border-color:#747475}.duet-range.sc-duet-range-slider:active::-webkit-slider-thumb{cursor:-webkit-grabbing}.duet-range.sc-duet-range-slider::-moz-range-thumb{position:relative;width:24px;height:24px;cursor:-moz-grab;background:white;border:1px solid #909599;border-radius:50%;appearance:none}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-moz-range-thumb{border-color:#747475}.duet-range.sc-duet-range-slider:active::-moz-range-thumb{cursor:-moz-grabbing}.duet-range.sc-duet-range-slider::-ms-thumb{position:relative;width:24px;height:24px;overflow:visible;background:white;border:1px solid #909599;border-radius:50%}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-thumb{border-color:#747475}.duet-range.sc-duet-range-slider:disabled{background:#cfd2d4 !important}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled{background:#cfcfd1 !important}.duet-range.sc-duet-range-slider:disabled::-webkit-slider-thumb{cursor:default;background:#cfd2d4;border-color:transparent}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled::-webkit-slider-thumb{background:#cfcfd1;border-color:transparent}.duet-range.sc-duet-range-slider:disabled::-moz-range-thumb{cursor:default;background:#cfd2d4;border-color:transparent}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled::-moz-range-thumb{background:#cfcfd1;border-color:transparent}.duet-range.sc-duet-range-slider:disabled::-ms-thumb{cursor:default;background:#cfd2d4;border-color:transparent}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider:disabled::-ms-thumb{background:#cfcfd1;border-color:transparent}.duet-range.sc-duet-range-slider::-ms-fill-lower{height:4px;background:#0077b3}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-lower{background:#c60c30}.duet-range.sc-duet-range-slider::-ms-fill-upper{height:4px;background:#cfd2d4}.duet-theme-turva.sc-duet-range-slider .duet-range.sc-duet-range-slider::-ms-fill-upper{background:#cfcfd1}.duet-label-hidden.sc-duet-range-slider duet-label.sc-duet-range-slider,.duet-label-hidden.sc-duet-range-slider output.sc-duet-range-slider{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
 

package/lib/cjs/duet-scrollable_3.cjs.entry.js

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const languageUtils = require('./language-utils-4f62a7db.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');

package/lib/cjs/duet-select.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const stringUtils = require('./string-utils-5cadd058.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 
 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}";
 

package/lib/cjs/duet-step_2.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const keyboardUtils = require('./keyboard-utils-bb32119b.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 
 var actionEdit2={"title":"action-edit-2","tags":"action edit 2 pen pencil","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.748 24a.755.755 0 0 1-.531-.22.754.754 0 0 1-.196-.716l1.77-6.905a.84.84 0 0 1 .045-.121.73.73 0 0 1 .151-.223L16.513 1.289A4.355 4.355 0 0 1 19.611 0c1.178 0 2.277.454 3.106 1.279l.029.029a4.367 4.367 0 0 1 1.251 3.121 4.356 4.356 0 0 1-1.32 3.087L8.183 22.01a.735.735 0 0 1-.231.154.784.784 0 0 1-.111.042L.933 23.978A.773.773 0 0 1 .748 24zm1.041-1.791 4.41-1.131-3.281-3.275zm5.868-1.795 13.02-13.02-4.074-4.074L3.58 16.344zM21.736 6.332a2.893 2.893 0 0 0-.059-3.972l-.02-.02a2.872 2.872 0 0 0-2.037-.84v-.375l-.001.375a2.873 2.873 0 0 0-1.954.762z\"/></svg>"};
 

package/lib/cjs/duet-textarea.cjs.entry.js

@@ -5,10 +5,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
 const inputUtils = require('./input-utils-b5e8f524.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 
 const duetTextareaCss = "*.sc-duet-textarea,*.sc-duet-textarea::after,*.sc-duet-textarea::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-textarea-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:block;width:100%;max-width:100%;text-align:left}.sc-duet-textarea-h:last-child,.sc-duet-textarea-h:last-of-type{margin-right:0 !important}@media (min-width: 36em){.sc-duet-textarea-h{width:calc(50% - 16px - 3px)}.duet-expand.sc-duet-textarea-h{width:100% !important}}.duet-m-0.sc-duet-textarea-h{margin:0 !important}duet-tooltip.sc-duet-textarea{position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip.sc-duet-textarea{position:relative;top:4px;right:auto}}.duet-textarea-container.sc-duet-textarea{position:relative;width:100%;height:100%}.duet-textarea-container.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:none}.duet-textarea-container.duet-input-top-caption-shown.sc-duet-textarea .duet-input-top-caption.sc-duet-textarea{display:flex !important}.duet-textarea-wrapper.sc-duet-textarea{position:relative}.duet-textarea-placeholder.sc-duet-textarea{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-textarea.sc-duet-textarea{padding:15px !important;position:relative;z-index:100;display:block;width:100%;min-width:8rem;min-height:160px;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.25;color:#00294d;resize:vertical;background:white;border:1px solid #909599;border-radius:4px;transition:150ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea{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}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#de2362 !important}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea{border-color:#e02a0d !important}.duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#657787;opacity:1 !important;transition:color 300ms ease}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-webkit-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-webkit-input-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea::-moz-placeholder{color:#657787;opacity:1 !important}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea::-moz-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus::-moz-placeholder{color:#cfcfd1}.duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#657787}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:-ms-input-placeholder{color:#747475}.duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfd2d4}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus:-ms-input-placeholder{color:#cfcfd1}.duet-textarea[disabled].sc-duet-textarea{color:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#f5f8fa !important}.duet-theme-turva.sc-duet-textarea .duet-textarea[disabled].sc-duet-textarea{color:#747475 !important;background:#f5f5f7 !important;border-color:#f5f5f7 !important}.duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #909599}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #747475}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:hover:not(:disabled){box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:focus{border-color:#0077b3;outline:0;box-shadow:0 0 0 1px #0077b3;transition:none}.duet-theme-turva.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{border-color:#171c3a;box-shadow:0 0 0 1px #171c3a}.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea.sc-duet-textarea:focus{box-shadow:0 0 0 1px #e02a0d}.duet-textarea.sc-duet-textarea:not(:focus):not(:hover):invalid{box-shadow:none}.duet-textarea-help.sc-duet-textarea{font-size:0.875rem;line-height:1.25}.duet-textarea-help.sc-duet-textarea span.sc-duet-textarea{display:block;margin-top:8px}.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#de2362}.duet-theme-turva.has-error.sc-duet-textarea .duet-textarea-help.sc-duet-textarea{color:#e02a0d}.duet-label-hidden.sc-duet-textarea duet-label.sc-duet-textarea{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-character-count.sc-duet-textarea{display:block;margin:8px 0 0 auto}";
 
@@ -41,6 +41,18 @@ const DuetTextarea = class {
      * Controls the margin of the component.
      */
     this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Theme of the textarea.
      */
@@ -184,7 +196,9 @@ const DuetTextarea = class {
         "duet-label-hidden": this.labelHidden,
         "duet-input-top-caption-shown": this.isCaptionVisible,
         "has-error": !!this.error,
-      } }, index.h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (index.h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (index.h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), index.h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (index.h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), index.h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), index.h("duet-grid", { alignment: "stretch" }, index.h("duet-grid-item", { margin: "none", fill: true }, index.h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && index.h("span", null, this.error))), index.h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (index.h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
+      } }, index.h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", class: { "duet-has-tooltip": !!this.tooltip }, margin: this.isCaptionVisible ? "small" : "auto", id: this.labelId, for: identifier }, this.label), this.tooltip && (index.h("duet-tooltip", { direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), this.caption && (index.h("duet-caption", { id: this.topCaptionId, size: "medium" }, this.caption)), index.h("div", { class: "duet-textarea-wrapper" }, this.placeholder && this.echoPlaceholder && this.value && (index.h("duet-caption", { id: this.topCaptionPlaceholderId, class: "duet-textarea-placeholder", size: "small" }, this.placeholder)), index.h("textarea", { onInput: this.handleInput, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus, ref: input => (this.nativeInput = input), class: { "duet-textarea": true, disabled: this.disabled }, value: this.value, disabled: this.disabled, "aria-labelledby": this.accessibleLabelledBy
+        ? `${this.labelId} ${this.errorId} ${this.accessibleLabelledBy}`
+        : `${this.labelId} ${this.errorId} `, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": `${this.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, placeholder: this.placeholder, spellcheck: "false", required: this.required, minlength: this.minlength, maxlength: this.maxlength, role: this.role, name: this.name, id: identifier })), index.h("duet-grid", { alignment: "stretch" }, index.h("duet-grid-item", { margin: "none", fill: true }, index.h("div", { class: "duet-textarea-help", id: this.errorId, "aria-live": "assertive", "aria-relevant": "additions removals" }, this.error && index.h("span", null, this.error))), index.h("duet-grid-item", { margin: "none", class: "duet-character-count-caption" }, this.counter && (index.h(CharacterCount, { theme: this.theme, value: this.value, maxlength: this.maxlength, label: this.counterLabel })))))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {

package/lib/cjs/duet-toggle.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-cfea8a15.js');
+const index = require('./index-3024eb44.js');
+const themeableComponent = require('./themeable-component-fdeaef9f.js');
 const createId = require('./create-id-c3b984b1.js');
-const themeableComponent = require('./themeable-component-940d3b50.js');
 
 const duetToggleCss = "*.sc-duet-toggle,*.sc-duet-toggle::after,*.sc-duet-toggle::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-toggle-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:8px !important;margin-bottom:12px !important;-webkit-user-select:none;user-select:none;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}.sc-duet-toggle-h:last-child,.sc-duet-toggle-h:last-of-type{margin-right:0 !important}.duet-m-0.sc-duet-toggle-h{margin:0 !important}duet-label.sc-duet-toggle{display:block !important;width:100% !important}.duet-switch.sc-duet-toggle{position:relative;display:block;width:48px;height:28px}.duet-switch.sc-duet-toggle input.sc-duet-toggle{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-switch.sc-duet-toggle input.sc-duet-toggle:checked+.duet-slider.sc-duet-toggle{background-color:#0077b3;box-shadow:none}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:checked+.duet-slider.sc-duet-toggle{background-color:#c60c30}.duet-switch.sc-duet-toggle input.sc-duet-toggle:checked+.duet-slider.sc-duet-toggle::before{background-color:white;box-shadow:none;transform:translateX(20px)}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled+.duet-slider.sc-duet-toggle{cursor:default}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle{box-shadow:inset 0 0 0 1px #cfd2d4}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle{box-shadow:inset 0 0 0 1px #cfcfd1}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle::before{background:#cfd2d4}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:not(:checked)+.duet-slider.sc-duet-toggle::before{background:#cfcfd1}.duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:checked+.duet-slider.sc-duet-toggle{background:#cfd2d4}.duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:disabled:checked+.duet-slider.sc-duet-toggle{background:#cfcfd1}.user-is-tabbing.sc-duet-toggle-h .duet-switch.sc-duet-toggle input.sc-duet-toggle:focus+.duet-slider.sc-duet-toggle{box-shadow:0 0 0 1px white, 0 0 0 3px rgba(0, 119, 179, 0.75)}.user-is-tabbing.sc-duet-toggle-h .duet-theme-turva.sc-duet-toggle .duet-switch.sc-duet-toggle input.sc-duet-toggle:focus+.duet-slider.sc-duet-toggle{box-shadow:0 0 0 1px white, 0 0 0 3px #171c3a}.duet-slider.sc-duet-toggle{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer;background-color:white;border-radius:20px;box-shadow:inset 0 0 0 1px #00294d;transition:background-color 300ms ease}.duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle{box-shadow:inset 0 0 0 1px #171c3a}.duet-slider.sc-duet-toggle::before{position:absolute;bottom:4px;left:4px;width:20px;height:20px;content:\"\";background-color:#00294d;border-radius:50%;transition:300ms ease}.duet-theme-turva.sc-duet-toggle .duet-slider.sc-duet-toggle::before{background-color:#171c3a}";
 
@@ -27,6 +27,18 @@ const DuetToggle = class {
      * Controls the margin of the component.
      */
     this.margin = "auto";
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Label for the toggle.
      */
@@ -88,7 +100,7 @@ const DuetToggle = class {
     return (index.h(index.Host, { onClick: this.disabled ? undefined : this.onClick, class: { "duet-m-0": this.margin === "none" } }, index.h("div", { class: {
         "duet-toggle": true,
         "duet-theme-turva": this.theme === "turva",
-      } }, index.h("duet-label", { theme: this.theme, for: identifier }, this.label), index.h("label", { class: "duet-switch", htmlFor: identifier }, index.h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), index.h("div", { class: "duet-slider" })))));
+      } }, index.h("duet-label", { theme: this.theme, for: identifier }, this.label), index.h("label", { class: "duet-switch", htmlFor: identifier }, index.h("input", { type: "checkbox", value: this.value, "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.accessibleDescribedBy, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, id: identifier, role: this.role, name: this.name, checked: this.checked, required: this.required, disabled: this.disabled, ref: input => (this.nativeInput = input) }), index.h("div", { class: "duet-slider" })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {