@porsche-design-system/components-react 3.8.0-rc.0 → 3.9.0-rc.0

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
-const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state, theme];
+    const propsToSync = [label, labelSize, message, required, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -50,7 +50,7 @@ export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts color depending on theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFieldset = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PFieldset = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-fieldset');
-    const propsToSync = [label, labelSize, message, required, state, theme];
+    const propsToSync = [label, labelSize, message, required, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -35,7 +35,7 @@ export declare const PFlexItem: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: BreakpointCustomizable<"auto" | "none" | "initial" | "equal"> | undefined;
+    flex?: BreakpointCustomizable<"none" | "auto" | "initial" | "equal"> | undefined;
     /**
      * The ability to allow/disallow the flex child to grow.
      */

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

@@ -42,7 +42,7 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the flyout color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'end', theme = 'light', className, ...rest }, ref) => {
+const PFlyout = forwardRef(({ aria, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-flyout');
-    const propsToSync = [aria, open, position, theme];
+    const propsToSync = [aria, open, position, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -42,7 +42,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * 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<"small" | "inherit" | "medium" | "large" | "x-large" | "xx-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the heading component.
      */
@@ -50,7 +50,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PHeading = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
+const PHeading = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-heading');
-    const propsToSync = [align, color, ellipsis, size, tag, theme];
+    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -47,7 +47,7 @@ export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Predefined style of the headline.
      */

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
-const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-headline');
-    const propsToSync = [align, color, ellipsis, tag, theme, variant];
+    const propsToSync = [align, color, ellipsis, tag, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -48,11 +48,11 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Specifies which icon to use.
      */
-    name?: "search" | "map" | "video" | "filter" | "image" | "switch" | "view" | "list" | "copy" | "grid" | "document" | "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" | "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" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "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-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "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" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    name?: "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" | "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-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" | "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;
     /**
      * The size of the icon.
      */
-    size?: "small" | "inherit" | "xx-small" | "x-small" | "medium" | "large" | "x-large" | undefined;
+    size?: "inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | undefined;
     /**
      * Specifies a whole icon path which can be used for custom icons.
      */
@@ -60,5 +60,5 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-icon');
-    const propsToSync = [aria, color, lazy, name, size, source, theme];
+    const propsToSync = [aria, color, lazy, name, size, source, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -50,7 +50,7 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: "search" | "map" | "video" | "filter" | "image" | "switch" | "view" | "list" | "copy" | "grid" | "document" | "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" | "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" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "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-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "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" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    actionIcon?: "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" | "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-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" | "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;
     /**
      * Action label of the inline-notification.
      */
@@ -90,7 +90,7 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     /**
      * Adapts the inline-notification color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, ...rest }, ref) => {
+const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -103,7 +103,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<"small" | "inherit" | "xx-small" | "x-small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
@@ -115,7 +115,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Shows an underline under the label.
      */
@@ -124,7 +124,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "bold" | "regular" | "semi-bold" | "thin" | "semibold" | undefined;
+    weight?: "regular" | "semi-bold" | "bold" | "thin" | "semibold" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-pure.wrapper.mjs

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
+const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme, underline = false, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || useTheme(), underline, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -59,7 +59,7 @@ export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-social.wrapper.mjs

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
+const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];
+    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -74,7 +74,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the description and link theme when used on light background image.
      */
-    background?: "auto" | "light" | "dark" | undefined;
+    background?: "light" | "dark" | "auto" | undefined;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */

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

@@ -78,7 +78,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The style variant of the link.
      */

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLink = forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme = 'light', variant = 'primary', className, ...rest }, ref) => {
+const PLink = forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link');
-    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme, variant];
+    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -84,7 +84,7 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Adapts the modal color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/model-signature.wrapper.d.ts

@@ -30,9 +30,9 @@ export declare const PModelSignature: import("react").ForwardRefExoticComponent<
     /**
      * Adapts the size of the component.
      */
-    size?: "small" | "inherit" | undefined;
+    size?: "inherit" | "small" | undefined;
     /**
      * Adapts color depending on theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/model-signature.wrapper.mjs

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PModelSignature = forwardRef(({ color = 'primary', model = '911', size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-model-signature');
-    const propsToSync = [color, model, size, theme];
+    const propsToSync = [color, model, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/multi-select.wrapper.d.ts

@@ -94,7 +94,7 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
     /**
      * Adapts the select color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The selected values.
      */

package/esm/lib/components/multi-select.wrapper.mjs

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PMultiSelect = forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme = 'light', value = [], className, ...rest }, ref) => {
+const PMultiSelect = forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme, value];
+    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -102,7 +102,7 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The total count of items.
      */

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'pageChange', onPageChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme || useTheme(), totalItemsCount];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -78,7 +78,7 @@ export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Number of characters of the Pin Code.
      */
-    length?: 4 | 6 | undefined;
+    length?: 3 | 4 | 2 | 5 | 1 | 6 | undefined;
     /**
      * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
      */
@@ -106,7 +106,7 @@ export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Pin Code type.
      */

package/esm/lib/components/pin-code.wrapper.mjs

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPinCode = forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme = 'light', type = 'number', value = '', className, ...rest }, ref) => {
+const PPinCode = forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pin-code');
-    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value];
+    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -34,7 +34,7 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the popover color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,13 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PPopover = forwardRef(({ aria, description, direction = 'bottom', theme = 'light', className, ...rest }, ref) => {
+const PPopover = forwardRef(({ aria, description, direction = 'bottom', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-popover');
-    const propsToSync = [aria, description, direction, theme];
+    const propsToSync = [aria, description, direction, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -50,7 +50,7 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;