@porsche-design-system/components-vue 3.33.0 → 3.34.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,18 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [3.34.0-rc.0] - 2026-04-01
+
+### Added
+
+- `Segmented Control`: `noWrap` property to render items inline with optional scroller
+  ([#4244](https://github.com/porsche-design-system/porsche-design-system/pull/4244))
+
+### Fixed
+
+- `Accordion`: missing `delegatesFocus`
+  ([#4238](https://github.com/porsche-design-system/porsche-design-system/pull/4238))
+
 ## [3.33.0] - 2026-03-09
 
 ## [3.33.0-rc.0] - 2026-03-04

package/cjs/lib/components/SegmentedControlWrapper.vue.cjs

@@ -1 +1 @@
-"use strict";const e=require("vue"),t=require("../../utils.cjs"),m=e.defineComponent({__name:"SegmentedControlWrapper",props:{backgroundColor:{},columns:{default:"auto"},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},message:{default:""},name:{},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{}},emits:["update:value","blur","change","segmentedControlChange","update"],setup(d,{emit:u}){const c=t.usePrefix("p-segmented-control"),s=d,n=e.ref(),o=u,l=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...s,theme:s.theme||l.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",o),t.addEventListenerToElementRef(n,"change",o,a=>{o("update:value",a.target.value)}),t.addEventListenerToElementRef(n,"segmentedControlChange",o),t.addEventListenerToElementRef(n,"update",o)}),e.onUpdated(r),e.watch(l,a=>{t.syncProperties(n,{theme:s.theme||a})}),(a,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(c)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=m;
+"use strict";const e=require("vue"),t=require("../../utils.cjs"),c=e.defineComponent({__name:"SegmentedControlWrapper",props:{backgroundColor:{},columns:{default:"auto"},compact:{type:Boolean,default:!1},description:{default:""},disabled:{type:Boolean,default:!1},form:{},hideLabel:{type:[Boolean,Object],default:!1},label:{default:""},message:{default:""},name:{},noWrap:{type:Boolean,default:!1},required:{type:Boolean,default:!1},state:{default:"none"},theme:{},value:{}},emits:["update:value","blur","change","segmentedControlChange","update"],setup(d,{emit:u}){const p=t.usePrefix("p-segmented-control"),l=d,n=e.ref(),o=u,s=e.inject(t.themeInjectionKey),r=()=>t.syncProperties(n,{...l,theme:l.theme||s.value});return e.onMounted(()=>{r(),t.addEventListenerToElementRef(n,"blur",o),t.addEventListenerToElementRef(n,"change",o,a=>{o("update:value",a.target.value)}),t.addEventListenerToElementRef(n,"segmentedControlChange",o),t.addEventListenerToElementRef(n,"update",o)}),e.onUpdated(r),e.watch(s,a=>{t.syncProperties(n,{theme:l.theme||a})}),(a,f)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(p)),{ref_key:"pdsComponentRef",ref:n},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"default")]),_:3},512))}});module.exports=c;

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

@@ -40,6 +40,10 @@ type PSegmentedControlProps = {
      * The name of the segmented-control.
      */
     name?: string;
+    /**
+     * If true, prevents items from wrapping to new rows and renders them in a single scrollable row instead.
+     */
+    noWrap?: boolean;
     /**
      * A boolean value that specifies a selection must be made from the group before the form can be submitted.
      */
@@ -75,6 +79,7 @@ declare const __VLS_base: import("vue").DefineComponent<PSegmentedControlProps,
     hideLabel: BreakpointCustomizable<boolean>;
     message: string;
     columns: BreakpointCustomizable<SegmentedControlColumns>;
+    noWrap: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/esm/lib/components/SegmentedControlWrapper.vue.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as p, ref as f, inject as c, onMounted as i, onUpdated as h, watch as g, createBlock as C, openBlock as y, resolveDynamicComponent as b, unref as v, withCtx as _, renderSlot as B } from "vue";
+import { defineComponent as f, ref as m, inject as c, onMounted as i, onUpdated as h, watch as g, createBlock as C, openBlock as y, resolveDynamicComponent as b, unref as v, withCtx as B, renderSlot as _ } from "vue";
 import { usePrefix as k, themeInjectionKey as R, syncProperties as s, addEventListenerToElementRef as n } from "../../utils.mjs";
-const P = /* @__PURE__ */ p({
+const P = /* @__PURE__ */ f({
   __name: "SegmentedControlWrapper",
   props: {
     backgroundColor: {},
@@ -13,26 +13,27 @@ const P = /* @__PURE__ */ p({
     label: { default: "" },
     message: { default: "" },
     name: {},
+    noWrap: { type: Boolean, default: !1 },
     required: { type: Boolean, default: !1 },
     state: { default: "none" },
     theme: {},
     value: {}
   },
   emits: ["update:value", "blur", "change", "segmentedControlChange", "update"],
-  setup(d, { emit: u }) {
-    const m = k("p-segmented-control"), a = d, e = f(), t = u, l = c(R), r = () => s(e, { ...a, theme: a.theme || l.value });
+  setup(d, { emit: p }) {
+    const u = k("p-segmented-control"), a = d, e = m(), t = p, l = c(R), r = () => s(e, { ...a, theme: a.theme || l.value });
     return i(() => {
       r(), n(e, "blur", t), n(e, "change", t, (o) => {
         t("update:value", o.target.value);
       }), n(e, "segmentedControlChange", t), n(e, "update", t);
     }), h(r), g(l, (o) => {
       s(e, { theme: a.theme || o });
-    }), (o, j) => (y(), C(b(v(m)), {
+    }), (o, j) => (y(), C(b(v(u)), {
       ref_key: "pdsComponentRef",
       ref: e
     }, {
-      default: _(() => [
-        B(o.$slots, "default")
+      default: B(() => [
+        _(o.$slots, "default")
       ]),
       _: 3
     }, 512));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.33.0",
+  "version": "3.34.0-rc.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.33.0"
+    "@porsche-design-system/components-js": "3.34.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 35.0.0 <36.0.0",