@porsche-design-system/components-react 2.20.0 → 3.0.0-alpha.1

package/ssr/lib/components/content-wrapper.wrapper.d.ts

@@ -2,11 +2,13 @@ import { HTMLAttributes } from 'react';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
 export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
-     * Defines the background color.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     backgroundColor?: ContentWrapperBackgroundColor;
     /**
-     * Adapts the color when used on dark background.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     theme?: Theme;
     /**
@@ -14,13 +16,16 @@ export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     width?: ContentWrapperWidth;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PContentWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
-     * Defines the background color.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     backgroundColor?: ContentWrapperBackgroundColor;
     /**
-     * Adapts the color when used on dark background.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     theme?: Theme;
     /**

package/ssr/lib/components/display.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
+export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: DisplayAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: DisplayColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<DisplaySize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the display component.
+     */
+    tag?: DisplayTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+};
+export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: DisplayAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: DisplayColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "medium", l: "large"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<DisplaySize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the display component.
+     */
+    tag?: DisplayTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { FieldsetWrapperLabelSize, FormState } from '../types';
+import type { FieldsetWrapperLabelSize, FormState, Theme } from '../types';
 export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The label text.
@@ -21,6 +21,10 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
 };
 export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -43,6 +47,10 @@ export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -26,6 +26,7 @@ export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 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.

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

@@ -26,6 +26,7 @@ export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 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.

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

@@ -10,6 +10,7 @@ export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     size?: BreakpointCustomizable<GridItemSize>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 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.

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

@@ -6,7 +6,8 @@ export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     direction?: BreakpointCustomizable<GridDirection>;
     /**
-     * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     gutter?: BreakpointCustomizable<GridGutter>;
     /**
@@ -14,13 +15,15 @@ export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrap?: BreakpointCustomizable<GridWrap>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 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?: BreakpointCustomizable<GridDirection>;
     /**
-     * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     gutter?: BreakpointCustomizable<GridGutter>;
     /**

package/ssr/lib/components/heading.wrapper.d.ts

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
+export type PHeadingProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: HeadingAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: HeadingColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<HeadingSize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    tag?: HeadingTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+};
+export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: HeadingAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: HeadingColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<HeadingSize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    tag?: HeadingTag;
+    /**
+     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/headline.wrapper.d.ts

@@ -1,20 +1,20 @@
 import { HTMLAttributes } from 'react';
-import type { TextAlign, TextColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
+import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
 export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Text alignment of the component.
      */
-    align?: TextAlign;
+    align?: HeadlineAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: Extract<TextColor, "default" | "inherit">;
+    color?: HeadlineColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
     ellipsis?: boolean;
     /**
-     * Sets a custom HTML tag depending of the usage of the headline component.
+     * Sets a custom HTML tag depending on the usage of the headline component.
      */
     tag?: HeadlineTag;
     /**
@@ -26,21 +26,22 @@ export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: HeadlineVariant;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Text alignment of the component.
      */
-    align?: TextAlign;
+    align?: HeadlineAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: Extract<TextColor, "default" | "inherit">;
+    color?: HeadlineColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
     ellipsis?: boolean;
     /**
-     * Sets a custom HTML tag depending of the usage of the headline component.
+     * Sets a custom HTML tag depending on the usage of the headline component.
      */
     tag?: HeadlineTag;
     /**

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, IconAriaAttribute, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
 export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -8,9 +8,10 @@ export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Basic color variations depending on theme property.
      */
-    color?: TextColor;
+    color?: IconColor;
     /**
-     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     lazy?: boolean;
     /**
@@ -26,9 +27,9 @@ export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     source?: string;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 };
 export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -38,9 +39,10 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Basic color variations depending on theme property.
      */
-    color?: TextColor;
+    color?: IconColor;
     /**
-     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     lazy?: boolean;
     /**
@@ -56,7 +58,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     source?: string;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/index.d.ts

@@ -6,12 +6,14 @@ export * from './button-pure.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
+export * from './display.wrapper';
 export * from './divider.wrapper';
 export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
+export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkAriaAttribute, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkAriaAttribute, LinkButtonIconName, TextSize, LinkTarget, Theme, TextWeight } from '../types';
 export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display link in active state.
@@ -28,7 +28,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonPureIconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -52,9 +52,14 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     weight?: TextWeight;
 };
@@ -86,7 +91,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonPureIconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -110,9 +115,14 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     weight?: TextWeight;
 } & {

package/ssr/lib/components/link-social.wrapper.d.ts

@@ -30,6 +30,7 @@ export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social instead. */
 export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Show or hide label.

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkButtonIconName, LinkTarget, Theme, LinkVariant } from '../types';
 export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -18,9 +18,9 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     href?: string;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -36,7 +36,7 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The style variant of the link.
      */
@@ -60,9 +60,9 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     href?: string;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -78,7 +78,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The style variant of the link.
      */

package/ssr/lib/components/popover.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, PopoverDirection } from '../types';
+import type { SelectedAriaAttributes, PopoverDirection, Theme } from '../types';
 export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -13,6 +13,10 @@ export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * Adapts the popover color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -27,6 +31,10 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HT
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * Adapts the popover color depending on the theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/radio-button-wrapper.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -17,6 +17,10 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -35,6 +39,10 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/scroller.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, Theme } from '../types';
 export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the background gradient color of prev and next button.
@@ -16,7 +16,7 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 };
 export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -34,7 +34,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/ssr/lib/components/segmented-control.wrapper.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
 export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
-     * Background color variations
+     * @deprecated Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**
@@ -20,7 +20,7 @@ export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
 };
 export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
-     * Background color variations
+     * @deprecated Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, Theme } from '../types';
 export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -12,7 +12,7 @@ export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 };
 export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -26,5 +26,5 @@ export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, ThemeExtendedElectric } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, Theme } from '../types';
 export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
@@ -29,15 +29,10 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 };
 export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -68,15 +63,10 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;