@canonical/react-components 2.7.8 → 2.8.0

package/dist/esm/components/SidePanel/SidePanel.js

@@ -0,0 +1,91 @@
+import React from "react";
+import classnames from "classnames";
+import { createPortal } from "react-dom";
+import Content from "./common/Content";
+import Footer from "./common/Footer";
+import Header from "./common/Header";
+import HeaderControls from "./common/HeaderControls";
+import HeaderTitle from "./common/HeaderTitle";
+import Sticky from "./common/Sticky";
+import AppAside from "../ApplicationLayout/AppAside";
+import Spinner from "../Spinner";
+import "./SidePanel.scss";
+
+/**
+ * The props for the SidePanelComponent component.
+ */
+
+/**
+This is a [React](https://reactjs.org/) component for the Vanilla application layout [Side Panel](https://vanillaframework.io/docs/layouts/application#panels).
+
+The sidepanel component should be used to show additional information relating to the main content on the page. It is using a composable structure with building blocks:
+
+* **SidePanel.Header:** Defines the header of the side panel, which can include a title and controls.
+
+* **SidePanel.HeaderTitle:** To show the title of the side panel as heading.
+
+* **SidePanel.HeaderControls:** To show controls in the header, such as buttons or icons for actions like closing the panel.
+
+* **SidePanel.Sticky:** Can be wrapped around the header or footer to make them sticky when scrolling.
+
+* **SidePanel.Content:** To show the main content of the side panel.
+
+* **SidePanel.Footer:** To show additional information or actions at the bottom of the side panel.
+
+## Example
+
+Usage of the composable structure:
+
+```jsx
+<SidePanel className="u-no-padding--top u-no-padding--bottom">
+  <SidePanel.Sticky>
+    <SidePanel.Header>
+      <SidePanel.HeaderTitle>Edit panel</SidePanel.HeaderTitle>
+    </SidePanel.Header>
+  </SidePanel.Sticky>
+  <SidePanel.Content className="u-no-padding">
+    <p>Here be dragons!</p>
+  </SidePanel.Content>
+  <SidePanel.Sticky position="bottom">
+    <SidePanel.Footer className="u-align--right">
+      <Button appearance="base">Cancel</Button>
+      <ActionButton appearance="positive">Save changes</ActionButton>
+    </SidePanel.Footer>
+  </SidePanel.Sticky>
+</SidePanel>
+```
+*/
+var SidePanelComponent = _ref => {
+  var {
+    children,
+    className,
+    hasError = false,
+    loading = false,
+    overlay,
+    pinned,
+    wide,
+    parentId = "l-application"
+  } = _ref;
+  var container = document.getElementById(parentId) || document.body;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AppAside, {
+    className: classnames("side-panel", className, {
+      "is-overlay": overlay
+    }),
+    "aria-label": "Side panel",
+    pinned: pinned,
+    narrow: !wide,
+    wide: wide
+  }, loading ? /*#__PURE__*/React.createElement("div", {
+    className: "loading"
+  }, /*#__PURE__*/React.createElement(Spinner, null)) : hasError ? /*#__PURE__*/React.createElement("div", {
+    className: "error"
+  }, "Loading failed") : children), container));
+};
+var SidePanel = SidePanelComponent;
+SidePanel.Header = Header;
+SidePanel.HeaderTitle = HeaderTitle;
+SidePanel.HeaderControls = HeaderControls;
+SidePanel.Sticky = Sticky;
+SidePanel.Content = Content;
+SidePanel.Footer = Footer;
+export default SidePanel;

package/dist/esm/components/SidePanel/SidePanel.scss

