@porsche-design-system/components-react 2.19.0-rc.2 → 2.19.1-rc.1

package/jsdom-polyfill.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/jsdom-polyfill';

package/lib/components/button-group.wrapper.d.ts

@@ -1,16 +1,16 @@
 import { HTMLAttributes } from 'react';
-import type { ButtonGroupDirection } from '../types';
+import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
 export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
-    direction?: ButtonGroupDirection;
+    direction?: BreakpointCustomizable<ButtonGroupDirection>;
 };
 export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
-    direction?: ButtonGroupDirection;
+    direction?: BreakpointCustomizable<ButtonGroupDirection>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/button-pure.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { AlignLabel, SelectedAriaAttributes, ButtonAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, ButtonAriaAttributes, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
 export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display button in active state.
@@ -8,7 +8,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Add ARIA attributes.
      */
@@ -67,7 +67,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Add ARIA attributes.
      */

package/lib/components/divider.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { DividerColor, DividerOrientation, Theme } from '../types';
+import type { DividerColor, BreakpointCustomizable, DividerOrientation, Theme } from '../types';
 export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines color depending on theme.
@@ -8,7 +8,7 @@ export type PDividerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines orientation.
      */
-    orientation?: DividerOrientation;
+    orientation?: BreakpointCustomizable<DividerOrientation>;
     /**
      * Adapts color depending on theme.
      */
@@ -22,7 +22,7 @@ export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Defines orientation.
      */
-    orientation?: DividerOrientation;
+    orientation?: BreakpointCustomizable<DividerOrientation>;
     /**
      * Adapts color depending on theme.
      */

package/lib/components/flex-item.wrapper.d.ts

@@ -1,56 +1,56 @@
 import { HTMLAttributes } from 'react';
-import type { FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
+import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
 export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: FlexItemAlignSelf;
+    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: FlexItemFlex;
+    flex?: BreakpointCustomizable<FlexItemFlex>;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: FlexItemGrow;
+    grow?: BreakpointCustomizable<FlexItemGrow>;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: FlexItemOffset;
+    offset?: BreakpointCustomizable<FlexItemOffset>;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: FlexItemShrink;
+    shrink?: BreakpointCustomizable<FlexItemShrink>;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: FlexItemWidth;
+    width?: BreakpointCustomizable<FlexItemWidth>;
 };
 export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: FlexItemAlignSelf;
+    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: FlexItemFlex;
+    flex?: BreakpointCustomizable<FlexItemFlex>;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: FlexItemGrow;
+    grow?: BreakpointCustomizable<FlexItemGrow>;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: FlexItemOffset;
+    offset?: BreakpointCustomizable<FlexItemOffset>;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: FlexItemShrink;
+    shrink?: BreakpointCustomizable<FlexItemShrink>;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: FlexItemWidth;
+    width?: BreakpointCustomizable<FlexItemWidth>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/flex.wrapper.d.ts

@@ -1,56 +1,56 @@
 import { HTMLAttributes } from 'react';
-import type { FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
+import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
 export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: FlexAlignContent;
+    alignContent?: BreakpointCustomizable<FlexAlignContent>;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: FlexAlignItems;
+    alignItems?: BreakpointCustomizable<FlexAlignItems>;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: FlexDirection;
+    direction?: BreakpointCustomizable<FlexDirection>;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: FlexInline;
+    inline?: BreakpointCustomizable<FlexInline>;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: FlexJustifyContent;
+    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: FlexWrap;
+    wrap?: BreakpointCustomizable<FlexWrap>;
 };
 export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: FlexAlignContent;
+    alignContent?: BreakpointCustomizable<FlexAlignContent>;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: FlexAlignItems;
+    alignItems?: BreakpointCustomizable<FlexAlignItems>;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: FlexDirection;
+    direction?: BreakpointCustomizable<FlexDirection>;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: FlexInline;
+    inline?: BreakpointCustomizable<FlexInline>;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: FlexJustifyContent;
+    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: FlexWrap;
+    wrap?: BreakpointCustomizable<FlexWrap>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/grid-item.wrapper.d.ts

@@ -1,24 +1,24 @@
 import { HTMLAttributes } from 'react';
-import type { GridItemOffset, GridItemSize } from '../types';
+import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
 export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: GridItemOffset;
+    offset?: BreakpointCustomizable<GridItemOffset>;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: GridItemSize;
+    size?: BreakpointCustomizable<GridItemSize>;
 };
 export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: GridItemOffset;
