@duetds/components 6.7.0 → 6.8.0

package/lib/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel } from "./common-types";
+import { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLinkVariation, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
 import { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
 import { DuetLangObject } from "./utils/language-utils";
 import { DuetAlertEvent } from "./components/duet-alert/duet-alert";
@@ -14,14 +14,12 @@ import { DuetCaptionSize } from "./components/duet-caption/duet-caption";
 import { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card";
 import { DuetBreakpoints } from "./utils/token-utils";
 import { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
-import { DuetChoiceType } from "./components/duet-choice/duet-choice";
-import { DuetChoiceEvent, DuetChoiceType as DuetChoiceType1 } from "./components/duet-choice/duet-choice";
+import { DuetChoiceEvent } from "./components/duet-choice/duet-choice";
 import { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollapsibleWeight } from "./components/duet-collapsible/duet-collapsible";
 import { DuetComboboxEvent, DuetComboboxItem } from "./components/duet-combobox/duet-combobox";
 import { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent";
 import { DuetDatePickerChangeEvent, DuetDatePickerDirection, DuetDatePickerFocusEvent } from "./components/duet-date-picker/duet-date-picker";
 import { DuetDividerMargin } from "./components/duet-divider/duet-divider";
-import { DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant } from "./components/duet-table/duet-table";
 import { DuetEditableTableActions, DuetEditableTableColumns, DuetEditableTableRows, DuetTableMenuEvent, DuetTableToggleEvent } from "./components/duet-editable-table/duet-editable-table";
 import { DuetEmptyStateSize } from "./components/duet-empty-state/duet-empty-state";
 import { DuetFooterAnalyticsEvent, DuetFooterChangeEvent, DuetFooterVariation } from "./components/duet-footer/duet-footer";
@@ -52,15 +50,63 @@ import { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner";
 import { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-step";
 import { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
 import { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
-import { DuetTableBreakpoint as DuetTableBreakpoint1, DuetTableStickyDistance as DuetTableStickyDistance1, DuetTableVariant as DuetTableVariant1 } from "./components/duet-table/duet-table";
 import { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
 import { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
 import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
 import { DuetUploadEvent, DuetUploadTableGroupName, StringMap, XHRInternalMiddleWare } from "./components/duet-upload/duet-upload";
 import { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table";
-import { StatusMessage } from "./components/duet-upload-aria-status/duet-upload-aria-status";
 import { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils";
-import { StatusMessage as StatusMessage1 } from "./components/duet-upload-aria-status/duet-upload-aria-status";
+export { DuetCardHeadingLevel, DuetChoiceGroupBreakpoint, DuetChoiceType, DuetColor, DuetDirection, DuetGridBreakpoint, DuetHeadingLevel, DuetIconName, DuetLanguage, DuetLinkVariation, DuetLocale, DuetMargin, DuetPadding, DuetStatus, DuetTableBreakpoint, DuetTableStickyDistance, DuetTableVariant, DuetTheme, DuetTooltipDirection, DuetVisualHeadingLevel, StatusMessage } from "./common-types";
+export { DuetActionButtonEvent, DuetActionButtonIconSize } from "./components/duet-action-button/duet-action-button";
+export { DuetLangObject } from "./utils/language-utils";
+export { DuetAlertEvent } from "./components/duet-alert/duet-alert";
+export { DuetButtonIconSize, DuetButtonSize, DuetButtonTextCentering, DuetButtonVariation, DuetButtonWrapping } from "./components/duet-button/duet-button";
+export { DuetCaptionSize } from "./components/duet-caption/duet-caption";
+export { DuetCardPadding, DuetCardToggleEvent, DuetCardVariation } from "./components/duet-card/duet-card";
+export { DuetBreakpoints } from "./utils/token-utils";
+export { DuetCheckboxEvent } from "./components/duet-checkbox/duet-checkbox";
+export { DuetChoiceEvent } from "./components/duet-choice/duet-choice";
+export { DuetCollapsibleHeadingFontSize, DuetCollapsibleToggleEvent, DuetCollapsibleWeight } from "./components/duet-collapsible/duet-collapsible";
+export { DuetComboboxEvent, DuetComboboxItem } from "./components/duet-combobox/duet-combobox";
+export { DuetCookieConsentEvent } from "./components/duet-cookie-consent/duet-cookie-consent";
+export { DuetDatePickerChangeEvent, DuetDatePickerDirection, DuetDatePickerFocusEvent } from "./components/duet-date-picker/duet-date-picker";
+export { DuetDividerMargin } from "./components/duet-divider/duet-divider";
+export { DuetEditableTableActions, DuetEditableTableColumns, DuetEditableTableRows, DuetTableMenuEvent, DuetTableToggleEvent } from "./components/duet-editable-table/duet-editable-table";
+export { DuetEmptyStateSize } from "./components/duet-empty-state/duet-empty-state";
+export { DuetFooterAnalyticsEvent, DuetFooterChangeEvent, DuetFooterVariation } from "./components/duet-footer/duet-footer";
+export { DuetGridAlignment, DuetGridDistribution, DuetGridMobileAlignment } from "./components/duet-grid/duet-grid";
+export { DuetHeaderAnalyticsEvent, DuetHeaderChangeEvent, DuetHeaderMobileNavToggleEvent, I18nText } from "./components/duet-header/duet-header";
+export { DuetHeadingWeight } from "./components/duet-heading/duet-heading";
+export { DuetHeroAnalyticsEvent, DuetHeroButtonData, DuetHeroClickEvent, DuetHeroIconSize, DuetHeroVariation } from "./components/duet-hero/duet-hero";
+export { DuetIconSize } from "./components/duet-icon/duet-icon";
+export { DuetInputComponentType, DuetInputEvent, DuetInputType, DuetVariationType } from "./components/duet-input/duet-input";
+export { DuetLabelMargin, DuetLabelSize } from "./components/duet-label/duet-label";
+export { DuetLayoutStickyDistance } from "./components/duet-layout/duet-layout";
+export { DuetListBreakpoint, DuetListLabelWidth, DuetListMobileAlignment, DuetListVariation } from "./components/duet-list/duet-list";
+export { DuetLogoSize } from "./components/duet-logo/duet-logo";
+export { DuetMenuBarChangeEvent } from "./components/duet-menu-bar/duet-menu-bar";
+export { DuetModalCloseEvent, DuetModalSize } from "./components/duet-modal/duet-modal";
+export { DuetMultiselectEvent, DuetMultiselectItem } from "./components/duet-multiselect/duet-multiselect";
+export { DuetNotificationDrawerDirection } from "./components/duet-notification-drawer/duet-notification-drawer";
+export { DuetNumberInputEvent } from "./components/duet-number-input/duet-number-input";
+export { DuetPaginationPageEvent, DuetPaginationVariation } from "./components/duet-pagination/duet-pagination";
+export { DuetParagraphSize, DuetParagraphVariation, DuetParagraphWeight } from "./components/duet-paragraph/duet-paragraph";
+export { DuetRadioEvent } from "./components/duet-radio/duet-radio";
+export { DuetRangeChangeEvent } from "./components/duet-range-slider/duet-range-slider";
+export { DuetRangeStepperUpdateEvent } from "./components/duet-range-stepper/duet-range-stepper";
+export { DuetSelectEvent, DuetSelectItems, DuetSelectVariation } from "./components/duet-select/duet-select";
+export { DuetSlideoutEventDetails } from "./components/duet-slideout/duet-slideout";
+export { DuetSpacerBreakpoint, DuetSpacerSize } from "./components/duet-spacer/duet-spacer";
+export { DuetSpinnerSize } from "./components/duet-spinner/duet-spinner";
+export { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-step";
+export { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
+export { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
+export { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
+export { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
+export { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
+export { DuetUploadEvent, DuetUploadTableGroupName, StringMap, XHRInternalMiddleWare } from "./components/duet-upload/duet-upload";
+export { DuetEditableTableActions as DuetEditableTableActions1 } from "./components/duet-editable-table/duet-editable-table";
+export { DuetUploadErrorCode } from "./components/duet-upload/errorcodes.utils";
 export namespace Components {
     interface DuetActionButton {
         /**
@@ -159,6 +205,9 @@ export namespace Components {
           * Should a button be rendered to dismiss the alert?
          */
         "dismissible": boolean;
+        /**
+          * Hide.
+         */
         "hide": () => Promise<void>;
         /**
           * Icon to display to the left of the content.
@@ -172,6 +221,9 @@ export namespace Components {
           * Controls the padding of the component.
          */
         "padding": DuetPadding;
+        /**
+          * Show.
+         */
         "show": () => Promise<void>;
         /**
           * Theme of the card.
@@ -415,9 +467,13 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually.
+          * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
-        "headingLevel": DuetHeadingLevel;
+        "headingBackground": DuetColor | undefined;
+        /**
+          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings.
+         */
+        "headingLevel": DuetCardHeadingLevel;
         /**
           * Icon to display on the left side of heading. Example: "form-location"
          */
@@ -692,6 +748,10 @@ export namespace Components {
         "value": string;
     }
     interface DuetChoiceGroup {
+        /**
+          * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        "breakpoint": DuetChoiceGroupBreakpoint;
         /**
           * Additional caption to show inside the label of the choice group.
          */
@@ -813,6 +873,10 @@ export namespace Components {
           * Defines minimum number of characters that must be given to show search results
          */
         "minCharacters": number;
+        /**
+          * Defines if items list should always open after clicking on input
+         */
+        "openListOnClick": boolean;
         /**
           * Theme of the combobox.
          */
@@ -822,6 +886,48 @@ export namespace Components {
          */
         "value": string;
     }
+    interface DuetContactCard {
+        /**
+          * Button icon.
+         */
+        "buttonIcon": DuetIconName;
+        /**
+          * Button text.
+         */
+        "buttonText": string;
+        /**
+          * Button url.
+         */
+        "buttonUrl": string;
+        /**
+          * Description.
+         */
+        "description": string;
+        /**
+          * Email.
+         */
+        "email": string;
+        /**
+          * Image.
+         */
+        "image": string;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin": DuetMargin;
+        /**
+          * Name.
+         */
+        "name": string;
+        /**
+          * Phone.
+         */
+        "phone": string;
+        /**
+          * Theme.
+         */
+        "theme": DuetTheme;
+    }
     interface DuetCookieConsent {
         /**
           * Adds accessible label for the cookie consent ok button.
@@ -1435,7 +1541,7 @@ export namespace Components {
         /**
           * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
          */
-        "shape": "circle" | "brand";
+        "shape": "circle" | "brand" | "brand-rotated";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -1686,6 +1792,10 @@ export namespace Components {
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
         "external": boolean;
+        /**
+          * Icon to display on the left side of the ink text. (only with variations other than "default")
+         */
+        "icon": DuetIconName;
         /**
           * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.
          */
@@ -1696,6 +1806,10 @@ export namespace Components {
           * @default "fi"
          */
         "language": DuetLanguage;
+        /**
+          * Controls the padding of the component (only with variations other than "default")
+         */
+        "padding": DuetPadding;
         /**
           * Sets focus on the specified `duet-link`. Use this method instead of the global `link.focus()`.
          */
@@ -1712,6 +1826,10 @@ export namespace Components {
           * A destination to link to, rendered in the href attribute of a link.
          */
         "url": string;
+        /**
+          * Style variation of the link.
+         */
+        "variation": DuetLinkVariation;
     }
     interface DuetList {
         /**
@@ -1950,6 +2068,10 @@ export namespace Components {
           * Accessible heading size
          */
         "headingLevel": DuetHeadingLevel;
+        /**
+          * Makes the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
+         */
+        "headingVisualLevel": DuetVisualHeadingLevel | undefined;
         /**
           * Hides the modal dialog and puts focus back to the original element that triggered the modal (if we’re still in the same view).
          */
@@ -3154,6 +3276,10 @@ export namespace Components {
           * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
         "breakpoint": DuetTableBreakpoint;
+        /**
+          * Hide a thead section visually. The content is still available to screen readers.
+         */
+        "hideHeadVisually": boolean;
         /**
           * Controls the margin of the component.
          */
@@ -4001,6 +4127,12 @@ declare global {
         prototype: HTMLDuetComboboxElement;
         new (): HTMLDuetComboboxElement;
     };
+    interface HTMLDuetContactCardElement extends Components.DuetContactCard, HTMLStencilElement {
+    }
+    var HTMLDuetContactCardElement: {
+        prototype: HTMLDuetContactCardElement;
+        new (): HTMLDuetContactCardElement;
+    };
     interface HTMLDuetCookieConsentElement extends Components.DuetCookieConsent, HTMLStencilElement {
     }
     var HTMLDuetCookieConsentElement: {
@@ -4430,6 +4562,7 @@ declare global {
         "duet-choice-group": HTMLDuetChoiceGroupElement;
         "duet-collapsible": HTMLDuetCollapsibleElement;
         "duet-combobox": HTMLDuetComboboxElement;
+        "duet-contact-card": HTMLDuetContactCardElement;
         "duet-cookie-consent": HTMLDuetCookieConsentElement;
         "duet-date-picker": HTMLDuetDatePickerElement;
         "duet-divider": HTMLDuetDividerElement;
@@ -4865,9 +4998,13 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually.
+          * Custom color to be used for the card's heading background, as a design token entered in camelCase or kebab-case. Example: "primary".
          */
-        "headingLevel"?: DuetHeadingLevel;
+        "headingBackground"?: DuetColor | undefined;
+        /**
+          * The actual heading level used for the heading in html markup. This setting exists for accessibility reasons. It doesn’t change the style visually. This setting is only used if the heading property is set. If you provide your own heading(s) in the slot, you should set this to neutral "div" in order to avoid nested headings.
+         */
+        "headingLevel"?: DuetCardHeadingLevel;
         /**
           * Icon to display on the left side of heading. Example: "form-location"
          */
@@ -5151,6 +5288,10 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface DuetChoiceGroup {
+        /**
+          * Switch the breakpoint used to trigger the content stacking. These match to similar media query tokens eg.: $media-query-small, $media-query-medium.
+         */
+        "breakpoint"?: DuetChoiceGroupBreakpoint;
         /**
           * Additional caption to show inside the label of the choice group.
          */
@@ -5271,6 +5412,10 @@ declare namespace LocalJSX {
           * Emitted when a keyboard input occurred.
          */
         "onDuetChange"?: (event: DuetComboboxCustomEvent<DuetComboboxEvent>) => void;
+        /**
+          * Defines if items list should always open after clicking on input
+         */
+        "openListOnClick"?: boolean;
         /**
           * Theme of the combobox.
          */
@@ -5280,6 +5425,48 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface DuetContactCard {
+        /**
+          * Button icon.
+         */
+        "buttonIcon"?: DuetIconName;
+        /**
+          * Button text.
+         */
+        "buttonText"?: string;
+        /**
+          * Button url.
+         */
+        "buttonUrl"?: string;
+        /**
+          * Description.
+         */
+        "description"?: string;
+        /**
+          * Email.
+         */
+        "email"?: string;
+        /**
+          * Image.
+         */
+        "image"?: string;
+        /**
+          * Controls the margin of the component.
+         */
+        "margin"?: DuetMargin;
+        /**
+          * Name.
+         */
+        "name"?: string;
+        /**
+          * Phone.
+         */
+        "phone"?: string;
+        /**
+          * Theme.
+         */
+        "theme"?: DuetTheme;
+    }
     interface DuetCookieConsent {
         /**
           * Adds accessible label for the cookie consent ok button.
@@ -5979,7 +6166,7 @@ declare namespace LocalJSX {
         /**
           * Shape of the background. Brand follows new designs and currently doesn't support xxx-small size.
          */
-        "shape"?: "circle" | "brand";
+        "shape"?: "circle" | "brand" | "brand-rotated";
         /**
           * Icon size. Entered as one of the icon size design tokens.
          */
@@ -6238,6 +6425,10 @@ declare namespace LocalJSX {
           * Forces URL to open in a new browser tab. Used together with URL prop.
          */
         "external"?: boolean;
+        /**
+          * Icon to display on the left side of the ink text. (only with variations other than "default")
+         */
+        "icon"?: DuetIconName;
         /**
           * Adds a unique identifier for the link. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.
          */
@@ -6248,6 +6439,10 @@ declare namespace LocalJSX {
           * @default "fi"
          */
         "language"?: DuetLanguage;
+        /**
+          * Controls the padding of the component (only with variations other than "default")
+         */
+        "padding"?: DuetPadding;
         /**
           * Initially visually hidden link, which is shown on focus.
          */
@@ -6260,6 +6455,10 @@ declare namespace LocalJSX {
           * A destination to link to, rendered in the href attribute of a link.
          */
         "url"?: string;
+        /**
+          * Style variation of the link.
+         */
+        "variation"?: DuetLinkVariation;
     }
     interface DuetList {
         /**
@@ -6494,6 +6693,10 @@ declare namespace LocalJSX {
           * Accessible heading size
          */
         "headingLevel"?: DuetHeadingLevel;
+        /**
+          * Makes the visual style mimic a specific heading level. This option allows you to make e.g. h1 visually look like h3, but still keep it h1 in the markup.
+         */
+        "headingVisualLevel"?: DuetVisualHeadingLevel | undefined;
         /**
           * Icon to display above the heading (from Duet’s icons). Example: "form-location"
          */
@@ -7726,6 +7929,10 @@ declare namespace LocalJSX {
           * By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a _regular_ table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality _and_ allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout.
          */
         "breakpoint"?: DuetTableBreakpoint;
+        /**
+          * Hide a thead section visually. The content is still available to screen readers.
+         */
+        "hideHeadVisually"?: boolean;
         /**
           * Controls the margin of the component.
          */
@@ -8405,6 +8612,7 @@ declare namespace LocalJSX {
         "duet-choice-group": DuetChoiceGroup;
         "duet-collapsible": DuetCollapsible;
         "duet-combobox": DuetCombobox;
+        "duet-contact-card": DuetContactCard;
         "duet-cookie-consent": DuetCookieConsent;
         "duet-date-picker": DuetDatePicker;
         "duet-divider": DuetDivider;
@@ -8494,6 +8702,7 @@ declare module "@stencil/core" {
             "duet-choice-group": LocalJSX.DuetChoiceGroup & JSXBase.HTMLAttributes<HTMLDuetChoiceGroupElement>;
             "duet-collapsible": LocalJSX.DuetCollapsible & JSXBase.HTMLAttributes<HTMLDuetCollapsibleElement>;
             "duet-combobox": LocalJSX.DuetCombobox & JSXBase.HTMLAttributes<HTMLDuetComboboxElement>;
+            "duet-contact-card": LocalJSX.DuetContactCard & JSXBase.HTMLAttributes<HTMLDuetContactCardElement>;
             "duet-cookie-consent": LocalJSX.DuetCookieConsent & JSXBase.HTMLAttributes<HTMLDuetCookieConsentElement>;
             "duet-date-picker": LocalJSX.DuetDatePicker & JSXBase.HTMLAttributes<HTMLDuetDatePickerElement>;
             "duet-divider": LocalJSX.DuetDivider & JSXBase.HTMLAttributes<HTMLDuetDividerElement>;

package/lib/types/stencil-public-runtime.d.ts

@@ -892,8 +892,8 @@ export declare namespace JSXBase {
         accept?: string;
         allowdirs?: boolean;
         alt?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
         autoFocus?: boolean;
@@ -1217,8 +1217,8 @@ export declare namespace JSXBase {
         resource?: string;
         typeof?: string;
         vocab?: string;
-        autoCapitalize?: any;
-        autocapitalize?: any;
+        autoCapitalize?: string;
+        autocapitalize?: string;
         autoCorrect?: string;
         autocorrect?: string;
         autoSave?: string;
@@ -1509,12 +1509,12 @@ export declare namespace JSXBase {
         onCutCapture?: (event: ClipboardEvent) => void;
         onPaste?: (event: ClipboardEvent) => void;
         onPasteCapture?: (event: ClipboardEvent) => void;
-        onCompositionEnd?: (event: CompositionEvent) => void;
-        onCompositionEndCapture?: (event: CompositionEvent) => void;
-        onCompositionStart?: (event: CompositionEvent) => void;
-        onCompositionStartCapture?: (event: CompositionEvent) => void;
-        onCompositionUpdate?: (event: CompositionEvent) => void;
-        onCompositionUpdateCapture?: (event: CompositionEvent) => void;
+        onCompositionend?: (event: CompositionEvent) => void;
+        onCompositionendCapture?: (event: CompositionEvent) => void;
+        onCompositionstart?: (event: CompositionEvent) => void;
+        onCompositionstartCapture?: (event: CompositionEvent) => void;
+        onCompositionupdate?: (event: CompositionEvent) => void;
+        onCompositionupdateCapture?: (event: CompositionEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1525,8 +1525,8 @@ export declare namespace JSXBase {
         onBlurCapture?: (event: FocusEvent) => void;
         onChange?: (event: Event) => void;
         onChangeCapture?: (event: Event) => void;
-        onInput?: (event: Event) => void;
-        onInputCapture?: (event: Event) => void;
+        onInput?: (event: InputEvent) => void;
+        onInputCapture?: (event: InputEvent) => void;
         onReset?: (event: Event) => void;
         onResetCapture?: (event: Event) => void;
         onSubmit?: (event: Event) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "6.7.0",
+  "version": "6.8.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -50,12 +50,12 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "2.0.35",
-    "@duetds/icons": "3.0.35",
-    "@duetds/tokens": "3.0.35",
+    "@duetds/fonts": "2.0.37",
+    "@duetds/icons": "3.0.37",
+    "@duetds/tokens": "3.0.37",
     "@rollup/plugin-replace": "5.0.2",
-    "@stencil/core": "2.22.2",
-    "@stencil/sass": "2.0.4",
+    "@stencil/core": "3.1.0",
+    "@stencil/sass": "3.0.0",
     "@types/jest": "27.0.3",
     "cross-env": "7.0.3",
     "dotenv": "16.0.3",
@@ -78,5 +78,5 @@
   "collection": "lib/collection/collection-manifest.json",
   "es2015": "lib/esm/index.js",
   "es2017": "lib/esm/index.js",
-  "gitHead": "ac5739affdb6be57292896335b4d2f21c454a0f3"
+  "gitHead": "466317db8bc0ba9d1869b66a20ac177f10b9a81d"
 }