@@ -0,0 +1,45 @@
+@import "vanilla-framework";
+
+.side-panel.is-overlay {
+  position: absolute;
+  right: 0;
+  z-index: 103 !important;
+}
+
+.side-panel {
+  background-color: $colors--theme--background-default;
+  height: 100dvh;
+  padding: 0 $sph--x-large;
+  padding-bottom: $spv--medium;
+  padding-top: $spv--small;
+
+  .error,
+  .loading {
+    padding-top: $spv--medium;
+  }
+
+  .p-panel__header {
+    padding: 0;
+  }
+
+  .panel-footer {
+    .rule {
+      margin-bottom: $spv--medium;
+    }
+  }
+
+  .sticky-wrapper {
+    background: $colors--theme--background-default;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .sticky-wrapper--top {
+    top: 0;
+  }
+
+  .sticky-wrapper--bottom {
+    bottom: 0;
+  }
+}

package/dist/esm/components/SidePanel/SidePanel.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidePanel from "./SidePanel";
+declare const meta: Meta<typeof SidePanel>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Pinned: Story;
+export declare const Loading: Story;
+export declare const Error: Story;
+export declare const Wide: Story;

package/dist/esm/components/SidePanel/SidePanel.stories.js

@@ -0,0 +1,156 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import SidePanel from "./SidePanel";
+import Button from "../Button";
+import Application from "../ApplicationLayout/Application";
+import AppMain from "../ApplicationLayout/AppMain";
+import { ActionButton } from "../../index";
+import Icon from "../Icon";
+var meta = {
+  component: SidePanel,
+  tags: ["autodocs"],
+  decorators: [Story => {
+    var ref = useRef(null);
+    useEffect(() => {
+      var el = ref.current;
+      if (el) {
+        var _el$parentElement, _wrapper$parentElemen;
+        var wrapper = el === null || el === void 0 || (_el$parentElement = el.parentElement) === null || _el$parentElement === void 0 || (_el$parentElement = _el$parentElement.parentElement) === null || _el$parentElement === void 0 ? void 0 : _el$parentElement.parentElement;
+        var parent = wrapper === null || wrapper === void 0 || (_wrapper$parentElemen = wrapper.parentElement) === null || _wrapper$parentElemen === void 0 || (_wrapper$parentElemen = _wrapper$parentElemen.parentElement) === null || _wrapper$parentElemen === void 0 ? void 0 : _wrapper$parentElemen.parentElement;
+        console.log(wrapper);
+        if (wrapper) {
+          wrapper.style.setProperty("border", "0", "important");
+        }
+        if (parent) {
+          parent.style.margin = "0";
+          parent.style.padding = "0";
+        }
+      }
+    }, []);
+    document.body.style.padding = "0";
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref
+    }, /*#__PURE__*/React.createElement(Story, null));
+  }]
+};
+export default meta;
+var StoryExample = args => {
+  var [isOpen, setIsOpen] = useState(false);
+
+  // Multiple stories get rendered on the docs page, ensure the ids are not colliding
+  var id = useId();
+  var parentId = args.parentId + id;
+  var openPanel = () => {
+    setIsOpen(true);
+  };
+  var closePanel = () => {
+    setIsOpen(false);
+  };
+
+  // Delay opening the panel, so the l-application container is ready to receive it
+  useEffect(() => void setTimeout(openPanel, 100), []);
+  return /*#__PURE__*/React.createElement(Application, {
+    id: parentId
+  }, /*#__PURE__*/React.createElement(AppMain, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: openPanel,
+    style: {
+      margin: "1rem"
+    }
+  }, "Open side panel"), /*#__PURE__*/React.createElement(Button, {
+    onClick: closePanel,
+    style: {
+      margin: "1rem"
+    }
+  }, "Close side panel")), isOpen && /*#__PURE__*/React.createElement(SidePanel, {
+    overlay: args.overlay,
+    loading: args.loading,
+    hasError: args.hasError,
+    parentId: parentId,
+    pinned: args.pinned,
+    wide: args.wide,
+    className: "u-no-padding--top u-no-padding--bottom"
+  }, /*#__PURE__*/React.createElement(SidePanel.Sticky, null, /*#__PURE__*/React.createElement(SidePanel.Header, null, /*#__PURE__*/React.createElement(SidePanel.HeaderTitle, null, "Edit panel"), /*#__PURE__*/React.createElement(SidePanel.HeaderControls, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "base",
+    className: "u-no-margin--bottom",
+    hasIcon: true,
+    onClick: closePanel,
+    "aria-label": "Close"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close"
+  }))))), /*#__PURE__*/React.createElement(SidePanel.Content, {
+    className: "u-no-padding"
+  }, /*#__PURE__*/React.createElement("p", null, "Here be dragons!"), /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius mi eu pretium vulputate. Nunc commodo sit amet nibh quis rhoncus. Aliquam rhoncus porttitor semper. Aenean faucibus consectetur neque in sodales. Sed cursus mauris id ex sollicitudin sodales. Quisque molestie rutrum odio, ornare pharetra ligula. Pellentesque ornare tristique feugiat. In a augue neque. Aenean eget arcu quis lacus tempus posuere in sit amet dui. Suspendisse faucibus sapien nisl, nec laoreet sem convallis nec."), /*#__PURE__*/React.createElement("p", null, "Vestibulum sed placerat lorem. Nam luctus ex id nisi luctus, id vestibulum sem bibendum. Vivamus turpis sem, pellentesque fermentum malesuada eu, faucibus porta libero. Duis eget venenatis odio. Etiam sed volutpat magna, non tempus erat. Nunc id tortor ac quam consectetur dapibus ac ut tellus. Pellentesque ut tellus venenatis elit vehicula condimentum eget quis lorem. Ut non consectetur est, a fringilla ipsum. Nunc vitae ligula ipsum. Etiam suscipit, libero ut lacinia viverra, nunc urna consequat ex, vel eleifend eros mauris vitae ipsum. Pellentesque sed dictum augue. Ut sit amet ullamcorper mauris. Nunc congue orci mollis purus sodales facilisis ac ut arcu. Maecenas feugiat sapien ac massa mollis sodales. Donec vitae turpis eu nisi laoreet pulvinar quis at nisl. Integer volutpat, metus eget elementum dictum, lacus sapien viverra felis, consequat fermentum nisl mi ac dui."), /*#__PURE__*/React.createElement("p", null, "Nullam nulla turpis, dignissim vel dapibus ut, volutpat ac dui. Donec vel elementum lacus. Mauris maximus nec felis at faucibus. Nunc faucibus gravida velit, id blandit lectus tincidunt ac. Vestibulum orci diam, elementum in congue eu, placerat id risus. Sed tempor tempus tellus, vitae iaculis turpis fringilla nec. Phasellus imperdiet facilisis velit, sit amet lobortis odio dignissim ut."), /*#__PURE__*/React.createElement("p", null, "Nam placerat urna vitae ligula hendrerit, ac tincidunt lorem maximus. Mauris eu odio nisi. Nulla facilisi. Sed egestas elit sed velit rutrum, sit amet bibendum metus hendrerit. Pellentesque luctus placerat tellus, eu bibendum justo. Cras eget leo ac ex volutpat gravida. Duis vitae mollis ante. Duis a congue nunc. Aenean aliquet, sapien quis tincidunt tincidunt, odio eros consectetur lacus, vel finibus mauris tortor id velit. Donec tincidunt vitae purus eu interdum. Pellentesque scelerisque dui viverra ex ullamcorper volutpat. Vestibulum lacinia vitae arcu volutpat porta. Etiam et cursus nulla, id aliquet felis. Nam ultricies, urna id mattis pretium, velit erat viverra elit, eu maximus diam eros id nisi."), /*#__PURE__*/React.createElement("p", null, "Nullam eget nisl lectus. Pellentesque eu mauris ut tortor malesuada sagittis. Cras dictum cursus est non ultricies. Duis mollis non neque at commodo. Nunc feugiat justo et consequat aliquam. Ut consectetur libero eu erat feugiat finibus. Duis varius convallis quam eu sagittis. Maecenas ac est arcu. Suspendisse at enim eget nibh ultricies dictum. Etiam aliquet tellus vel felis malesuada laoreet.")), /*#__PURE__*/React.createElement(SidePanel.Sticky, {
+    position: "bottom"
+  }, /*#__PURE__*/React.createElement(SidePanel.Footer, {
+    className: "u-align--right"
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "base",
+    onClick: closePanel
+  }, "Cancel"), /*#__PURE__*/React.createElement(ActionButton, {
+    appearance: "positive"
+  }, "Save changes")))));
+};
+export var Default = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-default",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    wide: false
+  },
+  render: StoryExample
+};
+export var Pinned = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-pinned",
+    pinned: true,
+    loading: false,
+    overlay: false,
+    wide: false
+  },
+  render: StoryExample,
+  parameters: {
+    docs: {
+      disable: true
+    }
+  }
+};
+export var Loading = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-loading",
+    pinned: false,
+    loading: true,
+    overlay: true,
+    wide: false
+  },
+  render: StoryExample
+};
+export var Error = {
+  args: {
+    className: "",
+    hasError: true,
+    parentId: "l-application-error",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    wide: false
+  },
+  render: StoryExample
+};
+export var Wide = {
+  args: {
+    className: "",
+    hasError: false,
+    parentId: "l-application-wide",
+    pinned: false,
+    loading: false,
+    overlay: true,
+    wide: true
+  },
+  render: StoryExample
+};

