@porsche-design-system/components-react 3.13.0-rc.0 → 3.13.0-rc.2

package/esm/lib/components/switch.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table-body.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table-cell.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table-head-cell.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table-head-row.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table-head.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table-row.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/table.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/tabs-bar.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/tabs-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/tabs.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/tag-dismissible.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/tag.wrapper.d.ts

@@ -26,7 +26,7 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAt
     /**
      * The icon shown.
      */
-    icon?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    icon?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-empty-co2" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-class" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * A URL path to a custom icon.
      */

package/esm/lib/components/tag.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/text-field-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/text-list-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/text-list.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/text.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/textarea-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/toast.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/wordmark.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/types.d.ts

@@ -209,7 +209,7 @@ export type AriaAttributes = {
     "aria-valuenow"?: number | undefined;
     /** Defines the human readable text alternative of aria-valuenow for a range widget. */
     "aria-valuetext"?: string | undefined;
-    /** All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions */
+    /** All the WAI-ARIA 1.1 role attribute values from https://w3.org/TR/wai-aria-1.1/#role_definitions */
     role?: AriaRole;
 };
 export type AriaRole = "alert" | "alertdialog" | "application" | "article" | "banner" | "button" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "form" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem";
@@ -235,6 +235,7 @@ declare const ICON_NAMES: readonly [
     "arrow-up",
     "augmented-reality",
     "battery-empty",
+    "battery-empty-co2",
     "battery-full",
     "bell",
     "bookmark",
@@ -258,6 +259,7 @@ declare const ICON_NAMES: readonly [
     "clock",
     "close",
     "closed-caption",
+    "co2-class",
     "co2-emission",
     "compare",
     "configurate",
@@ -517,7 +519,7 @@ declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
     "up",
     "auto"
 ];
-export type SelectDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
+export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
 declare const HEADING_SIZES: readonly [
     "small",
     "medium",
@@ -1046,10 +1048,16 @@ declare const MARQUE_SIZES: readonly [
     "medium"
 ];
 export type MarqueSize = typeof MARQUE_SIZES[number];
+declare const BACKDROPS: readonly [
+    "blur",
+    "shading"
+];
+export type Backdrop = (typeof BACKDROPS)[number];
 declare const MODAL_ARIA_ATTRIBUTES: readonly [
     "aria-label"
 ];
 export type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
+export type ModalBackdrop = Backdrop;
 declare const MODEL_SIGNATURE_SIZES: readonly [
     "small",
     "inherit"
@@ -1065,7 +1073,7 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
 ];
 export type ModelSignatureColor = (typeof MODEL_SIGNATURE_COLORS)[number];
 export type MultiSelectState = FormState;
-export type MultiSelectDropdownDirection = SelectDropdownDirection;
+export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
 /** @deprecated */
 export type MultiSelectUpdateEvent = {
     name: string;
@@ -1131,6 +1139,12 @@ export type SegmentedControlUpdateEventDetail = SegmentedControlUpdateEvent;
 declare const SEGMENTED_CONTROL_COLUMNS: (string | number)[];
 export type SegmentedControlColumns = (typeof SEGMENTED_CONTROL_COLUMNS)[number];
 export type SegmentedControlItemIcon = LinkButtonIconName;
+export type SelectState = FormState;
+export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+export type SelectUpdateEventDetail = {
+    name: string;
+    value: string;
+};
 declare const DROPDOWN_DIRECTIONS: readonly [
     "down",
     "up",

package/esm/provider.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useEffect } from 'react';
 import { load } from '@porsche-design-system/components-js';

package/esm/public-api.mjs

@@ -42,6 +42,8 @@ export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapp
 export { PScroller } from './lib/components/scroller.wrapper.mjs';
 export { PSegmentedControl } from './lib/components/segmented-control.wrapper.mjs';
 export { PSegmentedControlItem } from './lib/components/segmented-control-item.wrapper.mjs';
+export { PSelect } from './lib/components/select.wrapper.mjs';
+export { PSelectOption } from './lib/components/select-option.wrapper.mjs';
 export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.mjs';
 export { PSpinner } from './lib/components/spinner.wrapper.mjs';
 export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.13.0-rc.0",
+  "version": "3.13.0-rc.2",
   "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.13.0-rc.0"
+    "@porsche-design-system/components-js": "3.13.0-rc.2"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",