@porsche-design-system/components-vue 3.21.0 → 3.22.0-rc.0

package/CHANGELOG.md

@@ -14,6 +14,29 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### [Unreleased]
 
+### [3.22.0-rc.0] - 2024-11-19
+
+#### Added
+
+- `Pin-Code`: Add `form` prop to explicitly associate the component with a form, even when it's not directly nested
+  within it. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588))
+
+#### Changed
+
+- Angular: updated peer dependency to `>=19.0.0 <20.0.0`
+- `Pin-Code`:
+  - Remove native input and use ElementInternals API
+  - **Breaking Change**: `Pin-Code` component no longer support native validation due to the removal of the underlying
+    native `<input>` element. ([#3588](https://github.com/porsche-design-system/porsche-design-system/pull/3588))
+- `Styles`: `SCSS` variant uses `@forward/@use` internally to replace deprecated `@import`
+  ([#3623](https://github.com/porsche-design-system/porsche-design-system/pull/3623))
+
+#### Fixed
+
+- Partials: removed bundled `react/jsx-runtime` due to React 18/19 incompatibilities. When using `jsx` in the `format`
+  option, it is necessary to have `react/jsx-runtime` as a dependency in the project included.
+  ([#3613](https://github.com/porsche-design-system/porsche-design-system/pull/3613))
+
 ### [3.21.0] - 2024-11-12
 
 ### [3.21.0-rc.0] - 2024-11-11
@@ -28,8 +51,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
   ([#3589](https://github.com/porsche-design-system/porsche-design-system/pull/3589))
 - `Button`, `Link`: `compact` prop is breakpoint customizable
   ([#3580](https://github.com/porsche-design-system/porsche-design-system/pull/3580))
-- `Select`, `Multi-Select`: Added `form` prop to explicitly associate these components with a specific form when they
-  are not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
+- `Select`, `Multi-Select`: Add `form` prop to explicitly associate these components with a specific form when they are
+  not directly nested within it. ([#3542](https://github.com/porsche-design-system/porsche-design-system/pull/3542))
 
 #### Changed
 

package/ag-grid/theme.css

@@ -1630,10 +1630,10 @@ ag-grid-aurelia {
   flex: 1 1 auto;
   align-self: stretch;
   align-items: center;
+  overflow: hidden;
 }
 
 .ag-header-cell-label {
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 
@@ -1641,6 +1641,7 @@ ag-grid-aurelia {
   position: sticky;
   flex: none;
   max-width: 100%;
+  overflow: visible;
 }
 
 .ag-header-group-text {
@@ -1672,6 +1673,10 @@ ag-grid-aurelia {
   white-space: normal;
 }
 
+.ag-header-cell-comp-wrapper-limited-height > div {
+  overflow: hidden;
+}
+
 .ag-right-aligned-header .ag-header-cell-label {
   flex-direction: row-reverse;
 }
@@ -2590,7 +2595,7 @@ ag-grid-aurelia {
   position: absolute;
 }
 
-.ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize {
+.ag-header-group-cell-no-group.ag-header-span-height {
   display: none;
 }
 
@@ -3945,11 +3950,7 @@ button[class^=ag-]:focus {
 }
 
 .ag-row-highlight-above::after {
-  top: -1px;
-}
-
-.ag-row-highlight-above.ag-row-first::after {
-  top: 0;
+  top: 0px;
 }
 
 .ag-row-highlight-below::after {
@@ -5065,7 +5066,7 @@ button.ag-side-button-button:focus {
   margin-right: 4px;
 }
 
-.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total),
+.ag-header-row:not(:first-child) .ag-header-cell:not(.ag-header-span-height.ag-header-span-total, .ag-header-parent-hidden),
 .ag-header-row:not(:first-child) .ag-header-group-cell.ag-header-group-cell-with-group {
   border-top: var(--ag-borders-critical) var(--ag-border-color);
 }
@@ -5936,6 +5937,14 @@ button.ag-side-button-button:focus {
   --ag-charts-justify: none !important;
 }
 
+.ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus {
+  box-shadow: none;
+}
+
+.ag-charts-wrapper .ag-charts-proxy-legend-toolbar button:focus-visible {
+  box-shadow: var(--ag-input-focus-box-shadow);
+}
+
 .ag-date-time-list-page-title-bar {
   display: flex;
 }

package/cjs/lib/components/PinCodeWrapper.vue.cjs

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

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

@@ -8,6 +8,10 @@ type PPinCodeProps = {
      * Disables the Pin Code. No events will be triggered while disabled state is active.
      */
     disabled?: boolean;
+    /**
+     * The id of a form element the pin-code should be associated with.
+     */
+    form?: string;
     /**
      * Show or hide label and description text. For better accessibility it is recommended to show the label.
      */

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

@@ -1,10 +1,11 @@
-import { defineComponent as r, ref as m, inject as u, onMounted as i, onUpdated as c, watch as h, openBlock as y, createBlock as C, resolveDynamicComponent as _, unref as b, withCtx as B, renderSlot as g } from "vue";
+import { defineComponent as p, ref as m, inject as u, onMounted as i, onUpdated as c, watch as h, openBlock as y, createBlock as C, resolveDynamicComponent as _, unref as b, withCtx as B, renderSlot as g } from "vue";
 import { usePrefix as v, themeInjectionKey as P, addEventListenerToElementRef as R, syncProperties as l } from "../../utils.mjs";
-const j = /* @__PURE__ */ r({
+const j = /* @__PURE__ */ p({
   __name: "PinCodeWrapper",
   props: {
     description: { default: "" },
     disabled: { type: Boolean, default: !1 },
+    form: {},
     hideLabel: { default: !1 },
     label: { default: "" },
     length: { default: 4 },
@@ -19,9 +20,9 @@ const j = /* @__PURE__ */ r({
   },
   emits: ["update"],
   setup(d, { emit: s }) {
-    const f = v("p-pin-code"), t = d, e = m(), p = s, o = u(P), a = () => l(e, { ...t, theme: t.theme || o.value });
+    const f = v("p-pin-code"), t = d, e = m(), r = s, o = u(P), a = () => l(e, { ...t, theme: t.theme || o.value });
     return i(() => {
-      a(), R(e, "update", p);
+      a(), R(e, "update", r);
     }), c(a), h(o, (n) => {
       l(e, { theme: t.theme || n });
     }), (n, k) => (y(), C(_(b(f)), {

package/esm/lib/types.d.ts

@@ -430,14 +430,14 @@ declare const FORM_STATES: readonly [
     "error",
     "success"
 ];
-export type FormState = typeof FORM_STATES[number];
+export type FormState = (typeof FORM_STATES)[number];
 declare const BUTTON_ARIA_ATTRIBUTES: readonly [
     "aria-label",
     "aria-expanded",
     "aria-pressed",
     "aria-haspopup"
 ];
-export type ButtonAriaAttribute = typeof BUTTON_ARIA_ATTRIBUTES[number];
+export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
 declare const LINK_ARIA_ATTRIBUTES: readonly [
     "aria-label",
     "aria-current",
@@ -553,7 +553,7 @@ declare const HEADING_TAGS: readonly [
     "h5",
     "h6"
 ];
-export type HeadingTag = typeof HEADING_TAGS[number];
+export type HeadingTag = (typeof HEADING_TAGS)[number];
 declare const TEXT_SIZES: readonly [
     "xx-small",
     "x-small",
@@ -611,7 +611,7 @@ declare const BUTTON_TYPES: readonly [
     "submit",
     "reset"
 ];
-export type ButtonType = typeof BUTTON_TYPES[number];
+export type ButtonType = (typeof BUTTON_TYPES)[number];
 declare const LINK_BUTTON_VARIANTS: readonly [
     "primary",
     "secondary",
@@ -737,7 +737,7 @@ declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
     "transparent",
     "default"
 ];
-export type ContentWrapperBackgroundColor = typeof CONTENT_WRAPPER_BACKGROUND_COLORS[number];
+export type ContentWrapperBackgroundColor = (typeof CONTENT_WRAPPER_BACKGROUND_COLORS)[number];
 declare const CONTENT_WRAPPER_WIDTHS: readonly [
     "narrow",
     "basic",
@@ -745,7 +745,7 @@ declare const CONTENT_WRAPPER_WIDTHS: readonly [
     "fluid",
     "full"
 ];
-export type ContentWrapperWidth = typeof CONTENT_WRAPPER_WIDTHS[number];
+export type ContentWrapperWidth = (typeof CONTENT_WRAPPER_WIDTHS)[number];
 export type CrestTarget = LinkTarget;
 export type CrestAriaAttribute = LinkAriaAttribute;
 declare const DISPLAY_TAGS: readonly [
@@ -778,12 +778,12 @@ declare const DIVIDER_COLORS: readonly [
     "neutral-contrast-medium",
     "neutral-contrast-low"
 ];
-export type DividerColor = typeof DIVIDER_COLORS[number];
+export type DividerColor = (typeof DIVIDER_COLORS)[number];
 declare const DIVIDER_DIRECTIONS: readonly [
     "vertical",
     "horizontal"
 ];
-export type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
+export type DividerDirection = (typeof DIVIDER_DIRECTIONS)[number];
 export type DividerOrientation = DividerDirection;
 declare const FIELDSET_LABEL_SIZES: readonly [
     "small",
@@ -799,14 +799,14 @@ declare const FLEX_WRAPS: readonly [
     "wrap",
     "wrap-reverse"
 ];
-export type FlexWrap = typeof FLEX_WRAPS[number];
+export type FlexWrap = (typeof FLEX_WRAPS)[number];
 declare const FLEX_DIRECTIONS: readonly [
     "row",
     "row-reverse",
     "column",
     "column-reverse"
 ];
-export type FlexDirection = typeof FLEX_DIRECTIONS[number];
+export type FlexDirection = (typeof FLEX_DIRECTIONS)[number];
 declare const FLEX_JUSTIFY_CONTENTS: readonly [
     "flex-start",
     "flex-end",
@@ -815,7 +815,7 @@ declare const FLEX_JUSTIFY_CONTENTS: readonly [
     "space-around",
     "space-evenly"
 ];
-export type FlexJustifyContent = typeof FLEX_JUSTIFY_CONTENTS[number];
+export type FlexJustifyContent = (typeof FLEX_JUSTIFY_CONTENTS)[number];
 declare const FLEX_ALIGN_ITEMS: readonly [
     "stretch",
     "flex-start",
@@ -823,7 +823,7 @@ declare const FLEX_ALIGN_ITEMS: readonly [
     "center",
     "baseline"
 ];
-export type FlexAlignItems = typeof FLEX_ALIGN_ITEMS[number];
+export type FlexAlignItems = (typeof FLEX_ALIGN_ITEMS)[number];
 declare const FLEX_ALIGN_CONTENTS: readonly [
     "stretch",
     "flex-start",
@@ -833,7 +833,7 @@ declare const FLEX_ALIGN_CONTENTS: readonly [
     "space-around",
     "space-evenly"
 ];
-export type FlexAlignContent = typeof FLEX_ALIGN_CONTENTS[number];
+export type FlexAlignContent = (typeof FLEX_ALIGN_CONTENTS)[number];
 declare const FLEX_ITEM_WIDTHS: readonly [
     "auto",
     "one-quarter",
@@ -843,7 +843,7 @@ declare const FLEX_ITEM_WIDTHS: readonly [
     "three-quarters",
     "full"
 ];
-export type FlexItemWidth = typeof FLEX_ITEM_WIDTHS[number];
+export type FlexItemWidth = (typeof FLEX_ITEM_WIDTHS)[number];
 declare const FLEX_ITEM_OFFSETS: readonly [
     "none",
     "one-quarter",
@@ -852,7 +852,7 @@ declare const FLEX_ITEM_OFFSETS: readonly [
     "two-thirds",
     "three-quarters"
 ];
-export type FlexItemOffset = typeof FLEX_ITEM_OFFSETS[number];
+export type FlexItemOffset = (typeof FLEX_ITEM_OFFSETS)[number];
 declare const FLEX_ITEM_ALIGN_SELFS: readonly [
     "auto",
     "flex-start",
@@ -861,24 +861,24 @@ declare const FLEX_ITEM_ALIGN_SELFS: readonly [
     "baseline",
     "stretch"
 ];
-export type FlexItemAlignSelf = typeof FLEX_ITEM_ALIGN_SELFS[number];
+export type FlexItemAlignSelf = (typeof FLEX_ITEM_ALIGN_SELFS)[number];
 declare const FLEX_ITEM_GROWS: readonly [
     0,
     1
 ];
-export type FlexItemGrow = typeof FLEX_ITEM_GROWS[number];
+export type FlexItemGrow = (typeof FLEX_ITEM_GROWS)[number];
 declare const FLEX_ITEM_SHRINKS: readonly [
     0,
     1
 ];
-export type FlexItemShrink = typeof FLEX_ITEM_SHRINKS[number];
+export type FlexItemShrink = (typeof FLEX_ITEM_SHRINKS)[number];
 declare const FLEX_ITEM_FLEXS: readonly [
     "initial",
     "auto",
     "none",
     "equal"
 ];
-export type FlexItemFlex = typeof FLEX_ITEM_FLEXS[number];
+export type FlexItemFlex = (typeof FLEX_ITEM_FLEXS)[number];
 declare const FLYOUT_POSITIONS: readonly [
     "start",
     "end",
@@ -913,18 +913,18 @@ declare const GRID_DIRECTIONS: readonly [
     "column",
     "column-reverse"
 ];
-export type GridDirection = typeof GRID_DIRECTIONS[number];
+export type GridDirection = (typeof GRID_DIRECTIONS)[number];
 declare const GRID_WRAPS: readonly [
     "nowrap",
     "wrap"
 ];
-export type GridWrap = typeof GRID_WRAPS[number];
+export type GridWrap = (typeof GRID_WRAPS)[number];
 declare const GRID_GUTTERS: readonly [
     16,
     24,
     36
 ];
-export type GridGutter = typeof GRID_GUTTERS[number];
+export type GridGutter = (typeof GRID_GUTTERS)[number];
 declare const GRID_ITEM_SIZES: readonly [
     1,
     2,
@@ -939,7 +939,7 @@ declare const GRID_ITEM_SIZES: readonly [
     11,
     12
 ];
-export type GridItemSize = typeof GRID_ITEM_SIZES[number];
+export type GridItemSize = (typeof GRID_ITEM_SIZES)[number];
 declare const GRID_ITEM_OFFSETS: readonly [
     0,
     1,
@@ -954,7 +954,7 @@ declare const GRID_ITEM_OFFSETS: readonly [
     10,
     11
 ];
-export type GridItemOffset = typeof GRID_ITEM_OFFSETS[number];
+export type GridItemOffset = (typeof GRID_ITEM_OFFSETS)[number];
 declare const HEADING_COLORS: readonly [
     "primary",
     "inherit"
@@ -1132,7 +1132,7 @@ declare const MARQUE_SIZES: readonly [
     "small",
     "medium"
 ];
-export type MarqueSize = typeof MARQUE_SIZES[number];
+export type MarqueSize = (typeof MARQUE_SIZES)[number];
 declare const BACKDROPS: readonly [
     "blur",
     "shading"
@@ -1255,11 +1255,11 @@ declare const SPINNER_SIZES: readonly [
     "large",
     "inherit"
 ];
-export type SpinnerSize = typeof SPINNER_SIZES[number];
+export type SpinnerSize = (typeof SPINNER_SIZES)[number];
 declare const SPINNER_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export type SpinnerAriaAttribute = typeof SPINNER_ARIA_ATTRIBUTES[number];
+export type SpinnerAriaAttribute = (typeof SPINNER_ARIA_ATTRIBUTES)[number];
 declare const STEPPER_HORIZONTAL_SIZES: readonly [
     "small",
     "medium"
@@ -1323,11 +1323,11 @@ declare const TAG_DISMISSIBLE_COLORS: readonly [
     "background-surface",
     "background-default"
 ];
-export type TagDismissibleColor = typeof TAG_DISMISSIBLE_COLORS[number];
+export type TagDismissibleColor = (typeof TAG_DISMISSIBLE_COLORS)[number];
 declare const TAG_DISMISSIBLE_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
-export type TagDismissibleAriaAttribute = typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES[number];
+export type TagDismissibleAriaAttribute = (typeof TAG_DISMISSIBLE_ARIA_ATTRIBUTES)[number];
 export type TagIcon = IconName;
 declare const TAG_COLORS: readonly [
     "background-base",
@@ -1373,19 +1373,19 @@ declare const LIST_TYPES: readonly [
     "ordered"
 ];
 /** @deprecated */
-export type TextListListType = typeof LIST_TYPES[number];
+export type TextListListType = (typeof LIST_TYPES)[number];
 declare const ORDER_TYPES: readonly [
     "numbered",
     "alphabetically"
 ];
 /** @deprecated */
-export type TextListOrderType = typeof ORDER_TYPES[number];
+export type TextListOrderType = (typeof ORDER_TYPES)[number];
 declare const TEXT_LIST_TYPES: readonly [
     "unordered",
     "numbered",
     "alphabetically"
 ];
-export type TextListType = typeof TEXT_LIST_TYPES[number];
+export type TextListType = (typeof TEXT_LIST_TYPES)[number];
 export type TextareaState = FormState;
 declare const AUTO_COMPLETE: readonly [
     "off",
@@ -1417,7 +1417,7 @@ declare const TOAST_STATES: readonly [
     "success",
     "neutral"
 ];
-export type ToastState = typeof TOAST_STATES[number];
+export type ToastState = (typeof TOAST_STATES)[number];
 export type ToastMessage = {
     text: string;
     state?: ToastState;

package/package.json

@@ -1,23 +1,14 @@
 {
   "name": "@porsche-design-system/components-vue",
-  "version": "3.21.0",
+  "version": "3.22.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",
-    "design",
-    "system",
-    "web",
-    "component",
-    "library",
-    "vue",
-    "js"
-  ],
+  "keywords": ["porsche", "design", "system", "web", "component", "library", "vue", "js"],
   "scope": "@porsche-design-system",
   "author": "Dr. Ing. h.c. F. Porsche AG",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.21.0"
+    "@porsche-design-system/components-js": "3.22.0-rc.0"
   },
   "peerDependencies": {
     "ag-grid-enterprise": ">= 32.0.0 <33.0.0",

package/styles/_index.scss

@@ -1 +1 @@
-@import '@porsche-design-system/components-js/styles';
+@forward '@porsche-design-system/components-js/styles';