package/dist/esm/components/SidePanel/SidePanel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SidePanel/common/Content.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface ContentProps {
+    className?: string;
+    key?: string;
+}
+declare const Content: FC<PropsWithChildren & ContentProps>;
+export default Content;

package/dist/esm/components/SidePanel/common/Content.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var Content = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("p-panel__content", className)
+  }, children);
+};
+export default Content;

package/dist/esm/components/SidePanel/common/Footer.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface FooterProps {
+    className?: string;
+    key?: string;
+}
+declare const Footer: FC<PropsWithChildren & FooterProps>;
+export default Footer;

package/dist/esm/components/SidePanel/common/Footer.js

@@ -0,0 +1,15 @@
+import React from "react";
+import classnames from "classnames";
+var Footer = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("panel-footer", className),
+    id: "panel-footer"
+  }, /*#__PURE__*/React.createElement("hr", {
+    className: "rule"
+  }), children);
+};
+export default Footer;

package/dist/esm/components/SidePanel/common/Header.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderProps {
+    className?: string;
+    key?: string;
+}
+declare const Header: FC<PropsWithChildren & HeaderProps>;
+export default Header;

package/dist/esm/components/SidePanel/common/Header.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var Header = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("p-panel__header", className)
+  }, children);
+};
+export default Header;

