@porsche-design-system/components-vue 4.2.0-rc.4 → 4.2.0-rc.5

package/CHANGELOG.md

@@ -14,6 +14,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.2.0-rc.5] - 2026-06-12
+
+### Added
+
+- `Flyout`: Prop `fullscreen` to stretch the flyout to the full viewport width with squared corners, useful for smaller
+  viewports ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))
+
+### Fixed
+
+- `Flyout`, `Modal`, `Sheet` ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498)):
+  - Nested dialog elements no longer cause rendering issues in Chromium
+  - Keep the dialog element on the `#top-layer` during the fade-out animation in Safari and Firefox, so closing
+    (especially nested) dialogs no longer drop behind surrounding content
+- `Banner`: Keep the popover on the `#top-layer` during the fade-out animation in Safari and Firefox, so it no longer
+  drops behind surrounding content while closing
+  ([#4498](https://github.com/porsche-design-system/porsche-design-system/pull/4498))
+
 ## [4.2.0-rc.4] - 2026-06-10
 
 ### Fixed

package/cjs/lib/components/FlyoutWrapper.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const e=require(`../../utils.cjs`);let t=require(`vue`);var n=(0,t.defineComponent)({__name:`FlyoutWrapper`,props:{aria:{},backdrop:{default:`blur`},background:{default:`canvas`},disableBackdropClick:{type:Boolean,default:!1},footerBehavior:{default:`sticky`},open:{type:Boolean,default:!1},position:{default:`end`}},emits:[`dismiss`,`motionHiddenEnd`,`motionVisibleEnd`],setup(n,{emit:r}){let i=e.usePrefix(`p-flyout`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`dismiss`,s),e.addEventListenerToElementRef(o,`motionHiddenEnd`,s),e.addEventListenerToElementRef(o,`motionVisibleEnd`,s)}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;
+const e=require(`../../utils.cjs`);let t=require(`vue`);var n=(0,t.defineComponent)({__name:`FlyoutWrapper`,props:{aria:{},backdrop:{default:`blur`},background:{default:`canvas`},disableBackdropClick:{type:Boolean,default:!1},footerBehavior:{default:`sticky`},fullscreen:{type:[Boolean,Object],default:!1},open:{type:Boolean,default:!1},position:{default:`end`}},emits:[`dismiss`,`motionHiddenEnd`,`motionVisibleEnd`],setup(n,{emit:r}){let i=e.usePrefix(`p-flyout`),a=n,o=(0,t.ref)(),s=r,c=()=>e.syncProperties(o,a);return(0,t.onMounted)(()=>{c(),e.addEventListenerToElementRef(o,`dismiss`,s),e.addEventListenerToElementRef(o,`motionHiddenEnd`,s),e.addEventListenerToElementRef(o,`motionVisibleEnd`,s)}),(0,t.onUpdated)(c),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)((0,t.unref)(i)),{ref_key:`pdsComponentRef`,ref:o},{default:(0,t.withCtx)(()=>[(0,t.renderSlot)(e.$slots,`default`)]),_:3},512))}});exports.default=n;

package/esm/lib/components/FlyoutWrapper.vue.d.ts

@@ -1,4 +1,4 @@
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutPosition } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, BreakpointCustomizable, FlyoutPosition } from '../types';
 export type PFlyoutProps = {
     /**
      * Sets ARIA attributes.
@@ -24,6 +24,11 @@ export type PFlyoutProps = {
      * @default 'sticky'
      */
     footerBehavior?: FlyoutFooterBehavior;
+    /**
+     * If true the flyout stretches to the full viewport width with squared corners. Useful for smaller viewports where the flyout would otherwise fill the screen but still show rounded corners.
+     * @default false
+     */
+    fullscreen?: BreakpointCustomizable<boolean>;
     /**
      * If true, the flyout is open.
      * @default false
@@ -52,6 +57,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PFlyou
     backdrop: FlyoutBackdrop;
     disableBackdropClick: boolean;
     footerBehavior: FlyoutFooterBehavior;
+    fullscreen: BreakpointCustomizable<boolean>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;

package/esm/lib/components/FlyoutWrapper.vue_vue_type_script_setup_true_lang.mjs

@@ -12,6 +12,10 @@ var p = /* @__PURE__ */ i({
 			default: !1
 		},
 		footerBehavior: { default: "sticky" },
+		fullscreen: {
+			type: [Boolean, Object],
+			default: !1
+		},
 		open: {
 			type: Boolean,
 			default: !1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "4.2.0-rc.4",
+  "version": "4.2.0-rc.5",
   "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",
@@ -21,7 +21,7 @@
     "url": "https://github.com/porsche-design-system/porsche-design-system"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "4.2.0-rc.4"
+    "@porsche-design-system/components-js": "4.2.0-rc.5"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 35.0.0 <36.0.0",