@mgdis/mg-components 5.27.3 → 5.28.0

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -25,12 +25,12 @@ export declare class MgTooltip {
      * Needed by the input for accessibility `aria-decribedby`.
      */
     identifier: string;
-    validateIdentifier(): void;
+    watchIdentifier(): void;
     /**
      * Displayed message in the tooltip
      */
     message: string;
-    validateMessage(newValue: MgTooltip['message']): void;
+    watchMessage(newValue: MgTooltip['message']): void;
     /**
      * Tooltip placement
      */
@@ -39,12 +39,12 @@ export declare class MgTooltip {
      * Display tooltip
      */
     display: boolean;
-    handleDisplay(newValue: MgTooltip['display']): void;
+    watchDisplay(newValue: MgTooltip['display']): void;
     /**
      * Disable tooltip
      */
     disabled: boolean;
-    validateDisabled(newValue: MgTooltip['disabled']): void;
+    watchDisabled(newValue: MgTooltip['disabled']): void;
     /**
      * Show tooltip
      */
@@ -57,12 +57,12 @@ export declare class MgTooltip {
      * Check if clicked outside of component and hidde tooltip
      * @param event - mouse event
      */
-    private clickOutside;
+    private handleClickOutside;
     /**
      * Check if 'Escape' key is pressed of component and hidde tooltip
      * @param event - keyboard event
      */
-    private pressEscape;
+    private handlePressEscape;
     /**
      * Method to set display prop
      * @param newValue - display prop new value
@@ -72,7 +72,7 @@ export declare class MgTooltip {
     /**
      * Action for tooltip element and tooltiped element mouse listener
      * @param elementGuard -  tooltip element guard
-     * @param isMouseenter - mouseenter validation
+     * @param eventName - event name
      * @param conditionalGuard - guard condition
      */
     private tooltipMouseListenerAction;
@@ -86,13 +86,26 @@ export declare class MgTooltip {
      */
     private setMgButtonWrapper;
     /**
-     * Init tooltip
-     * @param slotElement - slotted element
-     * @param interactiveElement - interactive element
+     * Set popper instance
      */
-    private initTooltip;
+    private setPopper;
     /**
-     * Render tooltip content element
+     * Define selected element to become tooltip selector and init listeners
+     * @param element - tooltiped element
+     */
+    private setTooltipedElement;
+    /**
+     * Set button mutation observer
+     * @param mgButton - mg-button to observe
+     */
+    private setMgButtonMutationObserver;
+    /**
+     * Set tooltiped element aria-describedby
+     * @param element - element to update
+     */
+    private setAriaDescribedby;
+    /**
+     * Render tooltip content element and init listeners
      */
     private renderTooltipContent;
     /*************

package/dist/types/components/molecules/inputs/mg-input/mg-input.conf.d.ts

@@ -27,7 +27,8 @@ export type HTMLMgInputsElement = (HTMLMgInputElement & {
  */
 export declare enum Handler {
     BLUR = "blur",
-    FOCUS = "focus"
+    FOCUS = "focus",
+    MOUSEENTER = "mouseenter"
 }
 export declare const classFieldset = "mg-c-input--fieldset";
 export declare const classDisabled = "mg-c-input--disabled";

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.d.ts

@@ -21,6 +21,8 @@ export interface CheckboxItem extends CheckboxValue {
     _handleKeydown: (event: KeyboardEvent & {
         target: HTMLElement;
     }) => void;
+    _handleMouseEnter: () => void;
+    _handleMouseLeave: () => void;
 }
 /**
  * List of all availables checkbox type

package/dist/types/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.d.ts

@@ -195,6 +195,14 @@ export declare class MgInputCheckbox implements Omit<MgInputCheckboxListProps, '
      * @param event - mass action event trigger a global select/unselect on values
      */
     private handleMassAction;
+    /**
+     * Handle input label mouseenter event
+     */
+    private handleMouseEnter;
+    /**
+     * Handle input label leave event
+     */
+    private handleMouseLeave;
     /**
      * Update values
      */

package/dist/types/components/molecules/inputs/mg-input-password/mg-input-password.d.ts

@@ -47,6 +47,10 @@ export declare class MgInputPassword {
      * It should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.
      */
     placeholder?: string;
+    /**
+     * Input max length
+     */
+    maxlength: any;
     /**
      * Define if input is required
      */

package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts

@@ -20,7 +20,7 @@ export declare class MgMenu {
     element: HTMLMgMenuElement;
     /**
      * Menu label. Include short menu description.
-     * Required for accessibility
+     * Required to define accessibility required attribute `aria-label`
      */
     label: string;
     validateLabel(newValue: MgMenu['label']): void;

package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts

@@ -8,7 +8,6 @@ export declare class MgItemMore {
     private parentMenuItems;
     private moreElementMenuItem;
     private overflowBehavior;
-    private canRenderMgMenuItemOverflowElement;
     /**************
      * Decorators *
      **************/
@@ -35,6 +34,11 @@ export declare class MgItemMore {
      * Define component parent menu.
      */
     parentMenu: HTMLMgMenuElement;
+    /**
+     * Set proxy element properties and listeners
+     * @param proxified - element to proxify from
+     */
+    private setProxyElement;
     /***********
      * Methods *
      ***********/

package/dist/types/components.d.ts

@@ -626,6 +626,10 @@ export namespace Components {
           * Define if label is displayed on top
          */
         "labelOnTop"?: boolean;
+        /**
+          * Input max length
+         */
+        "maxlength": any;
         /**
           * Define input width
          */
@@ -1157,7 +1161,7 @@ export namespace Components {
          */
         "itemmore"?: ItemMoreType;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Menu label. Include short menu description. Required to define accessibility required attribute `aria-label`
          */
         "label": string;
         /**
@@ -2592,6 +2596,10 @@ declare namespace LocalJSX {
           * Define if label is displayed on top
          */
         "labelOnTop"?: boolean;
+        /**
+          * Input max length
+         */
+        "maxlength"?: any;
         /**
           * Define input width
          */
@@ -3115,7 +3123,7 @@ declare namespace LocalJSX {
          */
         "itemmore"?: ItemMoreType;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Menu label. Include short menu description. Required to define accessibility required attribute `aria-label`
          */
         "label": string;
         /**

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

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1104,7 +1099,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1123,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1157,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1209,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "5.27.3",
+  "version": "5.28.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2394,7 +2394,7 @@
         },
         {
           "name": "mg-input-password",
-          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+          "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-password--docs",
           "attributes": [
             {
@@ -2462,6 +2462,15 @@
                 "required": false
               }
             },
+            {
+              "name": "maxlength",
+              "description": "Input max length\n\nType: `any`",
+              "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-password--docs",
+              "value": {
+                "type": "any",
+                "required": false
+              }
+            },
             {
               "name": "mg-width",
               "description": "Define input width\n\nType: `\"full\" | 16 | 2 | 4`",
@@ -2616,6 +2625,15 @@
                   "required": false
                 }
               },
+              {
+                "name": "maxlength",
+                "description": "Input max length\n\nType: `any`",
+                "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-password--docs",
+                "value": {
+                  "type": "any",
+                  "required": false
+                }
+              },
               {
                 "name": "mgWidth",
                 "description": "Define input width\n\nType: `\"full\" | 16 | 2 | 4`",
@@ -4750,7 +4768,7 @@
         },
         {
           "name": "mg-menu",
-          "description": "Attributes:\n- `direction`: Component display direction.\n- `label`: Menu label. Include short menu description.\nRequired for accessibility\n- `size`: Define mg-menu size\n\nProperties:\n- `itemmore`: Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow\n\nSlots:\n- ``: Menu content\n\n",
+          "description": "Attributes:\n- `direction`: Component display direction.\n- `label`: Menu label. Include short menu description.\nRequired to define accessibility required attribute `aria-label`\n- `size`: Define mg-menu size\n\nProperties:\n- `itemmore`: Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow\n\nSlots:\n- ``: Menu content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-menu-mg-menu--docs",
           "attributes": [
             {
@@ -4765,7 +4783,7 @@
             },
             {
               "name": "label",
-              "description": "Menu label. Include short menu description.\nRequired for accessibility\n\nType: `string`",
+              "description": "Menu label. Include short menu description.\nRequired to define accessibility required attribute `aria-label`\n\nType: `string`",
               "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-menu-mg-menu--docs",
               "value": {
                 "type": "string",
@@ -4806,7 +4824,7 @@
               },
               {
                 "name": "label",
-                "description": "Menu label. Include short menu description.\nRequired for accessibility\n\nType: `string`",
+                "description": "Menu label. Include short menu description.\nRequired to define accessibility required attribute `aria-label`\n\nType: `string`",
                 "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-menu-mg-menu--docs",
                 "value": {
                   "type": "string",

package/ide/vscode/html-custom-data.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.27.3",
+  "version": "5.28.0",
   "tags": [
     {
       "name": "mg-action-more",
@@ -2761,7 +2761,7 @@
     },
     {
       "name": "mg-input-password",
-      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
+      "description": "Attributes:\n- `disabled`: Define if input is disabled\n- `help-text`: Add a help text under the input, usually expected data format and example\n- `identifier`: Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n- `invalid`: Define input invalid state\n- `label`: Input label\n- `label-hide`: Define if label is visible\n- `label-on-top`: Define if label is displayed on top\n- `maxlength`: Input max length\n- `mg-width`: Define input width\n- `name`: Input name\nIf not set the value equals the identifier\n- `placeholder`: Input placeholder.\nIt should be a word or short phrase that demonstrates the expected type of data, not a replacement for labels or help text.\n- `readonly`: Define if input is readonly\n- `required`: Define if input is required\n- `tooltip`: Add a tooltip message next to the input\n- `tooltip-position`: Define tooltip position\n- `valid`: Define input valid state\n- `value`: Component value\n\nMethods:\n- `displayError`: Display input error if it exists.\n- `setError`: Set an error and display a custom error message.\nThis method can be used to set the component's error state from its context by passing a boolean value to the `valid` parameter.\nIt must be paired with an error message to display for the given context.\nWhen used to set validity to `false`, you should use this method again to reset the validity to `true`.\n\nEvents:\n- `input-valid`: Emited event when checking validity\n- `value-change`: Emited event when value change\n\n",
       "attributes": [
         {
           "name": "disabled",
@@ -2861,6 +2861,20 @@
             }
           ]
         },
+        {
+          "name": "maxlength",
+          "description": "Input max length\n\nType: `any`",
+          "references": [
+            {
+              "name": "Storybook",
+              "url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-inputs-mg-input-password--docs"
+            },
+            {
+              "name": "Sources",
+              "url": "https://gitlab.mgdis.fr/core/core-ui/core-ui/-/tree/master/packages/mg-components/src/components/molecules/inputs/mg-input-password/mg-input-password.tsx"
+            }
+          ]
+        },
         {
           "name": "mg-width",
           "description": "Define input width\n\nType: `\"full\" | 16 | 2 | 4`",
@@ -5322,7 +5336,7 @@
     },
     {
       "name": "mg-menu",
-      "description": "Attributes:\n- `direction`: Component display direction.\n- `label`: Menu label. Include short menu description.\nRequired for accessibility\n- `size`: Define mg-menu size\n\nProperties:\n- `itemmore`: Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow\n\nSlots:\n- ``: Menu content\n\n",
+      "description": "Attributes:\n- `direction`: Component display direction.\n- `label`: Menu label. Include short menu description.\nRequired to define accessibility required attribute `aria-label`\n- `size`: Define mg-menu size\n\nProperties:\n- `itemmore`: Customize \"mg-item-more\" element\nUsed with direction: 'vertical' to manage overflow\n\nSlots:\n- ``: Menu content\n\n",
       "attributes": [
         {
           "name": "direction",
@@ -5354,7 +5368,7 @@
         },
         {
           "name": "label",
-          "description": "Menu label. Include short menu description.\nRequired for accessibility\n\nType: `string`",
+          "description": "Menu label. Include short menu description.\nRequired to define accessibility required attribute `aria-label`\n\nType: `string`",
           "references": [
             {
               "name": "Storybook",

package/loader/cdn.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.cjs.js

@@ -1,3 +1 @@
-
-module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports = require('../dist/cjs/loader.cjs.js');

package/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,3 +1 @@
-
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,2 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
-export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.27.3",
+  "version": "5.28.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -31,44 +31,45 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
-    "@stencil/core": "4.18.0",
-    "@mgdis/img": "1.7.1",
-    "@mgdis/styles": "1.3.3",
-    "@mgdis/stencil-helpers": "1.1.4"
+    "@stencil/core": "4.19.2",
+    "@mgdis/img": "1.7.3",
+    "@mgdis/stencil-helpers": "1.1.6",
+    "@mgdis/styles": "1.3.5"
   },
   "devDependencies": {
     "@playwright/test": "1.43.1",
     "@pxtrn/storybook-addon-docs-stencil": "6.4.1",
-    "@storybook/addon-a11y": "8.0.10",
-    "@storybook/addon-actions": "8.0.10",
-    "@storybook/addon-essentials": "8.0.10",
-    "@storybook/addon-interactions": "8.0.10",
-    "@storybook/addon-links": "8.0.10",
-    "@storybook/blocks": "8.0.10",
-    "@storybook/html": "8.0.10",
-    "@storybook/html-vite": "8.0.10",
-    "@storybook/manager-api": "8.0.10",
+    "@storybook/addon-a11y": "8.1.11",
+    "@storybook/addon-actions": "8.1.11",
+    "@storybook/addon-essentials": "8.1.11",
+    "@storybook/addon-interactions": "8.1.11",
+    "@storybook/addon-links": "8.1.11",
+    "@storybook/blocks": "8.1.11",
+    "@storybook/html": "8.1.11",
+    "@storybook/html-vite": "8.1.11",
+    "@storybook/manager-api": "8.1.11",
     "@storybook/testing-library": "0.2.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.12.11",
-    "chromatic": "11.3.2",
+    "@types/node": "20.14.9",
+    "chromatic": "11.5.4",
     "eslint": "8.57.0",
     "eslint-plugin-storybook": "0.8.0",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-stub": "2.0.0",
-    "prettier": "3.2.5",
-    "puppeteer": "22.8.0",
-    "sass": "1.77.1",
-    "storybook": "8.0.10",
+    "prettier": "3.3.2",
+    "puppeteer": "22.12.1",
+    "sass": "1.77.6",
+    "storybook": "8.1.11",
     "ts-node": "10.9.2",
-    "typescript": "5.4.5",
-    "vite": "5.2.11",
-    "@mgdis/linting-stencil": "1.1.5",
-    "@mgdis/playwright-helpers": "1.0.6",
-    "eslint-config-stencil": "1.1.9",
-    "tsconfig": "1.0.2"
+    "typescript": "5.5.3",
+    "vite": "5.3.3",
+    "@mgdis/playwright-helpers": "1.0.8",
+    "eslint-config-stencil": "1.1.11",
+    "@mgdis/linting-stencil": "1.1.6",
+    "jest-config": "1.0.5",
+    "tsconfig": "1.0.3"
   },
   "license": "BSD-3-Clause",
   "scripts": {