@porsche-design-system/components-react 3.16.0-rc.1 → 3.16.0

package/CHANGELOG.md

@@ -14,6 +14,35 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.16.0] - 2024-07-02
+
+### [3.16.0-rc.2] - 2024-07-02
+
+#### Added
+
+- Partials: Added default `og:image` and related meta tags to the `getMetaTagsAndIconLinks` partial. Can be disabled by
+  setting the `ogImage` option to `false`.
+  ([#3357](https://github.com/porsche-design-system/porsche-design-system/pull/3357))
+
+#### Changed
+
+- `Flyout Navigation`, `Flyout Navigation Item`: renamed (experimental) component to `Flyout Multilevel` and
+  `Flyout Multilevel Item` ([#3351](https://github.com/porsche-design-system/porsche-design-system/pull/3351))
+- `Toast`: Renders fully on `#top-layer`, stacking behaviour has changed and follows W3C standards now, see
+  https://developer.mozilla.org/en-US/docs/Glossary/Top_layer and
+  https://developer.chrome.com/blog/what-is-the-top-layer
+  ([#3356](https://github.com/porsche-design-system/porsche-design-system/pull/3356))
+
+```diff
+- <p-flyout-navigation><p-flyout-navigation-item></p-flyout-navigation-item></p-flyout-navigation>
++ <p-flyout-multilevel><p-flyout-multilevel-item></p-flyout-multilevel-item></p-flyout-multilevel>
+```
+
+#### Fixed
+
+- Types: `@porsche-design-system/components-vue` typings are not exposed
+  ([#3355](https://github.com/porsche-design-system/porsche-design-system/pull/3355))
+
 ### [3.16.0-rc.1] - 2024-06-18
 
 #### Added

package/cjs/lib/components/{flyout-navigation-item.wrapper.cjs → flyout-multilevel-item.wrapper.cjs}

@@ -6,9 +6,9 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = react.forwardRef(({ identifier, label, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation-item');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -23,4 +23,4 @@ const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className,
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigationItem = PFlyoutNavigationItem;
+exports.PFlyoutMultilevelItem = PFlyoutMultilevelItem;

package/cjs/lib/components/{flyout-navigation.wrapper.cjs → flyout-multilevel.wrapper.cjs}

@@ -6,11 +6,11 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PFlyoutMultilevel = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel');
     const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -25,4 +25,4 @@ const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss,
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigation = PFlyoutNavigation;
+exports.PFlyoutMultilevel = PFlyoutMultilevel;

package/cjs/public-api.cjs

@@ -19,8 +19,8 @@ var fieldsetWrapper_wrapper = require('./lib/components/fieldset-wrapper.wrapper
 var flex_wrapper = require('./lib/components/flex.wrapper.cjs');
 var flexItem_wrapper = require('./lib/components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('./lib/components/flyout.wrapper.cjs');
-var flyoutNavigation_wrapper = require('./lib/components/flyout-navigation.wrapper.cjs');
-var flyoutNavigationItem_wrapper = require('./lib/components/flyout-navigation-item.wrapper.cjs');
+var flyoutMultilevel_wrapper = require('./lib/components/flyout-multilevel.wrapper.cjs');
+var flyoutMultilevelItem_wrapper = require('./lib/components/flyout-multilevel-item.wrapper.cjs');
 var grid_wrapper = require('./lib/components/grid.wrapper.cjs');
 var gridItem_wrapper = require('./lib/components/grid-item.wrapper.cjs');
 var heading_wrapper = require('./lib/components/heading.wrapper.cjs');
@@ -99,8 +99,8 @@ exports.PFieldsetWrapper = fieldsetWrapper_wrapper.PFieldsetWrapper;
 exports.PFlex = flex_wrapper.PFlex;
 exports.PFlexItem = flexItem_wrapper.PFlexItem;
 exports.PFlyout = flyout_wrapper.PFlyout;
-exports.PFlyoutNavigation = flyoutNavigation_wrapper.PFlyoutNavigation;
-exports.PFlyoutNavigationItem = flyoutNavigationItem_wrapper.PFlyoutNavigationItem;
+exports.PFlyoutMultilevel = flyoutMultilevel_wrapper.PFlyoutMultilevel;
+exports.PFlyoutMultilevelItem = flyoutMultilevelItem_wrapper.PFlyoutMultilevelItem;
 exports.PGrid = grid_wrapper.PGrid;
 exports.PGridItem = gridItem_wrapper.PGridItem;
 exports.PHeading = heading_wrapper.PHeading;

package/esm/lib/components/{flyout-navigation-item.wrapper.d.ts → flyout-multilevel-item.wrapper.d.ts}

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
-export type PFlyoutNavigationItemProps = BaseProps & {
+export type PFlyoutMultilevelItemProps = BaseProps & {
     /**
-     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-navigation is set to this value.
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
      */
     identifier: string;
     /**
@@ -10,9 +10,9 @@ export type PFlyoutNavigationItemProps = BaseProps & {
      */
     label?: string;
 };
-export declare const PFlyoutNavigationItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-navigation is set to this value.
+     * Unique identifier which controls if this item should be shown when the active-identifier on the flyout-multilevel is set to this value.
      */
     identifier: string;
     /**

package/esm/lib/components/{flyout-navigation-item.wrapper.mjs → flyout-multilevel-item.wrapper.mjs}

@@ -4,9 +4,9 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutNavigationItem = forwardRef(({ identifier, label, className, ...rest }, ref) => {
+const PFlyoutMultilevelItem = forwardRef(({ identifier, label, className, ...rest }, ref) => {
     const elementRef = useRef();
-    const WebComponentTag = usePrefix('p-flyout-navigation-item');
+    const WebComponentTag = usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -21,4 +21,4 @@ const PFlyoutNavigationItem = forwardRef(({ identifier, label, className, ...res
     return jsx(WebComponentTag, { ...props });
 });
 
-export { PFlyoutNavigationItem };
+export { PFlyoutMultilevelItem };

package/esm/lib/components/{flyout-navigation.wrapper.d.ts → flyout-multilevel.wrapper.d.ts}

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutNavigationAriaAttribute, FlyoutNavigationUpdateEventDetail, Theme } from '../types';
-export type PFlyoutNavigationProps = BaseProps & {
+import type { SelectedAriaAttributes, FlyoutMultilevelAriaAttribute, FlyoutMultilevelUpdateEventDetail, Theme } from '../types';
+export type PFlyoutMultilevelProps = BaseProps & {
     /**
-     * Defines which flyout-navigation-item to be visualized as opened.
+     * Defines which flyout-multilevel-item to be visualized as opened.
      */
     activeIdentifier?: string | undefined;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<FlyoutNavigationAriaAttribute>;
+    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
     /**
      * Emitted when the component requests to be dismissed.
      */
@@ -17,19 +17,19 @@ export type PFlyoutNavigationProps = BaseProps & {
     /**
      * Emitted when activeIdentifier is changed.
      */
-    onUpdate?: (event: CustomEvent<FlyoutNavigationUpdateEventDetail>) => void;
+    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
     /**
-     * If true, the flyout-navigation is visualized as opened.
+     * If true, the flyout-multilevel is visualized as opened.
      */
     open?: boolean;
     /**
-     * Adapts the flyout-navigation color depending on the theme.
+     * Adapts the flyout-multilevel color depending on the theme.
      */
     theme?: Theme;
 };
-export declare const PFlyoutNavigation: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines which flyout-navigation-item to be visualized as opened.
+     * Defines which flyout-multilevel-item to be visualized as opened.
      */
     activeIdentifier?: string | undefined;
     /**
@@ -43,13 +43,13 @@ export declare const PFlyoutNavigation: import("react").ForwardRefExoticComponen
     /**
      * Emitted when activeIdentifier is changed.
      */
-    onUpdate?: ((event: CustomEvent<FlyoutNavigationUpdateEventDetail>) => void) | undefined;
+    onUpdate?: ((event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void) | undefined;
     /**
-     * If true, the flyout-navigation is visualized as opened.
+     * If true, the flyout-multilevel is visualized as opened.
      */
     open?: boolean | undefined;
     /**
-     * Adapts the flyout-navigation color depending on the theme.
+     * Adapts the flyout-multilevel color depending on the theme.
      */
     theme?: "light" | "dark" | "auto" | undefined;
 } & {

package/esm/lib/components/{flyout-navigation.wrapper.mjs → flyout-multilevel.wrapper.mjs}

@@ -4,11 +4,11 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyoutNavigation = forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PFlyoutMultilevel = forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = usePrefix('p-flyout-navigation');
+    const WebComponentTag = usePrefix('p-flyout-multilevel');
     const propsToSync = [activeIdentifier, aria, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -23,4 +23,4 @@ const PFlyoutNavigation = forwardRef(({ activeIdentifier, aria, onDismiss, onUpd
     return jsx(WebComponentTag, { ...props });
 });
 
-export { PFlyoutNavigation };
+export { PFlyoutMultilevel };

package/esm/lib/components/index.d.ts

@@ -16,8 +16,8 @@ export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './flyout.wrapper';
-export * from './flyout-navigation.wrapper';
-export * from './flyout-navigation-item.wrapper';
+export * from './flyout-multilevel.wrapper';
+export * from './flyout-multilevel-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
 export * from './heading.wrapper';

package/esm/lib/types.d.ts

@@ -864,16 +864,16 @@ declare const FLYOUT_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type FlyoutAriaAttribute = (typeof FLYOUT_ARIA_ATTRIBUTES)[number];
-declare const FLYOUT_NAVIGATION_ARIA_ATTRIBUTES: readonly [
+declare const FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export type FlyoutNavigationAriaAttribute = (typeof FLYOUT_NAVIGATION_ARIA_ATTRIBUTES)[number];
-export type FlyoutNavigationUpdate = {
+export type FlyoutMultilevelAriaAttribute = (typeof FLYOUT_MULTILEVEL_ARIA_ATTRIBUTES)[number];
+export type FlyoutMultilevelUpdate = {
     activeIdentifier: string;
 };
 /** @deprecated */
-export type FlyoutNavigationUpdateEvent = FlyoutNavigationUpdate;
-export type FlyoutNavigationUpdateEventDetail = FlyoutNavigationUpdateEvent;
+export type FlyoutMultilevelUpdateEvent = FlyoutMultilevelUpdate;
+export type FlyoutMultilevelUpdateEventDetail = FlyoutMultilevelUpdateEvent;
 declare const GRID_DIRECTIONS: readonly [
     "row",
     "row-reverse",

package/esm/public-api.mjs

@@ -17,8 +17,8 @@ export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs'
 export { PFlex } from './lib/components/flex.wrapper.mjs';
 export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
-export { PFlyoutNavigation } from './lib/components/flyout-navigation.wrapper.mjs';
-export { PFlyoutNavigationItem } from './lib/components/flyout-navigation-item.wrapper.mjs';
+export { PFlyoutMultilevel } from './lib/components/flyout-multilevel.wrapper.mjs';
+export { PFlyoutMultilevelItem } from './lib/components/flyout-multilevel-item.wrapper.mjs';
 export { PGrid } from './lib/components/grid.wrapper.mjs';
 export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.16.0-rc.1",
+  "version": "3.16.0",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.16.0-rc.1"
+    "@porsche-design-system/components-js": "3.16.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -3668,7 +3668,7 @@ const getHiddenTextJssStyle = (isHidden = true, isShownJssStyle) => {
             ...isShownJssStyle,
         };
 };
-// TODO: migrate flyout-navigation to use shared backdrop of dialog-styles.ts
+// TODO: migrate flyout-multilevel to use shared backdrop of dialog-styles.ts
 /**
  * Generates JSS styles for a frosted glass background.
  * @param {boolean} isVisible - Determines if the frosted glass effect is visible.
@@ -5789,8 +5789,8 @@ const getFlyoutDialogResetJssStyle = () => {
     };
 };
 
-const cssVariableVisibility = '--p-internal-flyout-navigation-visibility';
-const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-navigation-visibility-transition-duration';
+const cssVariableVisibility = '--p-internal-flyout-multilevel-visibility';
+const cssVariableVisibilityTransitionDuration = '--p-internal-flyout-multilevel-visibility-transition-duration';
 const frostedGlassHeaderHeight = '4rem';
 const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
@@ -5853,7 +5853,7 @@ const getComponentCss$R = (isPrimaryScrollerVisible, isSecondaryScrollerVisible,
         scroller: {
             gridArea: '1/1',
             overflow: 'auto',
-            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            // cssVariableVisibility ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
             // on mobile we need to decide if secondary scroller needs to be visible or not, on desktop it's not necessary but also doesn't harm
             visibility: `var(${cssVariableVisibility},${isSecondaryScrollerVisible ? 'hidden' : 'inherit'})`,
             transition: `${getTransition('left', 'long', isSecondaryScrollerVisible ? 'in' : 'out')}, visibility 0s linear var(${cssVariableTransitionDuration}, ${!isPrimaryScrollerVisible || isSecondaryScrollerVisible ? motionDurationLong : '0s'})`,
@@ -6026,13 +6026,13 @@ const getComponentCss$Q = (isSecondaryScrollerVisible, theme) => {
         scroller: {
             position: 'fixed',
             inset: 0,
-            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-navigation gets closed
-            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-navigation is closed
+            // "cssVariableTransitionDuration" ensures closing animation of secondary scroller is given when whole flyout-multilevel gets closed
+            // "cssVariableVisibility" ensures secondary scroller is not tabbable when whole flyout-multilevel is closed
             ...(isSecondaryScrollerVisible
                 ? {
                     zIndex: 2,
                     transform: 'translate3d(0, 0, 0)',
-                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-navigation itself, which is hidden on mobile
+                    // TODO: Should be visibility: inherit to allow overwriting but currently not possible since it would inherit from the scroller of the p-flyout-multilevel itself, which is hidden on mobile
                     visibility: `var(${cssVariableVisibility},visible)`,
                     transition: `${getTransition('transform', 'long', 'in')}, visibility 0s linear var(${cssVariableTransitionDuration},var(${cssVariableVisibilityTransitionDuration},0s))`,
                 }
@@ -10320,13 +10320,13 @@ const getComponentCss$1 = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
-                position: 'fixed',
+                position: 'fixed', // fallback for older browsers without native `popover` support
                 insetInline: gridExtendedOffsetBase,
                 // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
                 // In addition, a public css variable can be passed to overwrite the default position.
                 [cssVariablePositionBottomInternal]: `var(${cssVariablePositionBottom}, 56px)`,
                 bottom: `var(${cssVariablePositionBottomInternal})`,
-                zIndex: TOAST_Z_INDEX,
+                zIndex: TOAST_Z_INDEX, // fallback for older browsers without native `popover` support
                 [getMediaQueryMin('s')]: {
                     insetInline: '64px auto',
                     maxWidth: 'min(42rem, calc(100vw - 64px * 2))',
@@ -10420,8 +10420,8 @@ exports.getFieldsetWrapperCss = getComponentCss$V;
 exports.getFlexCss = getComponentCss$S;
 exports.getFlexItemCss = getComponentCss$T;
 exports.getFlyoutCss = getComponentCss$P;
-exports.getFlyoutNavigationCss = getComponentCss$R;
-exports.getFlyoutNavigationItemCss = getComponentCss$Q;
+exports.getFlyoutMultilevelCss = getComponentCss$R;
+exports.getFlyoutMultilevelItemCss = getComponentCss$Q;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/{flyout-navigation-item.wrapper.cjs → flyout-multilevel-item.wrapper.cjs}

@@ -5,11 +5,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
-var flyoutNavigationItem = require('../dsr-components/flyout-navigation-item.cjs');
+var flyoutMultilevelItem = require('../dsr-components/flyout-multilevel-item.cjs');
 
-const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className, children, ...rest }, ref) => {
+const PFlyoutMultilevelItem = react.forwardRef(({ identifier, label, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation-item');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel-item');
     const propsToSync = [identifier, label];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -24,7 +24,7 @@ const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyoutNavigationItem.DSRFlyoutNavigationItem, { identifier, label, children })),
+                children: (jsxRuntime.jsx(flyoutMultilevelItem.DSRFlyoutMultilevelItem, { identifier, label, children })),
             }
             : {
                 children,
@@ -37,4 +37,4 @@ const PFlyoutNavigationItem = react.forwardRef(({ identifier, label, className,
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigationItem = PFlyoutNavigationItem;
+exports.PFlyoutMultilevelItem = PFlyoutMultilevelItem;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/{flyout-navigation.wrapper.cjs → flyout-multilevel.wrapper.cjs}

@@ -5,13 +5,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
-var flyoutNavigation = require('../dsr-components/flyout-navigation.cjs');
+var flyoutMultilevel = require('../dsr-components/flyout-multilevel.cjs');
 
-const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, children, ...rest }, ref) => {
+const PFlyoutMultilevel = react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
-    const WebComponentTag = hooks.usePrefix('p-flyout-navigation');
+    const WebComponentTag = hooks.usePrefix('p-flyout-multilevel');
     const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
@@ -26,7 +26,7 @@ const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyoutNavigation.DSRFlyoutNavigation, { activeIdentifier, aria, open, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(flyoutMultilevel.DSRFlyoutMultilevel, { activeIdentifier, aria, open, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,
@@ -39,4 +39,4 @@ const PFlyoutNavigation = react.forwardRef(({ activeIdentifier, aria, onDismiss,
     return jsxRuntime.jsx(WebComponentTag, { ...props });
 });
 
-exports.PFlyoutNavigation = PFlyoutNavigation;
+exports.PFlyoutMultilevel = PFlyoutMultilevel;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/toast.wrapper.cjs

@@ -23,6 +23,7 @@ const PToast = react.forwardRef(({ theme, className, ...rest }, ref) => {
         // @ts-ignore
         ...(!process.browser
             ? {
+                ...{ "role": "status", "aria-live": "polite" },
                 children: (jsxRuntime.jsx(toast.DSRToast, { theme: theme || hooks.useTheme() })),
             }
             : {

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-tile.cjs

@@ -20,8 +20,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 var flyout_wrapper = require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.cjs

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/{flyout-navigation-item.cjs → flyout-multilevel-item.cjs}

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -78,17 +78,17 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.cjs');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
 
 /** @experimental */
-class DSRFlyoutNavigationItem extends react.Component {
+class DSRFlyoutMultilevelItem extends react.Component {
     host;
     get theme() {
-        return this.props.theme || 'light'; // default as fallback (internal private prop is controlled by flyout-navigation)
+        return this.props.theme || 'light'; // default as fallback (internal private prop is controlled by flyout-multilevel)
     }
     get open() {
-        return this.props.open || false; // default as fallback (internal private prop is controlled by flyout-navigation)
+        return this.props.open || false; // default as fallback (internal private prop is controlled by flyout-multilevel)
     }
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutNavigationItemCss(this.open, this.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutMultilevelItemCss(this.open, this.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "button", type: "button", size: "medium", alignLabel: "start", stretch: true, icon: "arrow-head-right", active: this.open, aria: { 'aria-expanded': this.open }, theme: this.theme, children: this.props.label }), jsxRuntime.jsxs("div", { className: "scroller", 
                                     // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                                     // eslint-disable-next-line
@@ -97,4 +97,4 @@ class DSRFlyoutNavigationItem extends react.Component {
     }
 }
 
-exports.DSRFlyoutNavigationItem = DSRFlyoutNavigationItem;
+exports.DSRFlyoutMultilevelItem = DSRFlyoutMultilevelItem;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/{flyout-navigation.cjs → flyout-multilevel.cjs}

@@ -19,8 +19,8 @@ require('../components/fieldset-wrapper.wrapper.cjs');
 require('../components/flex.wrapper.cjs');
 require('../components/flex-item.wrapper.cjs');
 require('../components/flyout.wrapper.cjs');
-require('../components/flyout-navigation.wrapper.cjs');
-require('../components/flyout-navigation-item.wrapper.cjs');
+require('../components/flyout-multilevel.wrapper.cjs');
+require('../components/flyout-multilevel-item.wrapper.cjs');
 require('../components/grid.wrapper.cjs');
 require('../components/grid-item.wrapper.cjs');
 require('../components/heading.wrapper.cjs');
@@ -79,14 +79,14 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
 
 /** @experimental */
-class DSRFlyoutNavigation extends react.Component {
+class DSRFlyoutMultilevel extends react.Component {
     host;
     // TODO: shouldn't open prop be changed internally too?
-    flyoutNavigationItemElements = [];
+    flyoutMultilevelItemElements = [];
     dialog;
     render() {
         splitChildren.splitChildren(this.props.children);
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutNavigationCss(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getFlyoutMultilevelCss(this.props.open, !!this.props.activeIdentifier, this.props.theme)));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("dialog", { 
                             // "inert" will be known from React 19 onwards, see https://github.com/facebook/react/pull/24730
                             // eslint-disable-next-line
@@ -95,4 +95,4 @@ class DSRFlyoutNavigation extends react.Component {
     }
 }
 
-exports.DSRFlyoutNavigation = DSRFlyoutNavigation;
+exports.DSRFlyoutMultilevel = DSRFlyoutMultilevel;