@duetds/components 5.1.9 → 5.2.2

package/lib/types/components/duet-button/duet-button.d.ts

@@ -1,15 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, FormComponent, ThemeableComponent } from "../../common";
 import { DuetColor, DuetIconName, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
-import { FormComponent } from "../../utils/form-components";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetButtonVariation = "default" | "primary" | "secondary" | "negative" | "destructive" | "destructive-primary" | "destructive-secondary" | "plain" | "input-button-primary" | "input-button-secondary";
 export declare type DuetButtonNegative = true | false | undefined;
 export declare type DuetButtonWrapping = "auto" | "none";
 export declare type DuetButtonTextCentering = true | false | undefined;
 export declare type DuetButtonIconSize = "small" | "medium-small" | "medium" | "large";
 export declare type DuetButtonSize = "small" | "medium";
-export declare class DuetButton implements ThemeableComponent, FormComponent {
+export declare class DuetButton implements ThemeableComponent, FormComponent, A11yComponent {
   /**
    * Own Properties
    */
@@ -46,6 +45,18 @@ export declare class DuetButton implements ThemeableComponent, FormComponent {
    * Indicates the id of a component that describes the button.
    */
   accessibleDescribedBy: string;
+  /**
+   * Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * If a button expands or collapses adjacent content, then use the ariaExpanded
    * prop to add the aria-expanded attribute to the button. Set the value to convey

package/lib/types/components/duet-caption/duet-caption.d.ts

@@ -1,5 +1,5 @@
 import { DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetCaptionSize = "small" | "medium";
 export declare class DuetCaption implements ThemeableComponent {
   /**

package/lib/types/components/duet-card/duet-card.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { ThemeableComponent } from "../../common";
 import { DuetColor, DuetHeadingLevel, DuetIconName, DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetCardVariation = "default" | "info" | "plain";
 export declare type DuetCardPadding = "x-large" | "large" | "medium" | "small" | "x-small" | "none";
 export declare type DuetCardToggleEvent = {

package/lib/types/components/duet-checkbox/duet-checkbox.d.ts

@@ -1,14 +1,13 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetMargin, DuetTheme } from "../../common-types";
-import { InputComponent } from "../../utils/form-components";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetCheckboxEvent = {
   originalEvent?: Event;
   checked: boolean;
   value: string;
   component: "duet-checkbox";
 };
-export declare class DuetCheckbox implements ThemeableComponent, InputComponent {
+export declare class DuetCheckbox implements ThemeableComponent, InputComponent, A11yComponent {
   /**
    * Own Properties.
    */
@@ -44,6 +43,18 @@ export declare class DuetCheckbox implements ThemeableComponent, InputComponent
    * Indicates the id of a component that describes the checkbox.
    */
   accessibleDescribedBy: string;
+  /**
+   * Aria Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Set whether the input is required or not. Please note that this is required for
    * accessible inputs when the user is required to fill them. When using this property

package/lib/types/components/duet-choice/duet-choice.d.ts

@@ -1,8 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetDirection, DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
-import { InputComponent } from "../../utils/form-components";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetChoiceEvent = {
   originalEvent?: Event;
   checked: boolean;
@@ -16,7 +15,7 @@ export declare type DuetChoiceType = "radio" | "checkbox";
  * @slot collapsible_header - header that is only added to collapsible element, this header should be used when the components collapsible area contains additional interactive elements (such as form items) and should be user for a short description of the content below it, it is mandatory for good accessibility to use this - and aria-decribe-by will point to it. If you use the collapsible area with simple text - describe-by will point to this area
  * @slot additional - Additional content. Anything inserted into this slot is displayed as additional content under the label and caption
  */
-export declare class DuetChoice implements ThemeableComponent, InputComponent {
+export declare class DuetChoice implements ThemeableComponent, InputComponent, A11yComponent {
   /**
    * Own Properties.
    */
@@ -79,6 +78,18 @@ export declare class DuetChoice implements ThemeableComponent, InputComponent {
    * and can be used as an escape hatch if that behaviour is undesired.
    */
   accessibleDescribedBy: string;
+  /**
+   * Aria Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Additional caption to show inside the label of the choice button.
    */

package/lib/types/components/duet-choice-group/duet-choice-group.d.ts

@@ -1,5 +1,5 @@
 import { DuetDirection, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetChoiceGroup implements ThemeableComponent {
   /**
    * Own Properties.

package/lib/types/components/duet-collapsible/duet-collapsible.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetHeadingLevel, DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetCollapsibleWeight = "semibold" | "normal";
 export declare type DuetCollapsibleHeadingFontSize = "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "xxxx-large" | undefined;
 export declare type DuetCollapsibleToggleEvent = {

package/lib/types/components/duet-combobox/duet-combobox.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetComboboxEvent = {
   originalEvent?: Event;
   component: "duet-combobox";

package/lib/types/components/duet-cookie-consent/duet-cookie-consent.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetCookieConsentVariation = "default" | "secondary";
 export declare type DuetCookieConsentEvent = {
   component: "duet-cookie-consent";

package/lib/types/components/duet-date-picker/duet-date-picker.d.ts

@@ -1,8 +1,8 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetLanguage, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
-import { InputComponent } from "../../utils/form-components";
+import { InputComponent } from "../../common/form-components";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetDatePickerChangeEvent = {
   component: "duet-date-picker";
   valueAsDate: Date;

package/lib/types/components/duet-divider/duet-divider.d.ts

@@ -1,5 +1,5 @@
 import { DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetDividerMargin = DuetMargin | "small";
 export declare class DuetDivider implements ThemeableComponent {
   /**

package/lib/types/components/duet-editable-table/duet-editable-table.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetMargin, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 import { DuetActionButtonIconSize } from "../duet-action-button/duet-action-button";
 import { DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant } from "../duet-table/duet-table";
 export declare type DuetEditableTableGroupNames = {

package/lib/types/components/duet-empty-state/duet-empty-state.d.ts

@@ -1,5 +1,5 @@
 import { DuetIconName, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetEmptyStateSize = "medium" | "small";
 export declare class DuetEmptyState implements ThemeableComponent {
   /**

package/lib/types/components/duet-fieldset/duet-fieldset.d.ts

@@ -1,5 +1,5 @@
 import { DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot tooltip - Use to place a tooltip alongside the fieldset label.

package/lib/types/components/duet-footer/duet-footer.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetAnalyticsEvent, DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetFooterVariation = "default" | "simple" | "multilevel";
 export declare type DuetFooterItem = {
   label: string;

package/lib/types/components/duet-grid-item/duet-grid-item.d.ts

@@ -1,5 +1,5 @@
 import { DuetGridBreakpoint, DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetGridItem implements ThemeableComponent {
   /**
    * Make the grid item fill the remaining available grid space.

package/lib/types/components/duet-header/duet-header.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetAnalyticsEvent, DuetLanguage, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetHeaderItem = {
   id?: string;
   href: string;

package/lib/types/components/duet-heading/duet-heading.d.ts

@@ -1,5 +1,5 @@
 import { DuetColor, DuetHeadingLevel, DuetMargin, DuetTheme, DuetVisualHeadingLevel } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetHeadingWeight = "auto" | "semibold";
 export declare class DuetHeading implements ThemeableComponent {
   /**

package/lib/types/components/duet-hero/duet-hero.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetAnalyticsEvent, DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetHeroIconSize = "medium" | "large";
 export declare type DuetHeroVariation = "default" | "light" | "gray" | "image" | "minimal";
 export declare type DuetHeroBackData = {

package/lib/types/components/duet-icon/duet-icon.d.ts

@@ -1,5 +1,5 @@
 import { DuetColor, DuetIconName, DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetIconSize = "xxx-small" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "auto";
 export declare class DuetIcon implements ThemeableComponent {
   svgContent: string;

package/lib/types/components/duet-input/duet-input.d.ts

@@ -1,7 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetIconName, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
-import { InputComponent } from "../../utils/form-components";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetInputEvent = {
   originalEvent?: Event;
   value: string;
@@ -10,7 +9,7 @@ export declare type DuetInputEvent = {
 export declare type DuetInputType = "text" | "email" | "password" | "search" | "tel";
 export declare type DuetInputComponentType = "input" | "number" | "date";
 export declare type DuetVariationType = "default" | "button";
-export declare class DuetInput implements ThemeableComponent, InputComponent {
+export declare class DuetInput implements ThemeableComponent, InputComponent, A11yComponent {
   /**
    * Own Properties
    */
@@ -51,13 +50,25 @@ export declare class DuetInput implements ThemeableComponent, InputComponent {
    */
   accessibleExpanded: string;
   /**
-   * 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.
    */
   accessibleDescribedBy: string;
   /**
    * Indicates value of any popup element associated with the input.
    */
   accessibleHasPopup: string;
+  /**
+   * Aria Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Set the amount of time, in milliseconds, to wait to trigger the duetChange
    * event after each keystroke.

package/lib/types/components/duet-label/duet-label.d.ts

@@ -1,5 +1,5 @@
 import { DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetLabelSize = "small" | "medium";
 export declare type DuetLabelMargin = DuetMargin | "small";
 export declare class DuetLabel implements ThemeableComponent {

package/lib/types/components/duet-link/duet-link.d.ts

@@ -1,6 +1,6 @@
 import { DuetLanguage, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 /**
  * @part duet-link - piercing selector for styling the link
  */

package/lib/types/components/duet-list/duet-list.d.ts

@@ -1,5 +1,5 @@
 import { DuetMargin, DuetPadding, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetListVariation = "default" | "striped";
 export declare type DuetListMobileAlignment = "left" | "center";
 export declare type DuetListLabelWidth = "30" | "50" | "70";

package/lib/types/components/duet-logo/duet-logo.d.ts

@@ -1,5 +1,5 @@
 import { DuetLanguage, DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetLogoSize = "medium" | "large";
 export declare class DuetLogo implements ThemeableComponent {
   /**

package/lib/types/components/duet-modal/duet-modal.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, ThemeableComponent } from "../../common";
 import { DuetColor, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetModalSize = "small" | "medium" | "large";
 export declare type DuetModalCloseEvent = {
   originalEvent: Event;
@@ -10,7 +10,7 @@ export declare type DuetModalCloseEvent = {
 /**
  * @slot top - This is a slot that takes any content and will be displayed as the first thing in the hero area (typically an image)
  */
-export declare class DuetModal implements ThemeableComponent {
+export declare class DuetModal implements ThemeableComponent, A11yComponent {
   /**
    * Own Properties.
    */
@@ -55,6 +55,22 @@ export declare class DuetModal implements ThemeableComponent {
    * Size of the modal window.
    */
   size: DuetModalSize;
+  /**
+   * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+   */
+  accessibleDescribedBy: string;
+  /**
+   * Indicates the id or a string of space seperated ids of a component(s) that labels the input.
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Size of the modal window.
    */

package/lib/types/components/duet-notification/duet-notification.d.ts

@@ -1,6 +1,6 @@
 import { DuetLanguage, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare class DuetNotification implements ThemeableComponent {
   private linkElement;
   /**

package/lib/types/components/duet-notification-drawer/duet-notification-drawer.d.ts

@@ -1,6 +1,6 @@
 import { DuetIconName, DuetLanguage, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetNotificationDrawerDirection = "left" | "right";
 export declare class DuetNotificationDrawer implements ThemeableComponent {
   /**

package/lib/types/components/duet-number-input/duet-number-input.d.ts

@@ -1,15 +1,14 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, DuetNumericInput, ThemeableComponent } from "../../common";
 import { DuetLanguage, DuetLocale, DuetMargin, DuetTheme } from "../../common-types";
-import { DuetNumericInput } from "../../utils/form-components";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetNumberInputEvent = {
   originalEvent?: Event;
   component: "duet-number-input";
   value: string;
   valueAsNumber: number;
 };
-export declare class DuetNumberInput implements ThemeableComponent, DuetNumericInput<string> {
+export declare class DuetNumberInput implements ThemeableComponent, DuetNumericInput<string>, A11yComponent {
   /**
    * Own Properties
    */
@@ -48,6 +47,18 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
    * indicate the id of a component controlled by this component.
    */
   accessibleControls: string;
+  /**
+   * Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Indicates the id of a component owned by the input.
    */
@@ -206,7 +217,6 @@ export declare class DuetNumberInput implements ThemeableComponent, DuetNumericI
    * Local methods.
    */
   private emitChange;
-  private cleanValue;
   private localizeValue;
   private clearValue;
   private setValue;

package/lib/types/components/duet-pagination/duet-pagination.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, ThemeableComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetPaginationPageEvent = {
   originalEvent?: Event;
   component: "duet-pagination";
@@ -12,7 +12,7 @@ export declare type DuetPaginationPageEvent = {
   type: "page" | "jump";
 };
 export declare type DuetPaginationVariation = "default" | "compact";
-export declare class DuetPagination implements ThemeableComponent {
+export declare class DuetPagination implements ThemeableComponent, A11yComponent {
   private listId;
   private nativeNav;
   numbersStore: string;
@@ -42,6 +42,22 @@ export declare class DuetPagination implements ThemeableComponent {
    * Variation of the paginator (compact and default supported)
    */
   variation: DuetPaginationVariation;
+  /**
+   * Described By id
+   */
+  accessibleDescribedBy: string;
+  /**
+   * Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Default pagination labels
    */

package/lib/types/components/duet-paragraph/duet-paragraph.d.ts

@@ -1,5 +1,5 @@
 import { DuetColor, DuetMargin, DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetParagraphSize = "small" | "medium";
 export declare type DuetParagraphWeight = "semi-bold" | "bold" | undefined;
 export declare type DuetParagraphVariation = "default" | "intro";

package/lib/types/components/duet-progress/duet-progress.d.ts

@@ -1,13 +1,13 @@
+import { A11yComponent, ThemeableComponent } from "../../common";
 import { DuetTheme } from "../../common-types";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetUploadEvent = {
   originalEvent?: Event;
   data?: Record<string, any>;
   component: "duet-progress";
   scoped: true;
 };
-export declare class DuetProgress implements ThemeableComponent {
+export declare class DuetProgress implements ThemeableComponent, A11yComponent {
   /**
    * Own Properties
    */
@@ -21,6 +21,18 @@ export declare class DuetProgress implements ThemeableComponent {
    * Indicates the id of a component that describes the upload component.
    */
   accessibleDescribedBy: string;
+  /**
+   * Aria Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Indicates the aria-label of the component -
    * this will get combined with an label+uploading when uploading,

package/lib/types/components/duet-radio/duet-radio.d.ts

@@ -1,14 +1,13 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { A11yComponent, InputComponent, ThemeableComponent } from "../../common";
 import { DuetDirection, DuetMargin, DuetTheme } from "../../common-types";
-import { InputComponent } from "../../utils/form-components";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetRadioEvent = {
   originalEvent?: Event;
   checked: boolean;
   value: string;
   component: "duet-radio";
 };
-export declare class DuetRadio implements ThemeableComponent, InputComponent {
+export declare class DuetRadio implements ThemeableComponent, InputComponent, A11yComponent {
   /**
    * Own Properties.
    */
@@ -22,6 +21,18 @@ export declare class DuetRadio implements ThemeableComponent, InputComponent {
    * Indicates the id of a related component’s visually focused element.
    */
   accessibleActiveDescendant: string;
+  /**
+   * Aria Details of the component
+   */
+  accessibleDetails: string;
+  /**
+   * String of id's that indicate alternative labels elements
+   */
+  accessibleLabelledBy: string;
+  /**
+   * Aria description the button
+   */
+  accessibleDescription: string;
   /**
    * Control the tabindex of checkbox. In most cases this should never be used!
    * It exists only for Duet’s internal needs.

package/lib/types/components/duet-radio-group/duet-radio-group.d.ts

@@ -1,5 +1,5 @@
 import { DuetDirection, DuetMargin, DuetTheme, DuetTooltipDirection } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetRadioGroup implements ThemeableComponent {
   /**
    * Own Properties.

package/lib/types/components/duet-range-slider/duet-range-slider.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetLocale, DuetMargin, DuetTheme } from "../../common-types";
-import { DuetNumericInput } from "../../utils/form-components";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { DuetNumericInput } from "../../common/form-components";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare type DuetRangeChangeEvent = {
   originalEvent?: Event;
   component: "duet-range-slider";

package/lib/types/components/duet-range-stepper/duet-range-stepper.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
 import { DuetLangObject } from "../../utils/language-utils";
-import { ThemeableComponent } from "../../utils/themeable-component";
 export declare type DuetRangeStepperUpdateEvent = {
   originalEvent: KeyboardEvent | MouseEvent;
   component: "duet-range-stepper";
@@ -28,12 +28,13 @@ export declare class DuetRangeStepper implements ThemeableComponent {
    * @default 1
    */
   stepIndex: number;
-  watchStateHandler(newValue: number): void;
+  watchStepIndexStateHandler(newValue: number): void;
   /**
    * How big is the step
    * @default 99
    */
   stepSize: number;
+  watchStepSizeStateHandler(newValue: number, oldValue: number): void;
   /**
    * Total of
    * @default undefined
@@ -60,6 +61,7 @@ export declare class DuetRangeStepper implements ThemeableComponent {
   componentDidLoad(): void;
   private handleClick;
   private increment;
+  private getTo;
   private generateStepSize;
   private onKeyboardDown;
   /**

package/lib/types/components/duet-scrollable/duet-scrollable.d.ts

@@ -1,5 +1,5 @@
 import { DuetTheme } from "../../common-types";
-import { ThemeableComponent } from "../../utils/themeable-component";
+import { ThemeableComponent } from "../../common/themeable-component";
 export declare class DuetScrollable implements ThemeableComponent {
   /**
    * Private variables and constants index