@porsche-design-system/components-react 4.0.0-beta.0 → 4.0.0-beta.2

package/esm/lib/components/tabs-bar.wrapper.d.ts

@@ -1,10 +1,18 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
+import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
 export type PTabsBarProps = BaseProps & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
     activeTabIndex?: number | undefined;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBarBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -14,7 +22,7 @@ export type PTabsBarProps = BaseProps & {
      */
     size?: BreakpointCustomizable<TabsBarSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsBarWeight;
 };
@@ -23,6 +31,14 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      * Defines which tab to be visualized as selected (zero-based numbering), undefined if none should be selected.
      */
     activeTabIndex?: number | undefined;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBarBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -32,7 +48,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
      */
     size?: BreakpointCustomizable<TabsBarSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsBarWeight;
 } & {

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

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,18 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
+import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
 export type PTabsProps = BaseProps & {
     /**
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
     activeTabIndex?: number;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -14,7 +22,7 @@ export type PTabsProps = BaseProps & {
      */
     size?: BreakpointCustomizable<TabsSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsWeight;
 };
@@ -23,6 +31,14 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      * Defines which tab to be visualized as selected (zero-based numbering).
      */
     activeTabIndex?: number;
+    /**
+     * Defines the background color. Use `frosted` only on images, videos or gradients.
+     */
+    background?: TabsBackground;
+    /**
+     * Displays with reduced spacing and smaller padding for a more condensed layout.
+     */
+    compact?: boolean;
     /**
      * Emitted when active tab is changed.
      */
@@ -32,7 +48,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
      */
     size?: BreakpointCustomizable<TabsSize>;
     /**
-     * The text weight.
+     * @deprecated Will be removed in the next major release. Has no effect anymore.
      */
     weight?: TabsWeight;
 } & {

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

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, size, weight];
+    const propsToSync = [activeTabIndex, background, compact, size, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/types.d.ts

@@ -621,27 +621,6 @@ declare const FLAG_NAMES: readonly [
     "za"
 ];
 export type FlagName = typeof FLAG_NAMES[number];
-declare const FORM_STATES: readonly [
-    "none",
-    "error",
-    "success"
-];
-export type FormState = (typeof FORM_STATES)[number];
-declare const BUTTON_ARIA_ATTRIBUTES: readonly [
-    "aria-label",
-    "aria-description",
-    "aria-expanded",
-    "aria-pressed",
-    "aria-haspopup"
-];
-export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
-declare const LINK_ARIA_ATTRIBUTES: readonly [
-    "aria-label",
-    "aria-description",
-    "aria-current",
-    "aria-haspopup"
-];
-export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
 declare const breakpoints: readonly [
     "base",
     "xs",
@@ -658,75 +637,6 @@ export type BreakpointValues<T> = {
     base: T;
 };
 export type BreakpointCustomizable<T> = T | BreakpointValues<T>;
-declare const LINK_TARGETS: readonly [
-    "_self",
-    "_blank",
-    "_parent",
-    "_top"
-];
-export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
-declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
-    "role"
-];
-export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
-export type ScrollerScrollToPosition = {
-    scrollPosition: number;
-    isSmooth?: boolean;
-} | string;
-declare const SCROLL_INDICATOR_POSITIONS: readonly [
-    "top",
-    "center"
-];
-export type ScrollerAlignScrollIndicator = (typeof SCROLL_INDICATOR_POSITIONS)[number];
-export type MultiSelectState = FormState;
-export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
-export type MultiSelectChangeEventDetail = {
-    name: string;
-    value: string[];
-};
-export type MultiSelectToggleEventDetail = {
-    open: boolean;
-};
-export type SelectState = FormState;
-export type SelectDropdownDirection = SelectComponentsDropdownDirection;
-export type SelectChangeEventDetail = {
-    name: string;
-    value: string;
-};
-export type SelectToggleEventDetail = {
-    open: boolean;
-};
-declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
-    "down",
-    "up",
-    "auto"
-];
-export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
-declare const TILE_ASPECT_RATIOS: readonly [
-    "1/1",
-    "4/3",
-    "3/4",
-    "16/9",
-    "9/16",
-    "auto"
-];
-export type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
-declare const TILE_SIZES: readonly [
-    "medium",
-    "large",
-    "inherit"
-];
-export type TileSize = (typeof TILE_SIZES)[number];
-declare const TILE_WEIGHTS: readonly [
-    "regular",
-    "semi-bold"
-];
-export type TileWeight = (typeof TILE_WEIGHTS)[number];
-declare const TILE_ALIGNS: readonly [
-    "top",
-    "bottom"
-];
-export type TileAlign = (typeof TILE_ALIGNS)[number];
 declare const HEADING_SIZES: readonly [
     "small",
     "medium",
@@ -780,22 +690,29 @@ declare const TYPOGRAPHY_TEXT_WEIGHTS: readonly [
     "bold"
 ];
 export type TypographyTextWeight = (typeof TYPOGRAPHY_TEXT_WEIGHTS)[number];
-declare const ALIGN_LABELS: readonly [
-    "start",
-    "end"
+declare const LINK_BUTTON_VARIANTS: readonly [
+    "primary",
+    "secondary"
 ];
-export type AlignLabel = (typeof ALIGN_LABELS)[number];
+export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
 declare const BUTTON_TYPES: readonly [
     "button",
     "submit",
     "reset"
 ];
 export type ButtonType = (typeof BUTTON_TYPES)[number];
-declare const LINK_BUTTON_VARIANTS: readonly [
-    "primary",
-    "secondary"
+declare const ALIGN_LABELS: readonly [
+    "start",
+    "end"
 ];
-export type LinkButtonVariant = (typeof LINK_BUTTON_VARIANTS)[number];
+export type AlignLabel = (typeof ALIGN_LABELS)[number];
+declare const LINK_TARGETS: readonly [
+    "_self",
+    "_blank",
+    "_parent",
+    "_top"
+];
+export type LinkTarget = (typeof LINK_TARGETS)[number] | string;
 export type LinkButtonIconName = IconName | "none";
 export type ButtonVariant = LinkButtonVariant;
 export type LinkVariant = LinkButtonVariant;
@@ -814,15 +731,99 @@ export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAt
 export type SelectedAriaRole<T> = {
     role: Extract<AriaRole, T>;
 };
-declare const ACCORDION_SIZES: readonly [
-    "small",
-    "medium"
+declare const FORM_STATES: readonly [
+    "none",
+    "error",
+    "success"
 ];
-export type AccordionSize = (typeof ACCORDION_SIZES)[number];
+export type FormState = (typeof FORM_STATES)[number];
+declare const BUTTON_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description",
+    "aria-expanded",
+    "aria-pressed",
+    "aria-haspopup"
+];
+export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
+declare const LINK_ARIA_ATTRIBUTES: readonly [
+    "aria-label",
+    "aria-description",
+    "aria-current",
+    "aria-haspopup"
+];
+export type LinkAriaAttribute = (typeof LINK_ARIA_ATTRIBUTES)[number];
+export type MultiSelectState = FormState;
+export type MultiSelectDropdownDirection = SelectComponentsDropdownDirection;
+export type MultiSelectChangeEventDetail = {
+    name: string;
+    value: string[];
+};
+export type MultiSelectToggleEventDetail = {
+    open: boolean;
+};
+export type SelectState = FormState;
+export type SelectDropdownDirection = SelectComponentsDropdownDirection;
+export type SelectChangeEventDetail = {
+    name: string;
+    value: string;
+};
+export type SelectToggleEventDetail = {
+    open: boolean;
+};
+declare const SELECT_DROPDOWN_DIRECTIONS: readonly [
+    "down",
+    "up",
+    "auto"
+];
+export type SelectComponentsDropdownDirection = (typeof SELECT_DROPDOWN_DIRECTIONS)[number];
+declare const TILE_ASPECT_RATIOS: readonly [
+    "1/1",
+    "4/3",
+    "3/4",
+    "16/9",
+    "9/16",
+    "auto"
+];
+export type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
+declare const TILE_SIZES: readonly [
+    "medium",
+    "large",
+    "inherit"
+];
+export type TileSize = (typeof TILE_SIZES)[number];
+declare const TILE_WEIGHTS: readonly [
+    "regular",
+    "semi-bold"
+];
+export type TileWeight = (typeof TILE_WEIGHTS)[number];
+declare const TILE_ALIGNS: readonly [
+    "top",
+    "bottom"
+];
+export type TileAlign = (typeof TILE_ALIGNS)[number];
+declare const ACCORDIONS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type AccordionBackground = (typeof ACCORDIONS_BACKGROUNDS)[number];
+declare const ACCORDION_ALIGN_MARKERS: readonly [
+    "start",
+    "end"
+];
+export type AccordionAlignMarker = (typeof ACCORDION_ALIGN_MARKERS)[number];
 export type AccordionUpdateEventDetail = {
     open: boolean;
 };
+/** @deprecated */
 export type AccordionHeadingTag = HeadingTag;
+declare const ACCORDION_SIZES: readonly [
+    "small",
+    "medium"
+];
+/** @deprecated */
+export type AccordionSize = (typeof ACCORDION_SIZES)[number];
 declare const BANNER_STATES: readonly [
     "info",
     "success",
@@ -1208,6 +1209,21 @@ export type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
 export type RadioGroupState = FormState;
 export type RadioGroupDirection = GroupDirection;
 export type RadioGroupChangeEventDetail = Event;
+declare const SCROLLER_ALIGN_SCROLL_INDICATORS: readonly [
+    "top",
+    "center"
+];
+/** @deprecated */
+export type ScrollerAlignScrollIndicator = (typeof SCROLLER_ALIGN_SCROLL_INDICATORS)[number];
+declare const SCROLLER_ARIA_ATTRIBUTES: readonly [
+    "role"
+];
+export type ScrollerAriaAttribute = (typeof SCROLLER_ARIA_ATTRIBUTES)[number];
+/** @deprecated */
+export type ScrollerScrollToPosition = {
+    scrollPosition: number;
+    isSmooth?: boolean;
+} | string;
 export type SegmentedControlChangeEventDetail = {
     value: string | number;
 };
@@ -1277,27 +1293,43 @@ declare const TABS_SIZES: readonly [
     "medium"
 ];
 export type TabsSize = (typeof TABS_SIZES)[number];
+declare const TABS_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type TabsBackground = (typeof TABS_BACKGROUNDS)[number];
 declare const TABS_WEIGHTS: readonly [
     "regular",
     "semi-bold"
 ];
+/** @deprecated */
 export type TabsWeight = (typeof TABS_WEIGHTS)[number];
 export type TabsUpdateEventDetail = {
     activeTabIndex: number;
 };
+declare const TABS_BAR_BACKGROUNDS: readonly [
+    "canvas",
+    "surface",
+    "frosted",
+    "none"
+];
+export type TabsBarBackground = (typeof TABS_BAR_BACKGROUNDS)[number];
 declare const TABS_BAR_SIZES: readonly [
     "small",
     "medium"
 ];
 export type TabsBarSize = (typeof TABS_BAR_SIZES)[number];
+export type TabsBarUpdateEventDetail = {
+    activeTabIndex: number;
+};
 declare const TABS_BAR_WEIGHTS: readonly [
     "regular",
     "semi-bold"
 ];
+/** @deprecated */
 export type TabsBarWeight = (typeof TABS_BAR_WEIGHTS)[number];
-export type TabsBarUpdateEventDetail = {
-    activeTabIndex: number;
-};
 export type TagIcon = IconName | "none";
 declare const TAG_VARIANTS: readonly [
     "primary",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.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": "4.0.0-beta.0"
+    "@porsche-design-system/components-js": "4.0.0-beta.2"
   },
   "peerDependencies": {
     "ag-grid-community": ">= 35.0.0 <36.0.0",
@@ -96,6 +96,17 @@
       "types": "./testing/index.d.ts",
       "default": "./testing/index.cjs"
     },
+    "./styles": {
+      "sass": "./scss/_index.scss",
+      "types": "./emotion/esm/index.d.ts",
+      "import": "./emotion/esm/index.mjs",
+      "default": "./emotion/cjs/index.cjs"
+    },
+    "./styles/vanilla-extract": {
+      "types": "./vanilla-extract/esm/index.d.ts",
+      "import": "./vanilla-extract/esm/index.mjs",
+      "default": "./vanilla-extract/cjs/index.cjs"
+    },
     "./tailwindcss": "./tailwindcss/index.css",
     "./tailwindcss/index.css": "./tailwindcss/index.css",
     "./tailwindcss/index": "./tailwindcss/index.css",