package/dist/esm/components/SidePanel/common/HeaderControls.d.ts

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderControlsProps {
+    className?: string;
+    key?: string;
+}
+declare const HeaderControls: FC<PropsWithChildren & HeaderControlsProps>;
+export default HeaderControls;

package/dist/esm/components/SidePanel/common/HeaderControls.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var HeaderControls = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("p-panel__controls", className)
+  }, children);
+};
+export default HeaderControls;

package/dist/esm/components/SidePanel/common/HeaderTitle.d.ts

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from "react";
+export interface HeaderTitleProps {
+    className?: string;
+}
+declare const HeaderTitle: FC<PropsWithChildren & HeaderTitleProps>;
+export default HeaderTitle;

package/dist/esm/components/SidePanel/common/HeaderTitle.js

@@ -0,0 +1,12 @@
+import React from "react";
+import classnames from "classnames";
+var HeaderTitle = _ref => {
+  var {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("h2", {
+    className: classnames("p-panel__title", className)
+  }, children);
+};
+export default HeaderTitle;

package/dist/esm/components/SidePanel/common/Sticky.d.ts

@@ -0,0 +1,8 @@
+import type { FC, PropsWithChildren } from "react";
+export interface StickyProps {
+    className?: string;
+    position?: "top" | "bottom";
+    key?: string;
+}
+declare const Sticky: FC<PropsWithChildren & StickyProps>;
+export default Sticky;

package/dist/esm/components/SidePanel/common/Sticky.js

@@ -0,0 +1,16 @@
+import React from "react";
+import classnames from "classnames";
+var Sticky = _ref => {
+  var {
+    children,
+    className,
+    position = "top"
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames("sticky-wrapper", className, {
+      "sticky-wrapper--top": position === "top",
+      "sticky-wrapper--bottom": position === "bottom"
+    })
+  }, children);
+};
+export default Sticky;

package/dist/esm/components/SidePanel/index.d.ts

@@ -0,0 +1 @@
+export { default, type Props as SidePanelProps } from "./SidePanel";

