@duetds/components 5.1.8 → 5.2.1

package/lib/collection/components/duet-footer/duet-footer.js

@@ -8,9 +8,9 @@ import newWindowIcon from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIconSmall from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, Fragment, h, Prop, State, Watch } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const i18n = {
   fi: { lahi: "© LähiTapiola", turva: "© Turva" },
   sv: { lahi: "© LokalTapiola", turva: "© Turva" },

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, h, Host, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetGridItem {
   constructor() {
     /**

package/lib/collection/components/duet-header/duet-header.css

@@ -292,11 +292,11 @@
 }
 @media (min-width: 62em) {
   .duet-header-items .duet-header-item {
+    font-weight: 600;
     border-radius: 4px;
   }
 }
 .duet-theme-turva .duet-header-items .duet-header-item {
-  font-weight: 600;
   color: #171c3a;
   border-color: #e1e3e6;
 }

package/lib/collection/components/duet-header/duet-header.js

@@ -11,10 +11,10 @@ import { media_query_large } from "@duetds/tokens/lib/tokens.json";
 import { Build, Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { DuetHeaderDropdown } from "./duet-header-dropdown";
 import { DuetHeaderHamburger } from "./duet-header-hamburger";
 import { DuetHeaderIcon } from "./duet-header-icon";

package/lib/collection/components/duet-heading/duet-heading.css

@@ -127,6 +127,9 @@
     font-size: 2.25rem;
   }
 }
+.duet-heading.h2.duet-theme-turva {
+  font-style: normal;
+}
 @media (max-width: 22.5em) {
   .duet-heading.h2 {
     font-size: 1.375rem;

package/lib/collection/components/duet-heading/duet-heading.js

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { sanitizeString } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 export class DuetHeading {
   constructor() {

package/lib/collection/components/duet-hero/duet-hero.js

@@ -4,9 +4,9 @@
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Component, Element, Event, h, Prop, State, Watch } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot default - This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
  * @slot badge - This is a slot for a status badge that sits next to pre-heading inside the hero component.

package/lib/collection/components/duet-icon/duet-icon.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Build, Component, Element, h, Host, Prop, State, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
 import { buildIconUrl, fetchIconByUrl } from "./icon-utils";
 export class DuetIcon {

package/lib/collection/components/duet-input/duet-input.js

@@ -4,11 +4,11 @@
 import emailIcon from "@duetds/icons/lib/assets/form-email";
 import searchIcon from "@duetds/icons/lib/assets/form-search";
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { cleanValue, resetCursor } from "../../utils/input-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const icons = {
   search: searchIcon,
   email: emailIcon,
@@ -31,13 +31,25 @@ export class DuetInput {
       sv: "Rensa",
     });
     /**
-     * Indicates the id of a component that describes the input.
+     * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
      */
     this.accessibleDescribedBy = "";
     /**
      * Indicates value of any popup element associated with the input.
      */
     this.accessibleHasPopup = undefined;
+    /**
+     * 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;
     /**
      * Set the amount of time, in milliseconds, to wait to trigger the duetChange
      * event after each keystroke.
@@ -290,7 +302,9 @@ export class DuetInput {
               disabled: this.disabled,
               "is-number": this.component === "number",
               "is-date": this.component === "date",
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "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-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
           !this.icon &&
             this.type !== "text" &&
             this.type !== "tel" &&
@@ -412,7 +426,7 @@ export class DuetInput {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the id of a component that describes the input."
+        "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
       },
       "attribute": "accessible-described-by",
       "reflect": false,
@@ -436,6 +450,60 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "undefined"
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "debounce": {
       "type": "number",
       "mutable": false,

package/lib/collection/components/duet-label/duet-label.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, h, Host, Prop } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetLabel {
   constructor() {
     /**

package/lib/collection/components/duet-link/duet-link.js

@@ -4,8 +4,8 @@
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Component, Fragment, h, Host, Method, Prop } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @part duet-link - piercing selector for styling the link
  */

package/lib/collection/components/duet-list/duet-list.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { watchForOptions } from "../../utils/watch-options";
 export class DuetList {
   constructor() {

package/lib/collection/components/duet-logo/duet-logo.js

@@ -3,9 +3,9 @@
  */
 import { colorBrandBlue, colorBrandGrayTurva, colorGrayLightest, colorPrimaryTurva } from "@duetds/tokens";
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { getLanguage } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const TurvaLogo = ({ inverse, logoId }) => {
   const logoColor = inverse ? colorGrayLightest : colorBrandGrayTurva;
   const textColor = inverse ? colorGrayLightest : colorPrimaryTurva;

package/lib/collection/components/duet-modal/duet-modal.js

@@ -3,11 +3,11 @@
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { focusElement, FocusGuard } from "../../utils/focus-utils";
 import { isEscapeKey } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 // The transition below is slightly higher than the actual CSS transition as VoiceOver on
 // iOS has otherwise problems moving the focus from modal back to the original element.
 // This issue is similar to what we’ve seen in Duet Date Picker + iOS VoiceOver.
@@ -71,6 +71,14 @@ export class DuetModal {
      * Size of the modal window.
      */
     this.size = "medium";
+    /**
+     * Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
     /**
      * Size of the modal window.
      */
@@ -212,7 +220,7 @@ export class DuetModal {
       iconColor = "primary-turva";
       closeColor = "secondary-turva";
     }
-    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-describedby": this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
+    return (h("div", { ref: modal => (this.modalEl = modal), "aria-labelledby": this.heading ? this.modalId : false, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-describedby": this.accessibleDescribedBy ? `${this.slotDefaultId} ${this.accessibleDescribedBy}` : this.slotDefaultId, role: "dialog", "aria-modal": this.isSafariBrowser ? false : true, tabindex: "-1", "aria-flowto": this.slotDefaultId, class: {
         "duet-modal-overlay": true,
         "duet-theme-turva": this.theme === "turva",
         "duet-modal-active": this.open,
@@ -356,6 +364,76 @@ export class DuetModal {
       "reflect": false,
       "defaultValue": "\"medium\""
     },
+    "accessibleDescribedBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id or a string of space seperated ids of a component(s) that describes the input."
+      },
+      "attribute": "accessible-described-by",
+      "reflect": false
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates the id or a string of space seperated ids of a component(s) that labels the input."
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false
+    },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "gutterSize": {
       "type": "string",
       "mutable": false,

package/lib/collection/components/duet-notification/duet-notification.js

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import { Component, Element, h, Method, Prop } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetNotification {
   constructor() {
     /**

package/lib/collection/components/duet-notification-drawer/duet-notification-drawer.js

@@ -3,8 +3,8 @@
  */
 import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import { Component, Element, h, Listen, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common/themeable-component";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
 const ESC_KEY = 27;
 export class DuetNotificationDrawer {
   constructor() {

package/lib/collection/components/duet-number-input/duet-number-input.js

@@ -4,11 +4,11 @@
 import addIcon from "@duetds/icons/lib/assets/action-add";
 import subtractIcon from "@duetds/icons/lib/assets/action-subtract";
 import { Component, Element, Event, h, Host, Method, Prop, State } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isBackspaceKey, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocale, getLocaleString } from "../../utils/language-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { clamp, parseLocaleFloat, roundTo } from "./number-input-utils";
+import { clamp, roundTo, SafeParseFloat } from "../../utils/math.utils";
 export class DuetNumberInput {
   constructor() {
     this.inputId = createID("DuetInput");
@@ -27,6 +27,18 @@ export class DuetNumberInput {
      * Unit for the number input.
      */
     this.unit = 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"}
@@ -162,7 +174,7 @@ export class DuetNumberInput {
     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) {
@@ -172,7 +184,7 @@ export class DuetNumberInput {
         this.duetInput.emit({
           component: "duet-number-input",
           originalEvent: ev,
-          value: this.cleanValue(this.value).toString(),
+          value: SafeParseFloat(this.value, this.locale).toString(),
           valueAsNumber: value,
         });
       }
@@ -193,30 +205,29 @@ export class DuetNumberInput {
       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(),
@@ -224,10 +235,6 @@ export class DuetNumberInput {
         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);
@@ -244,13 +251,13 @@ export class DuetNumberInput {
       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
@@ -258,8 +265,8 @@ export class DuetNumberInput {
         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) => {
@@ -268,7 +275,7 @@ export class DuetNumberInput {
       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;
@@ -293,7 +300,7 @@ export class DuetNumberInput {
     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));
     }
   }
   /**
@@ -308,7 +315,7 @@ export class DuetNumberInput {
     this.duetInputElement.value = "";
   }
   formatAnnouncement() {
-    const current = this.cleanValue(this.value);
+    const current = SafeParseFloat(this.value, this.locale);
     if (current == null) {
       return "";
     }
@@ -321,14 +328,14 @@ export class DuetNumberInput {
   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(Host, { class: {
         "duet-theme-turva": this.theme === "turva",
         "duet-expand": this.expand,
         "duet-m-0": this.margin === "none",
       } },
       h("div", { class: "duet-number-container" },
-        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 },
+        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 },
           h("div", { class: { "duet-number-buttons": true, "duet-no-label": this.labelHidden } },
             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" },
               h("duet-visually-hidden", null,
@@ -457,6 +464,60 @@ export class DuetNumberInput {
       "attribute": "accessible-controls",
       "reflect": false
     },
+    "accessibleDetails": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Details of the component"
+      },
+      "attribute": "accessible-details",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleLabelledBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "String of id's that indicate alternative labels elements"
+      },
+      "attribute": "accessible-labelled-by",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Aria description the button"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "accessibleOwns": {
       "type": "string",
       "mutable": false,