+    offset?: BreakpointCustomizable<GridItemOffset>;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: GridItemSize;
+    size?: BreakpointCustomizable<GridItemSize>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/grid.wrapper.d.ts

@@ -1,32 +1,32 @@
 import { HTMLAttributes } from 'react';
-import type { GridDirection, GridGutter, GridWrap } from '../types';
+import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
 export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: GridDirection;
+    direction?: BreakpointCustomizable<GridDirection>;
     /**
      * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
      */
-    gutter?: GridGutter;
+    gutter?: BreakpointCustomizable<GridGutter>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: GridWrap;
+    wrap?: BreakpointCustomizable<GridWrap>;
 };
 export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: GridDirection;
+    direction?: BreakpointCustomizable<GridDirection>;
     /**
      * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
      */
-    gutter?: GridGutter;
+    gutter?: BreakpointCustomizable<GridGutter>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: GridWrap;
+    wrap?: BreakpointCustomizable<GridWrap>;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/icon.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, IconAriaAttributes, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, IconAriaAttribute, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
 export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<IconAriaAttributes>;
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations depending on theme property.
      */
@@ -34,7 +34,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<IconAriaAttributes>;
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations depending on theme property.
      */

package/lib/components/link-pure.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { AlignLabel, SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkAriaAttribute, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
 export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display link in active state.
@@ -8,11 +8,11 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -66,11 +66,11 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

package/lib/components/link-tile.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { LinkTileAlign, SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTarget, LinkTileWeight } from '../types';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Alignment of link and description.
@@ -8,7 +8,7 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Aspect ratio of the link-tile.
      */
@@ -62,7 +62,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Aspect ratio of the link-tile.
      */

package/lib/components/link.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, LinkAriaAttributes, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
 export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
@@ -46,7 +46,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<LinkAriaAttributes>;
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */

package/lib/components/marque.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, MarqueAriaAttributes, MarqueSize, LinkTarget } from '../types';
+import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, LinkTarget } from '../types';
 export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<MarqueAriaAttributes>;
+    aria?: SelectedAriaAttributes<MarqueAriaAttribute>;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */
@@ -26,7 +26,7 @@ export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<MarqueAriaAttributes>;
+    aria?: SelectedAriaAttributes<MarqueAriaAttribute>;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */

package/lib/components/modal.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ModalAriaAttributes, BreakpointCustomizable } from '../types';
+import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable } from '../types';
 export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ModalAriaAttributes>;
+    aria?: SelectedAriaAttributes<ModalAriaAttribute>;
     /**
      * If true, the modal will not be closable via backdrop click.
      */
@@ -34,7 +34,7 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ModalAriaAttributes>;
+    aria?: SelectedAriaAttributes<ModalAriaAttribute>;
     /**
      * If true, the modal will not be closable via backdrop click.
      */

package/lib/components/spinner.wrapper.d.ts

@@ -1,14 +1,14 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, SpinnerAriaAttributes, SpinnerSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, ThemeExtendedElectricDark } from '../types';
 export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<SpinnerAriaAttributes>;
+    aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
     /**
      * Size of the spinner.
      */
-    size?: SpinnerSize;
+    size?: BreakpointCustomizable<SpinnerSize>;
     /**
      * Adapts the spinner color depending on the theme.
      */
@@ -18,11 +18,11 @@ export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<SpinnerAriaAttributes>;
+    aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
     /**
      * Size of the spinner.
      */
-    size?: SpinnerSize;
+    size?: BreakpointCustomizable<SpinnerSize>;
     /**
      * Adapts the spinner color depending on the theme.
      */

package/lib/components/switch.wrapper.d.ts

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { AlignLabel, BreakpointCustomizable, SwitchChangeEvent, ThemeExtendedElectric } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, ThemeExtendedElectric } from '../types';
 export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Visualize the switch with on/off status.
      */
@@ -43,7 +43,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Aligns the label.
      */
-    alignLabel?: AlignLabel;
+    alignLabel?: BreakpointCustomizable<AlignLabel>;
     /**
      * Visualize the switch with on/off status.
      */