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

package/esm/lib/components/radio-button-wrapper.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 PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -38,7 +38,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Sets the vertical position of scroll indicator.
      */
-    alignScrollIndicator?: "center" | "top" | undefined;
+    alignScrollIndicator?: "top" | "center" | undefined;
     /**
      * Add ARIA role.
      */
@@ -54,7 +54,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `alignScrollIndicator` instead. Sets the vertical position of scroll indicator
      */
-    scrollIndicatorPosition?: "center" | "top" | undefined;
+    scrollIndicatorPosition?: "top" | "center" | undefined;
     /**
      * Scrolls the scroll area to the left either smooth or immediately.
      */
@@ -66,7 +66,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the 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/scroller.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 PScroller = forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
+const PScroller = forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -46,7 +46,7 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
     /**
      * Adapts the segmented-control color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * Sets the initial value of the segmented-control.
      */

package/esm/lib/components/segmented-control.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 PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, theme, value];
+    const propsToSync = [backgroundColor, columns, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -74,7 +74,7 @@ export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<O
     /**
      * Adapts the select 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/select-wrapper.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 PSelectWrapper = forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PSelectWrapper = forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-select-wrapper');
-    const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme];
+    const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -22,9 +22,9 @@ export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Size of the spinner.
      */
-    size?: BreakpointCustomizable<"small" | "inherit" | "medium" | "large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/spinner.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 PSpinner = forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PSpinner = forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme];
+    const propsToSync = [aria, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/stepper-horizontal.wrapper.d.ts

@@ -34,7 +34,7 @@ export declare const PStepperHorizontal: import("react").ForwardRefExoticCompone
     /**
      * Adapts the tag 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/stepper-horizontal.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 PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'stepChange', onStepChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme];
+    const propsToSync = [size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -74,7 +74,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the switch 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/switch.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 PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, ...rest }, ref) => {
+const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
+    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -34,7 +34,7 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Adapts the 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/table.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 PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, ...rest }, ref) => {
+const PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
-    const propsToSync = [caption, theme];
+    const propsToSync = [caption, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -62,7 +62,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The text weight.
      */

package/esm/lib/components/tabs-bar.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 PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -62,7 +62,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The text weight.
      */

package/esm/lib/components/tabs.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 PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -34,7 +34,7 @@ export declare const PTagDismissible: import("react").ForwardRefExoticComponent<
     /**
      * Adapts the 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/tag-dismissible.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 PTagDismissible = forwardRef(({ aria, color = 'background-surface', label, theme = 'light', className, ...rest }, ref) => {
+const PTagDismissible = forwardRef(({ aria, color = 'background-surface', label, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label, theme];
+    const propsToSync = [aria, color, label, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -26,7 +26,7 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAt
     /**
      * The icon shown.
      */
-    icon?: "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;
+    icon?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "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;
     /**
      * A URL path to a custom icon.
      */
@@ -34,7 +34,7 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<HTMLAt
     /**
      * Adapts the tag 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/tag.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 PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, ...rest }, ref) => {
+const PTag = forwardRef(({ color = 'background-surface', icon, iconSource, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme];
+    const propsToSync = [color, icon, iconSource, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/text-field-wrapper.wrapper.d.ts

@@ -106,7 +106,7 @@ export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponen
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The unit text.
      */

package/esm/lib/components/text-field-wrapper.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 PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
+const PTextFieldWrapper = forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme, unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme || useTheme(), unit, unitPosition];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/text-list.wrapper.d.ts

@@ -30,7 +30,7 @@ export declare const PTextList: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the text color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
     /**
      * The list style type.
      */

package/esm/lib/components/text-list.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 PTextList = forwardRef(({ listType, orderType, theme = 'light', type = 'unordered', className, ...rest }, ref) => {
+const PTextList = forwardRef(({ listType, orderType, theme, type = 'unordered', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme, type];
+    const propsToSync = [listType, orderType, theme || useTheme(), type];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -46,19 +46,19 @@ export declare const PText: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Size of the text. 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" | "xx-small" | "x-small" | "medium" | "large" | "x-large"> | undefined;
+    size?: BreakpointCustomizable<"inherit" | "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Sets a custom HTML tag depending on the usage of the text component.
      */
-    tag?: "address" | "blockquote" | "cite" | "div" | "figcaption" | "legend" | "p" | "span" | "time" | undefined;
+    tag?: "time" | "p" | "span" | "div" | "address" | "blockquote" | "figcaption" | "cite" | "legend" | undefined;
     /**
      * 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;
     /**
      * The weight of the text.
      */
-    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/text.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 PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PText = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));

package/esm/lib/components/textarea-wrapper.wrapper.d.ts

@@ -66,7 +66,7 @@ export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent
     /**
      * 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>>;

package/esm/lib/components/textarea-wrapper.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 PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PTextareaWrapper = forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));

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

@@ -10,5 +10,5 @@ export declare const PToast: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Adapts the toast color depending on the theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,15 +1,16 @@
 '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 PToast = forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+const PToast = forwardRef(({ theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-toast');
+    const themeValue = useTheme();
     useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
+        elementRef.current.theme = theme || themeValue;
+    }, [theme, themeValue]);
     const props = {
         ...rest,
         class: useMergedClass(elementRef, className),

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

@@ -34,7 +34,7 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts sizing of wordmark.
      */
-    size?: "small" | "inherit" | undefined;
+    size?: "inherit" | "small" | undefined;
     /**
      * Target attribute where the link should be opened.
      */
@@ -42,5 +42,5 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts color depending on theme.
      */
-    theme?: "auto" | "light" | "dark" | undefined;
+    theme?: "light" | "dark" | "auto" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/wordmark.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 PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+const PWordmark = forwardRef(({ aria, href, size = 'small', target = '_self', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-wordmark');
-    const propsToSync = [aria, href, size, target, theme];
+    const propsToSync = [aria, href, size, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));