package/dist/esm/components/SidePanel/index.js

@@ -0,0 +1 @@
+export { default } from "./SidePanel";

package/dist/esm/components/Stepper/Step/Step.scss

@@ -96,7 +96,7 @@
     display: flex;
     padding: $spv--medium 0;
     padding-right: 0.5rem;
-    width: fit-content;
+    width: inherit;
   }
 
   .progress-line {

package/dist/esm/components/Stepper/Stepper.stories.js

@@ -183,7 +183,11 @@ export var HorizontalOptional = {
 };
 export var VerticalSelected = {
   name: "Vertical variant: Selected step",
-  render: () => /*#__PURE__*/React.createElement(Stepper, {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "50%"
+    }
+  }, /*#__PURE__*/React.createElement(Stepper, {
     steps: [/*#__PURE__*/React.createElement(Step, {
       key: "Vertical Selected Step 1",
       title: "Step 1",
@@ -228,7 +232,7 @@ export var VerticalSelected = {
       label: "Optional label",
       handleClick: () => {}
     })]
-  })
+  }))
 };
 export var HorizontalSelected = {
   name: "Horizontal variant: Selected step",

package/dist/esm/index.d.ts

@@ -51,6 +51,7 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SidePanel } from "./components/SidePanel";
 export { default as SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
@@ -120,6 +121,7 @@ export type { SideNavigationProps } from "./components/SideNavigation";
 export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
 export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
 export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
+export type { SidePanelProps } from "./components/SidePanel";
 export type { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";

package/dist/esm/index.js

@@ -51,6 +51,7 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SidePanel } from "./components/SidePanel";
 export { default as SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { default as SideNavigation } from "./components/SideNavigation";
 export { default as SideNavigationItem } from "./components/SideNavigation/SideNavigationItem";
 export { default as SideNavigationLink } from "./components/SideNavigation/SideNavigationLink";
 export { default as SideNavigationText } from "./components/SideNavigation/SideNavigationText";
+export { default as SidePanel } from "./components/SidePanel";
 export { default as SkipLink } from "./components/SkipLink";
 export { default as Slider } from "./components/Slider";
 export { default as Switch } from "./components/Switch";
@@ -120,6 +121,7 @@ export type { SideNavigationProps } from "./components/SideNavigation";
 export type { SideNavigationItemProps } from "./components/SideNavigation/SideNavigationItem";
 export type { SideNavigationLinkProps } from "./components/SideNavigation/SideNavigationLink";
 export type { SideNavigationTextProps } from "./components/SideNavigation/SideNavigationText";
+export type { SidePanelProps } from "./components/SidePanel";
 export type { SkipLinkProps } from "./components/SkipLink";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";

package/dist/index.js

@@ -70,6 +70,7 @@ var _exportNames = {
   SideNavigationItem: true,
   SideNavigationLink: true,
   SideNavigationText: true,
+  SidePanel: true,
   SkipLink: true,
   Slider: true,
   Switch: true,
@@ -447,6 +448,12 @@ Object.defineProperty(exports, "SideNavigationText", {
     return _SideNavigationText.default;
   }
 });
+Object.defineProperty(exports, "SidePanel", {
+  enumerable: true,
+  get: function () {
+    return _SidePanel.default;
+  }
+});
 Object.defineProperty(exports, "SkipLink", {
   enumerable: true,
   get: function () {
@@ -769,6 +776,7 @@ var _SideNavigation = _interopRequireDefault(require("./components/SideNavigatio
 var _SideNavigationItem = _interopRequireDefault(require("./components/SideNavigation/SideNavigationItem"));
 var _SideNavigationLink = _interopRequireDefault(require("./components/SideNavigation/SideNavigationLink"));
 var _SideNavigationText = _interopRequireDefault(require("./components/SideNavigation/SideNavigationText"));
+var _SidePanel = _interopRequireDefault(require("./components/SidePanel"));
 var _SkipLink = _interopRequireDefault(require("./components/SkipLink"));
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 var _Switch = _interopRequireDefault(require("./components/Switch"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.7.8",
+  "version": "2.8.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.24.1",
+    "vanilla-framework": "4.25.0",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },