@mgdis/mg-components 6.3.0 → 6.5.0

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

@@ -7,9 +7,6 @@ export declare class MgMenu {
      * Internal *
      ************/
     private readonly name;
-    private menuItems;
-    private focusedMenuItem;
-    private itemMoreElement;
     /**************
      * Decorators *
      **************/
@@ -40,37 +37,29 @@ export declare class MgMenu {
     size: MenuSizeType;
     validateSize(newValue: MgMenu['size']): void;
     /**
-     * is this menu a child menu. Used for conditional render.
+     * Define mg-menu-item listener when they are loaded
+     * @param event - mg-item-loaded "item-loaded" custom event
      */
-    isChildMenu: boolean;
+    updateItemListener(event: CustomEvent & {
+        target: HTMLMgMenuItemElement;
+    }): void;
     /*************
      * Methods *
      *************/
     /**
-     * Close matching menu-item
-     * @param item - menu-item to close
-     * @param condition - addionnal condition
+     * Test if menu is a child menu
+     * @returns truthy if menu is a child menu
      */
-    private closeMenuItem;
+    private isChildMenu;
     /**
-     * get mg-item-more child mg-menu-item element
-     * @returns mg-menu-item element
+     * Get menu children items
+     * @returns menu children mg-menu-item
      */
-    private getItemMoreMenuItem;
+    private getMenuItems;
     /**
-     * Set item listend
-     * @param item - mg-menu-item element
-     * @param index - number
+     * Update menu items
      */
-    private setItemListener;
-    /**
-     * Store menu-items on component init and add listeners
-     */
-    private initMenuItemsListeners;
-    /**
-     * Handle item-loaded event on mg-item-more element
-     */
-    private handleItemLoaded;
+    private updateMenuItems;
     /**
      * render mg-item-more
      */
@@ -84,13 +73,8 @@ export declare class MgMenu {
     componentWillLoad(): void;
     /**
      * Check if component slots configuration
-     * @returns timeout
-     */
-    componentDidLoad(): ReturnType<typeof setTimeout>;
-    /**
-     * Add listeners to items
      */
-    componentDidRender(): void;
+    componentDidLoad(): void;
     /**
      * Render
      * @returns HTML Element

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

@@ -16,6 +16,7 @@ export declare class MgMenuItem {
     private readonly name;
     private readonly navigationButton;
     private messages;
+    private popoverIdentifier;
     /**************
      * Decorators *
      **************/
@@ -45,19 +46,15 @@ export declare class MgMenuItem {
      * Define menu-item status.
      */
     status?: MgMenuStatusType;
-    validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
+    watchStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
     /**
      * Define menu-item content expanded.
      */
     expanded?: boolean;
-    validateExpanded(newValue: MgMenuItem['expanded']): void;
+    watchExpanded(newValue: MgMenuItem['expanded']): void;
     /**********
      * Events *
      *********/
-    /**
-     * Emited event when status change
-     */
-    statusChange: EventEmitter<HTMLMgMenuItemElement['status']>;
     /**
      * Emited event when item is loaded
      */
@@ -73,7 +70,7 @@ export declare class MgMenuItem {
      * Define menu-item size.
      */
     size: MenuSizeType;
-    validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
+    watchSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
     /**
      * Component button classes
      */
@@ -82,11 +79,7 @@ export declare class MgMenuItem {
      * Parent menu direction
      */
     direction: DirectionType;
-    validateDirection(newValue: MgMenuItem['direction']): void;
-    /**
-     * Does component is in main menu
-     */
-    isInMainMenu: boolean;
+    validateDirection(newValue: MgMenuItem['direction'], oldValue: MgMenuItem['direction']): void;
     /**
      * Does element is item-more
      */
@@ -100,13 +93,24 @@ export declare class MgMenuItem {
      * Does component should display notification badge.
      */
     displayNotificationBadge: boolean;
+    /**
+     * direction value in dataset
+     * @param newValue - new direction value
+     */
+    watchDataStyleDirection(newValue: DirectionType): void;
+    /**
+     * has focus value in dataset
+     * @param newValue - new direction value
+     */
+    watchDataHasFocus(newValue: string): void;
     /***********
      * Methods *
      **********/
     /**
-     * Toggle expanded prop value
+     * Get parent menu
+     * @returns parent menu
      */
-    private toggleExpanded;
+    private getParentMenu;
     /**
      * Does an Element have given Status
      * @param mgMenuItemElement - to parse
@@ -114,6 +118,21 @@ export declare class MgMenuItem {
      * @returns true if element with status is found
      */
     private hasStatus;
+    /**
+     * Condition to know if component should display a mg-popover
+     * @returns truthy if component display popover
+     */
+    private hasPopover;
+    /**
+     * Method to control if one of component children have active status
+     * @returns truthy if component has active child
+     */
+    private hasActiveChild;
+    /**
+     * Is component an interactive item
+     * @returns truthy if element is clickable
+     */
+    private isInteractiveItem;
     /**
      * Is component contextual direction match the given direction
      * @param direction - in parent menu
@@ -121,44 +140,40 @@ export declare class MgMenuItem {
      * @returns true is direction match the direction propertie
      */
     private isDirection;
+    /**
+     * Does component is in main menu
+     * @returns true if component is in main menu
+     */
+    private isInMainMenu;
     /**
      * Update displayNotificationBadge
      * current component notification badge have priority over the slot badge when submenu contain badge
      */
     private updateDisplayNotificationBadge;
     /**
-     * Method to control if one of component children have active status
-     * @returns truthy if component has active child
-     */
-    private hasActiveChild;
-    /**
-     * Validate slots
-     * @param guard - prevent action with guard. Default: false.
+     * Update expanded prop
+     * @param newValue - expanded new value
      */
-    private validateSlot;
+    private updateExpanded;
     /**
      * Update status
      * @param guard - status to exclude from process in addition to [Status.HIDDEN, Status.DISABLED] . Default: [].
      */
     private updateStatus;
-    /**
-     * Init event-listeners
-     */
-    private initListeners;
-    /**
-     * Get mg-popover identifier
-     * @returns generated mg-popover identifier
-     */
-    private getPopoverIdentifier;
     /**
      * Render popover clickoutside guard for content slot
      */
     private updatePopoverGuard;
     /**
-     * Condition to know if component should display a mg-popover
-     * @returns truthy if component display popover
+     * Update slots
+     * @param guard - prevent action with guard. Default: false.
      */
-    private displayPopover;
+    private updateSlot;
+    /**
+     * Update menu item
+     * @param guard - prevent action with guard
+     */
+    private updateItem;
     /************
      * Handlers *
      ************/
@@ -184,6 +199,11 @@ export declare class MgMenuItem {
      * @returns timeout
      */
     componentDidLoad(): ReturnType<typeof setTimeout>;
+    /**
+     * Emit event when component is updated
+     * @returns promise process wich emit the 'item-updated' event
+     */
+    componentShouldUpdate(): Promise<void>;
     /**
      * Render ineractive element
      * @returns HTML Element
@@ -194,11 +214,6 @@ export declare class MgMenuItem {
      * @returns HTML Element
      */
     private renderSlot;
-    /**
-     * Emit event when component is updated
-     * @returns promise process wich emit the 'item-updated' event
-     */
-    componentShouldUpdate(): Promise<void>;
     /**
      * Render
      * @returns HTML Element

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

@@ -11,6 +11,10 @@ export declare class MgDetails {
     /**************
      * Decorators *
      **************/
+    /**
+     * Get component DOM element
+     */
+    element: HTMLMgDetailsElement;
     /**
      * Displayed title when details are closed
      */

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

@@ -0,0 +1,6 @@
+import { type ExtendedPlacement, placements } from '../../../utils/floating-ui.utils';
+export * from '../../../utils/floating-ui.utils';
+/**
+ * Placement type from placements
+ */
+export type PopoverPlacementType = ExtendedPlacement & (typeof placements)[number];

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from '@popperjs/core';
+import { type PopoverPlacementType } from './mg-popover.conf';
 /**
  * @slot - Element that will display the popover
  * @slot content - popover content
@@ -8,10 +8,10 @@ export declare class MgPopover {
     /************
      * Internal *
      ************/
-    private popper;
     private mgPopover;
     private mgPopoverContent;
     private windows;
+    private floatingUICleanup;
     /**************
      * Decorators *
      **************/
@@ -28,7 +28,8 @@ export declare class MgPopover {
     /**
      * Popover placement
      */
-    placement: Placement;
+    placement: PopoverPlacementType;
+    watchPlacement(newValue: any): void;
     /**
      * Hide popover arrow
      */
@@ -69,11 +70,6 @@ export declare class MgPopover {
      * Hide popover
      */
     private hide;
-    /**
-     * Set popper listeners
-     * @param newValue - if true enable popper listners
-     */
-    private setPopperListeners;
     /**
      * Manage all clickOustside listeners
      * @param action - top process on elements listeners
@@ -87,6 +83,11 @@ export declare class MgPopover {
      * Render popover content element
      */
     private renderPopoverContent;
+    /**
+     * Set up Floating UI positioning and arrow behavior
+     * @param interactiveElement - Element that triggers the popover
+     */
+    private setFloatingUI;
     /*************
      * Lifecycle *
      *************/
@@ -102,6 +103,10 @@ export declare class MgPopover {
      * Check if component props are well configured on init
      */
     componentDidLoad(): void;
+    /**
+     * Cleanup when component is disconnected
+     */
+    disconnectedCallback(): void;
     /**
      * Render
      * @returns HTML Element

package/dist/types/components.d.ts

@@ -26,11 +26,12 @@ import { MgMenuStatusType, TargetType } from "./components/molecules/menu/mg-men
 import { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 import { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 import { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-import { Placement } from "@popperjs/core";
+import { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
 import { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
+import { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export { MgActionMoreButtonType, MgActionMoreDividerType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.conf";
 export { VariantStyleType, VariantType } from "./components/molecules/mg-alert/mg-alert.conf";
 export { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
@@ -52,11 +53,12 @@ export { MgMenuStatusType, TargetType } from "./components/molecules/menu/mg-men
 export { VariantStyleType as VariantStyleType1, VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 export { DialogRoleType } from "./components/molecules/mg-modal/mg-modal.conf";
 export { ExpandToggleDisplayType, TitlePositionType } from "./components/molecules/mg-panel/mg-panel.conf";
-export { Placement } from "@popperjs/core";
+export { PopoverPlacementType } from "./components/molecules/mg-popover/mg-popover.conf";
 export { AriaRoleType as AriaRoleType1 } from "./components/molecules/mg-progress/mg-progress.conf";
 export { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 export { SizeType as SizeType2, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 export { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
+export { TooltipPlacementType } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export namespace Components {
     interface MgActionMore {
         /**
@@ -1373,7 +1375,7 @@ export namespace Components {
         /**
           * Popover placement
          */
-        "placement": Placement;
+        "placement": PopoverPlacementType;
     }
     interface MgPopoverContent {
         /**
@@ -1465,7 +1467,7 @@ export namespace Components {
         /**
           * Tooltip placement
          */
-        "placement": Placement;
+        "placement": TooltipPlacementType;
     }
     interface MgTooltipContent {
         /**
@@ -1889,7 +1891,6 @@ declare global {
         new (): HTMLMgMenuElement;
     };
     interface HTMLMgMenuItemElementEventMap {
-        "status-change": HTMLMgMenuItemElement['status'];
         "item-loaded": void;
         "item-updated": void;
     }
@@ -3267,10 +3268,6 @@ declare namespace LocalJSX {
           * Emited event when item is updated
          */
         "onItem-updated"?: (event: MgMenuItemCustomEvent<void>) => void;
-        /**
-          * Emited event when status change
-         */
-        "onStatus-change"?: (event: MgMenuItemCustomEvent<HTMLMgMenuItemElement['status']>) => void;
         /**
           * Define menu-item status.
          */
@@ -3432,7 +3429,7 @@ declare namespace LocalJSX {
         /**
           * Popover placement
          */
-        "placement"?: Placement;
+        "placement"?: PopoverPlacementType;
     }
     interface MgPopoverContent {
         /**
@@ -3536,7 +3533,7 @@ declare namespace LocalJSX {
         /**
           * Tooltip placement
          */
-        "placement"?: Placement;
+        "placement"?: TooltipPlacementType;
     }
     interface MgTooltipContent {
         /**

package/dist/types/utils/behaviors.utils.d.ts

@@ -1,15 +1,13 @@
-export declare const OverflowBehaviorElements: {
-    BASE_INDEX: string;
-    PROXY_INDEX: string;
-};
+/**
+ *
+ */
 export declare class OverflowBehavior {
-    private element;
-    private render;
+    private parentElement;
+    private itemMoreElement;
+    private itemMoreContainerElement;
     private _resizeObserver;
-    private _moreElement;
-    private _baseChildren;
-    private _proxyChildren;
-    constructor(element: Element, render: () => HTMLElement);
+    private _availableWidth;
+    constructor(parentElement: HTMLElement, itemMoreElement: HTMLElement, itemMoreContainerElement: HTMLElement);
     /**********
      * Public *
      **********/
@@ -21,49 +19,22 @@ export declare class OverflowBehavior {
      * Internal *
      ************/
     /**
-     * run overflow behavior
-     * @param width - width of the container. Optional.
-     */
-    private run;
-    /**
-     * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-     * @param element - element to parse
-     * @returns children
-     */
-    private getInteractiveItems;
-    /**
-     * Update displayed items in container from a given available space
-     * @param availableWidth - available width in container to display child items
+     * Utility method to know if element is HTMLMgItemMoreElement
+     * @param element - element to match with 'MORE' element
+     * @returns truthy if element is the 'MORE' element
      */
-    private updateDisplayedItems;
+    private isMoreElement;
     /**
      * Utility method to know if item overflow partialy or totaly in the container
      * @param cumulateWidth - previous sibling elements cumulate width + item width
      * @param item - item HTML element
-     * @param availableWidth - container available width
      * @returns truthy if element is overflow
      */
     private isOverflowElement;
     /**
-     * Utility method to know if a given element is the 'MORE' element
-     * @param element - element to match with 'MORE' element
-     * @returns truthy if element is the 'MORE' element
-     */
-    private isMoreElement;
-    /**
-     * Toggle display item element
-     * @param item - item to control
-     * @param isHidden - is item hidden
+     * Toogle item from isHidden condition
+     * @param item - item to update
+     * @param isHidden - item is hidden
      */
     private toggleItem;
-    /**
-     * Toggle element's hide attribute
-     * @param element - element to toggle
-     * @param isHidden - element is hidden
-     */
-    private toggleElement;
-    /**
-     * Remove hidden attributes on all items
-     */
-    private restoreItems;
 }

package/dist/types/utils/floating-ui.utils.d.ts

@@ -0,0 +1,19 @@
+import { type Placement } from "@floating-ui/dom";
+/**
+ * List of all possibles sides
+ */
+export declare const sides: readonly ["top", "right", "bottom", "left"];
+/**
+ * List of all possibles placements
+ */
+export declare const placements: readonly ["top", "right", "bottom", "left", "auto", "auto-start", "auto-end", "top-start", "top-end", "bottom-start", "bottom-end", "right-start", "right-end", "left-start", "left-end"];
+/**
+ * Define placement type
+ */
+export type ExtendedPlacement = Placement | (typeof placements)[number];
+/**
+ * FloatingUI Placement type guard
+ * @param placement - value to check
+ * @returns truthy if placement is valid
+ */
+export declare const isFloatingUIPlacement: (placement: any) => placement is Placement;

package/ide/intellij/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@mgdis/mg-components",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4887,7 +4887,7 @@
         },
         {
           "name": "mg-menu",
-          "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",
+          "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\nListeners:\n- `item-loaded`\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": [
             {
@@ -4974,7 +4974,7 @@
         },
         {
           "name": "mg-menu-item",
-          "description": "Attributes:\n- `expanded`: Define menu-item content expanded.\n- `href`: Define menu-item href\nwhen defined menu-item contain an anchor instead of button\n- `identifier`: Identifier is used to control mg-popover\n- `status`: Define menu-item status.\n- `target`: Define target type\n\nEvents:\n- `item-loaded`: Emited event when item is loaded\n- `item-updated`: Emited event when item is updated\n- `status-change`: Emited event when status change\n\nSlots:\n- ``: Menu item content\n- `image`: Menu item image content\n- `information`: Menu item information content\n- `label`: Menu item label content\n- `metadata`: Menu item metadata content\n\n",
+          "description": "Attributes:\n- `expanded`: Define menu-item content expanded.\n- `href`: Define menu-item href\nwhen defined menu-item contain an anchor instead of button\n- `identifier`: Identifier is used to control mg-popover\n- `status`: Define menu-item status.\n- `target`: Define target type\n\nEvents:\n- `item-loaded`: Emited event when item is loaded\n- `item-updated`: Emited event when item is updated\n\nSlots:\n- ``: Menu item content\n- `image`: Menu item image content\n- `information`: Menu item information content\n- `label`: Menu item label content\n- `metadata`: Menu item metadata content\n\n",
           "doc-url": "http://core.pages.mgdis.fr/core-ui/core-ui/storybook/?path=/docs/molecules-menu-mg-menu-item--docs",
           "attributes": [
             {
@@ -5085,10 +5085,6 @@
               {
                 "name": "item-updated",
                 "description": "Emited event when item is updated"
-              },
-              {
-                "name": "status-change",
-                "description": "Emited event when status change"
               }
             ]
           },

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

@@ -5171,7 +5171,7 @@
     },
     {
       "name": "mg-menu",
-      "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",
+      "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\nListeners:\n- `item-loaded`\n\nSlots:\n- ``: Menu content\n\n",
       "attributes": [
         {
           "name": "direction",
@@ -5262,7 +5262,7 @@
     },
     {
       "name": "mg-menu-item",
-      "description": "Attributes:\n- `expanded`: Define menu-item content expanded.\n- `href`: Define menu-item href\nwhen defined menu-item contain an anchor instead of button\n- `identifier`: Identifier is used to control mg-popover\n- `status`: Define menu-item status.\n- `target`: Define target type\n\nEvents:\n- `item-loaded`: Emited event when item is loaded\n- `item-updated`: Emited event when item is updated\n- `status-change`: Emited event when status change\n\nSlots:\n- ``: Menu item content\n- `image`: Menu item image content\n- `information`: Menu item information content\n- `label`: Menu item label content\n- `metadata`: Menu item metadata content\n\n",
+      "description": "Attributes:\n- `expanded`: Define menu-item content expanded.\n- `href`: Define menu-item href\nwhen defined menu-item contain an anchor instead of button\n- `identifier`: Identifier is used to control mg-popover\n- `status`: Define menu-item status.\n- `target`: Define target type\n\nEvents:\n- `item-loaded`: Emited event when item is loaded\n- `item-updated`: Emited event when item is updated\n\nSlots:\n- ``: Menu item content\n- `image`: Menu item image content\n- `information`: Menu item information content\n- `label`: Menu item label content\n- `metadata`: Menu item metadata content\n\n",
       "attributes": [
         {
           "name": "expanded",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -33,40 +33,40 @@
     "outputName": "junit.xml"
   },
   "dependencies": {
-    "@popperjs/core": "2.11.8",
-    "@stencil/core": "4.22.3",
+    "@floating-ui/dom": "1.6.13",
+    "@stencil/core": "4.25.1",
     "@mgdis/img": "2.1.2",
-    "@mgdis/stencil-helpers": "2.2.1",
-    "@mgdis/styles": "2.2.0"
+    "@mgdis/stencil-helpers": "2.2.3",
+    "@mgdis/styles": "2.2.2"
   },
   "devDependencies": {
-    "@playwright/test": "1.49.1",
-    "@storybook/addon-a11y": "8.4.7",
-    "@storybook/addon-actions": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/blocks": "8.4.7",
-    "@storybook/html": "8.4.7",
-    "@storybook/html-vite": "8.4.7",
-    "@storybook/manager-api": "8.4.7",
-    "@storybook/theming": "8.4.7",
+    "@playwright/test": "1.50.0",
+    "@storybook/addon-a11y": "8.5.2",
+    "@storybook/addon-actions": "8.5.2",
+    "@storybook/addon-essentials": "8.5.2",
+    "@storybook/addon-interactions": "8.5.2",
+    "@storybook/addon-links": "8.5.2",
+    "@storybook/blocks": "8.5.2",
+    "@storybook/html": "8.5.2",
+    "@storybook/html-vite": "8.5.2",
+    "@storybook/manager-api": "8.5.2",
+    "@storybook/theming": "8.5.2",
     "@types/jest": "29.5.14",
-    "@types/node": "22.10.2",
-    "chromatic": "11.20.1",
+    "@types/node": "22.12.0",
+    "chromatic": "11.25.1",
     "eslint": "8.57.1",
-    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-storybook": "0.11.2",
     "jest": "29.7.0",
     "jest-cli": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-stub": "2.0.0",
     "react": "18.3.1",
-    "sass": "1.82.0",
-    "storybook": "8.4.7",
-    "typescript": "5.7.2",
-    "vite": "6.0.3",
+    "sass": "1.83.4",
+    "storybook": "8.5.2",
+    "typescript": "5.7.3",
+    "vite": "6.0.11",
     "@core-ui/jest-config": "1.0.9",
-    "@mgdis/linting-stencil": "1.3.2",
+    "@mgdis/linting-stencil": "1.3.4",
     "@mgdis/playwright-helpers": "1.0.11"
   },
   "license": "BSD-3-Clause",