@siemens/ix 1.4.0 → 1.5.0-beta.0

package/dist/types/components.d.ts

@@ -5,23 +5,48 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { Buttons } from "./components/button/button-variants";
+import { ButtonVariant } from "./components/button/button";
 import { FilterState } from "./components/category-filter/filter-state";
 import { InputState } from "./components/category-filter/input-state";
 import { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
-import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/events";
+import { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/date-picker";
 import { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
-import { DateTimeSelectEvent } from "./components/datetime-picker/event";
+import { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker";
 import { Placement } from "./components/dropdown/placement";
-import { DropdownTriggerEvent } from "./components/dropdown/dropdown-trigger-event";
+import { DropdownTriggerEvent } from "./components/dropdown/dropdown";
+import { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
+import { IconButtonVariant } from "./components/icon-button/icon-button";
 import { NotificationColor } from "./components/utils/notification-color";
 import { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
+import { SplitButtonVariant } from "./components/split-button/split-button";
+import { TimePickerCorners } from "./components/time-picker/time-picker";
 import { ToastConfig, ToastType } from "./components/toast/toast-utils";
 import { TypedEvent } from "./components/utils/typed-event";
 import { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
 import { TypographyVariants } from "./components/typography/types";
 import { UploadFileState } from "./components/upload/upload-file-state";
+export { ButtonVariant } from "./components/button/button";
+export { FilterState } from "./components/category-filter/filter-state";
+export { InputState } from "./components/category-filter/input-state";
+export { DateTimeCardCorners } from "./components/date-time-card/date-time-card";
+export { DateChangeEvent, LegacyDateChangeEvent } from "./components/date-picker/date-picker";
+export { DateTimeCardCorners as DateTimeCardCorners1 } from "./components/date-time-card/date-time-card";
+export { DateTimeDateChangeEvent, DateTimeSelectEvent } from "./components/datetime-picker/datetime-picker";
+export { Placement } from "./components/dropdown/placement";
+export { DropdownTriggerEvent } from "./components/dropdown/dropdown";
+export { DropdownButtonVariant } from "./components/dropdown-button/dropdown-button";
+export { FlipTileState } from "./components/flip-tile/flip-tile-state";
+export { IconButtonVariant } from "./components/icon-button/icon-button";
+export { NotificationColor } from "./components/utils/notification-color";
+export { ModalConfig, ModalInstance } from "./components/modal/modal-utils";
+export { SplitButtonVariant } from "./components/split-button/split-button";
+export { TimePickerCorners } from "./components/time-picker/time-picker";
+export { ToastConfig, ToastType } from "./components/toast/toast-utils";
+export { TypedEvent } from "./components/utils/typed-event";
+export { TreeContext, TreeItemContext, TreeModel, UpdateCallback } from "./components/tree/tree-model";
+export { TypographyVariants } from "./components/typography/types";
+export { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
     interface IxAnimatedTab {
         /**
@@ -129,7 +154,7 @@ export namespace Components {
         /**
           * Button varaint
          */
-        "variant": Buttons;
+        "variant": ButtonVariant;
     }
     interface IxCategoryFilter {
         /**
@@ -308,7 +333,7 @@ export namespace Components {
         /**
           * Set corners style
          */
-        "corners": DateTimeCardCorners;
+        "corners": DateTimeCardCorners1;
         /**
           * set styles
          */
@@ -386,6 +411,9 @@ export namespace Components {
          */
         "to": string | null;
     }
+    /**
+     * @since 1.4.0
+     */
     interface IxDivider {
     }
     interface IxDrawer {
@@ -479,6 +507,9 @@ export namespace Components {
          */
         "updatePosition": () => Promise<void>;
     }
+    /**
+     * @since 1.3.0
+     */
     interface IxDropdownButton {
         /**
           * Active button
@@ -507,7 +538,7 @@ export namespace Components {
         /**
           * Button variant
          */
-        "variant": Buttons;
+        "variant": DropdownButtonVariant;
     }
     interface IxDropdownItem {
         /**
@@ -535,6 +566,9 @@ export namespace Components {
          */
         "label": string;
     }
+    /**
+     * @since 1.4.0
+     */
     interface IxDropdownQuickActions {
     }
     interface IxEventList {
@@ -741,7 +775,7 @@ export namespace Components {
         /**
           * Variant of button
          */
-        "variant": 'Primary' | 'Secondary';
+        "variant": IconButtonVariant;
     }
     interface IxInputGroup {
     }
@@ -1067,7 +1101,7 @@ export namespace Components {
           * Display modal dialog
           * @param config
          */
-        "showModal": (config: ModalConfig) => Promise<ModalInstance>;
+        "showModal": <T = any>(config: ModalConfig<T>) => Promise<ModalInstance<T>>;
     }
     interface IxModalExample {
     }
@@ -1208,7 +1242,7 @@ export namespace Components {
         /**
           * Color variant of button
          */
-        "variant": Buttons;
+        "variant": SplitButtonVariant;
     }
     interface IxSplitButtonItem {
         /**
@@ -1286,7 +1320,7 @@ export namespace Components {
         /**
           * Corner style
          */
-        "corners": DateTimeCardCorners;
+        "corners": TimePickerCorners;
         /**
           * Format of time string
           * @since 1.1.0
@@ -1403,6 +1437,9 @@ export namespace Components {
          */
         "textOn": string;
     }
+    /**
+     * @since 1.4.0
+     */
     interface IxTooltip {
         /**
           * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
@@ -1804,6 +1841,9 @@ declare global {
         prototype: HTMLIxDatetimePickerElement;
         new (): HTMLIxDatetimePickerElement;
     };
+    /**
+     * @since 1.4.0
+     */
     interface HTMLIxDividerElement extends Components.IxDivider, HTMLStencilElement {
     }
     var HTMLIxDividerElement: {
@@ -1822,6 +1862,9 @@ declare global {
         prototype: HTMLIxDropdownElement;
         new (): HTMLIxDropdownElement;
     };
+    /**
+     * @since 1.3.0
+     */
     interface HTMLIxDropdownButtonElement extends Components.IxDropdownButton, HTMLStencilElement {
     }
     var HTMLIxDropdownButtonElement: {
@@ -1834,6 +1877,9 @@ declare global {
         prototype: HTMLIxDropdownItemElement;
         new (): HTMLIxDropdownItemElement;
     };
+    /**
+     * @since 1.4.0
+     */
     interface HTMLIxDropdownQuickActionsElement extends Components.IxDropdownQuickActions, HTMLStencilElement {
     }
     var HTMLIxDropdownQuickActionsElement: {
@@ -2092,6 +2138,9 @@ declare global {
         prototype: HTMLIxToggleElement;
         new (): HTMLIxToggleElement;
     };
+    /**
+     * @since 1.4.0
+     */
     interface HTMLIxTooltipElement extends Components.IxTooltip, HTMLStencilElement {
     }
     var HTMLIxTooltipElement: {
@@ -2343,7 +2392,7 @@ declare namespace LocalJSX {
         /**
           * Button varaint
          */
-        "variant"?: Buttons;
+        "variant"?: ButtonVariant;
     }
     interface IxCategoryFilter {
         /**
@@ -2549,7 +2598,7 @@ declare namespace LocalJSX {
         /**
           * Set corners style
          */
-        "corners"?: DateTimeCardCorners;
+        "corners"?: DateTimeCardCorners1;
         /**
           * set styles
          */
@@ -2585,7 +2634,7 @@ declare namespace LocalJSX {
           * Date change
           * @since 1.1.0
          */
-        "onDateChange"?: (event: IxDatetimePickerCustomEvent<string | Omit<DateTimeSelectEvent, 'time'>>) => void;
+        "onDateChange"?: (event: IxDatetimePickerCustomEvent<DateTimeDateChangeEvent>) => void;
         /**
           * Date selection event is fired after confirm button is pressend
           * @since 1.1.0
@@ -2646,6 +2695,9 @@ declare namespace LocalJSX {
          */
         "to"?: string | null;
     }
+    /**
+     * @since 1.4.0
+     */
     interface IxDivider {
     }
     interface IxDrawer {
@@ -2726,6 +2778,9 @@ declare namespace LocalJSX {
          */
         "trigger"?: string | HTMLElement;
     }
+    /**
+     * @since 1.3.0
+     */
     interface IxDropdownButton {
         /**
           * Active button
@@ -2754,7 +2809,7 @@ declare namespace LocalJSX {
         /**
           * Button variant
          */
-        "variant"?: Buttons;
+        "variant"?: DropdownButtonVariant;
     }
     interface IxDropdownItem {
         /**
@@ -2782,6 +2837,9 @@ declare namespace LocalJSX {
          */
         "onItemClick"?: (event: IxDropdownItemCustomEvent<HTMLIxDropdownItemElement>) => void;
     }
+    /**
+     * @since 1.4.0
+     */
     interface IxDropdownQuickActions {
     }
     interface IxEventList {
@@ -3016,7 +3074,7 @@ declare namespace LocalJSX {
         /**
           * Variant of button
          */
-        "variant"?: 'Primary' | 'Secondary';
+        "variant"?: IconButtonVariant;
     }
     interface IxInputGroup {
     }
@@ -3501,7 +3559,7 @@ declare namespace LocalJSX {
         /**
           * Color variant of button
          */
-        "variant"?: Buttons;
+        "variant"?: SplitButtonVariant;
     }
     interface IxSplitButtonItem {
         /**
@@ -3583,7 +3641,7 @@ declare namespace LocalJSX {
         /**
           * Corner style
          */
-        "corners"?: DateTimeCardCorners;
+        "corners"?: TimePickerCorners;
         /**
           * Format of time string
           * @since 1.1.0
@@ -3707,6 +3765,9 @@ declare namespace LocalJSX {
          */
         "textOn"?: string;
     }
+    /**
+     * @since 1.4.0
+     */
     interface IxTooltip {
         /**
           * CSS selector for hover trigger element e.g. `for="[data-my-custom-select]"`
@@ -3985,11 +4046,20 @@ declare module "@stencil/core" {
             "ix-date-picker": LocalJSX.IxDatePicker & JSXBase.HTMLAttributes<HTMLIxDatePickerElement>;
             "ix-date-time-card": LocalJSX.IxDateTimeCard & JSXBase.HTMLAttributes<HTMLIxDateTimeCardElement>;
             "ix-datetime-picker": LocalJSX.IxDatetimePicker & JSXBase.HTMLAttributes<HTMLIxDatetimePickerElement>;
+            /**
+             * @since 1.4.0
+             */
             "ix-divider": LocalJSX.IxDivider & JSXBase.HTMLAttributes<HTMLIxDividerElement>;
             "ix-drawer": LocalJSX.IxDrawer & JSXBase.HTMLAttributes<HTMLIxDrawerElement>;
             "ix-dropdown": LocalJSX.IxDropdown & JSXBase.HTMLAttributes<HTMLIxDropdownElement>;
+            /**
+             * @since 1.3.0
+             */
             "ix-dropdown-button": LocalJSX.IxDropdownButton & JSXBase.HTMLAttributes<HTMLIxDropdownButtonElement>;
             "ix-dropdown-item": LocalJSX.IxDropdownItem & JSXBase.HTMLAttributes<HTMLIxDropdownItemElement>;
+            /**
+             * @since 1.4.0
+             */
             "ix-dropdown-quick-actions": LocalJSX.IxDropdownQuickActions & JSXBase.HTMLAttributes<HTMLIxDropdownQuickActionsElement>;
             "ix-event-list": LocalJSX.IxEventList & JSXBase.HTMLAttributes<HTMLIxEventListElement>;
             "ix-event-list-item": LocalJSX.IxEventListItem & JSXBase.HTMLAttributes<HTMLIxEventListItemElement>;
@@ -4033,6 +4103,9 @@ declare module "@stencil/core" {
             "ix-toast": LocalJSX.IxToast & JSXBase.HTMLAttributes<HTMLIxToastElement>;
             "ix-toast-container": LocalJSX.IxToastContainer & JSXBase.HTMLAttributes<HTMLIxToastContainerElement>;
             "ix-toggle": LocalJSX.IxToggle & JSXBase.HTMLAttributes<HTMLIxToggleElement>;
+            /**
+             * @since 1.4.0
+             */
             "ix-tooltip": LocalJSX.IxTooltip & JSXBase.HTMLAttributes<HTMLIxTooltipElement>;
             "ix-tree": LocalJSX.IxTree & JSXBase.HTMLAttributes<HTMLIxTreeElement>;
             "ix-tree-item": LocalJSX.IxTreeItem & JSXBase.HTMLAttributes<HTMLIxTreeItemElement>;

package/dist/types/index.d.ts

@@ -1,12 +1,12 @@
-export { Components, JSX } from './components';
-export { Buttons } from './components/button/button-variants';
-export { FilterState } from './components/category-filter/filter-state';
-export { InputState } from './components/category-filter/input-state';
-export { LogicalFilterOperator } from './components/category-filter/logical-filter-operator';
-export { DropdownTriggerEvent } from './components/dropdown/dropdown-trigger-event';
+export * from './components';
+export * from './components/category-filter/filter-state';
+export * from './components/category-filter/input-state';
+export * from './components/category-filter/logical-filter-operator';
 export { FlipTileState } from './components/flip-tile/flip-tile-state';
-export { ModalContainer } from './components/modal-container/modal-container';
-export { Modal } from './components/modal/modal';
+export * from './components/modal/modal-utils';
+export * from './components/toast/toast-utils';
+export * from './components/tree-item/default-tree-item';
+export * from './components/tree/tree-model';
 export { NotificationColor } from './components/utils/notification-color';
 export { convertToAbbreviationString, convertToRemString, } from './components/utils/rwd.util';
-export * from './exports';
+export * from './components/utils/theme-switcher';

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

@@ -133,7 +133,7 @@ export interface ListenOptions {
      */
     passive?: boolean;
 }
-export declare type ListenTargetOptions = 'body' | 'document' | 'window';
+export type ListenTargetOptions = 'body' | 'document' | 'window';
 export interface StateDecorator {
     (): PropertyDecorator;
 }
@@ -214,8 +214,8 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
-export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
-export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
+export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
  * `setMode()` is used for libraries which provide multiple "modes" for styles.
  */
@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
@@ -433,13 +442,57 @@ interface HostAttributes {
     ref?: (el: HTMLElement | null) => void;
     [prop: string]: any;
 }
+/**
+ * Utilities for working with functional Stencil components. An object
+ * conforming to this interface is passed by the Stencil runtime as the third
+ * argument to a functional component, allowing component authors to work with
+ * features like children.
+ *
+ * The children of a functional component will be passed as the second
+ * argument, so a functional component which uses these utils to transform its
+ * children might look like the following:
+ *
+ * ```ts
+ * export const AddClass: FunctionalComponent = (_, children, utils) => (
+ *  utils.map(children, child => ({
+ *    ...child,
+ *    vattrs: {
+ *      ...child.vattrs,
+ *      class: `${child.vattrs.class} add-class`
+ *    }
+ *  }))
+ * );
+ * ```
+ *
+ * For more see the Stencil documentation, here:
+ * https://stenciljs.com/docs/functional-components
+ */
 export interface FunctionalUtilities {
+    /**
+     * Utility for reading the children of a functional component at runtime.
+     * Since the Stencil runtime uses a different interface for children it is
+     * not recommendeded to read the children directly, and is preferable to use
+     * this utility to, for instance, perform a side effect for each child.
+     */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;
+    /**
+     * Utility for transforming the children of a functional component. Given an
+     * array of children and a callback this will return a list of the results of
+     * passing each child to the supplied callback.
+     */
     map: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => ChildNode) => VNode[];
 }
 export interface FunctionalComponent<T = {}> {
     (props: T, children: VNode[], utils: FunctionalUtilities): VNode | VNode[];
 }
+/**
+ * A Child VDOM node
+ *
+ * This has most of the same properties as {@link VNode} but friendlier names
+ * (i.e. `vtag` instead of `$tag$`, `vchildren` instead of `$children$`) in
+ * order to provide a friendlier public interface for users of the
+ * {@link FunctionalUtilities}).
+ */
 export interface ChildNode {
     vtag?: string | number | Function;
     vkey?: string | number;
@@ -486,6 +539,9 @@ export declare function h(sel: any, children: Array<VNode | undefined | null>):
 export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
 export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
+/**
+ * A virtual DOM node
+ */
 export interface VNode {
     $flags$: number;
     $tag$: string | number | Function;
@@ -836,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;
@@ -1161,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;
@@ -1453,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;
@@ -1469,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/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/siemens/ix",
     "directory": "packages/core"
   },
-  "version": "1.4.0",
+  "version": "1.5.0-beta.0",
   "license": "MIT",
   "description": "Siemens iX Web Components",
   "main": "dist/index.cjs.js",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.1.0",
-    "@stencil/core": "~2.19.2",
+    "@stencil/core": "^3.1.0",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
     "luxon": "^3.0.1"
@@ -51,36 +51,36 @@
   "devDependencies": {
     "@playwright/test": "^1.24.1",
     "@siemens/ix-icons": "~1.0.0",
-    "@stencil/angular-output-target": "^0.4.0",
-    "@stencil/eslint-plugin": "^0.4.0",
-    "@stencil/postcss": "^2.0.0",
-    "@stencil/react-output-target": "^0.3.1",
-    "@stencil/sass": "~2.0.0",
+    "@stencil/vue-output-target": "^0.7.0",
+    "@stencil-community/eslint-plugin": "^0.5.0",
+    "@stencil-community/postcss": "^2.1.0",
+    "@stencil/angular-output-target": "^0.5.0",
+    "@stencil/react-output-target": "^0.4.0",
+    "@stencil/sass": "~3.0.0",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/animejs": "^3.1.4",
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^27.5.2",
     "@types/luxon": "^3.0.0",
     "@types/mustache": "^4.1.1",
-    "@types/puppeteer": "^5.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "animate.css": "~4.1.1",
     "autoprefixer": "10.4.5",
     "bootstrap": "^5.2.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-ix": "*",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react": "^7.32.2",
     "fs-extra": "^10.0.0",
     "http-server": "^14.1.1",
-    "jest": "^27.4.5",
-    "jest-cli": "^27.4.5",
+    "jest": "^27.5.1",
+    "jest-cli": "^27.5.1",
     "mustache": "^4.2.0",
-    "puppeteer": "^10.0.0",
-    "sass": "^1.54.0",
+    "puppeteer": "^19.5.2",
+    "sass": "^1.58.3",
     "start-server-and-test": "^1.14.0",
     "ts-node": "^10.0.0",
-    "typescript": "^4.2.4"
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.11.0",