@porsche-design-system/components-react 3.31.0-rc.0 → 4.0.0-alpha.0

package/CHANGELOG.md

@@ -14,6 +14,257 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-alpha.0] - 2025-12-12
+
+See the full [migration guide](/news/migration-guide/porsche-design-system/) for a detailed explanation of all changes
+and migration steps.
+
+### Added
+
+- Global Styles: mandatory CSS styles (normalize, font-face and color variables)
+  - `@porsche-design-system/components-{js|angular|react|vue}/index.css`
+  - `@porsche-design-system/components-{js|angular|react|vue}/cn/index.css`
+  - to enable legacy radius styles (aligned with app) import
+    `@porsche-design-system/components-{js|angular|react|vue}/legacy-radius.css`
+
+- `Divider`: value `contrast-lower` for prop `color`
+
+- `Multi Select, Select`:
+  - `selected` slot for custom selection rendering and enabling complex options
+  - `options-status` slot for loading, error and no results states when using custom filtering
+    ([#4111](https://github.com/porsche-design-system/porsche-design-system/pull/4111))
+- `Multi Select, Select`:
+  - `filter` slot to allow custom asynchronous filtering
+  - `toggle` event when opening/closing the dropdown
+    ([#4089](https://github.com/porsche-design-system/porsche-design-system/pull/4089))
+- `Segmented Control`: add `state` and `message` props to enable visual validation states
+  ([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023)) `Segmented Control`: add `label`,
+- `Segmented Control`: `label`, `desription`, `hideLabel` and `required` props for better form integration
+  ([#4023](https://github.com/porsche-design-system/porsche-design-system/pull/4023))
+- `Textarea`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#4102](https://github.com/porsche-design-system/porsche-design-system/pull/4102))
+- `Tag Dismissible`: `compact` prop to enable a smaller, space-saving version for compact layouts
+  ([#4114](https://github.com/porsche-design-system/porsche-design-system/pull/4114))
+- Flags: added `AL, BD, RE` flags ([#4128](https://github.com/porsche-design-system/porsche-design-system/pull/4128))
+- `Input Month`, `Input Week`: ([#4126](https://github.com/porsche-design-system/porsche-design-system/pull/4126))
+- `Input Search`: `maxLength` & `minLength` prop to specify the maximum and minimum number of characters the user can
+  enter ([#4131](https://github.com/porsche-design-system/porsche-design-system/pull/4131))
+
+### Changed
+
+- In general all headings use regular as font-weight
+- Remove theme prop since it's handled by CSS variables which can be controlled by `.light`, `.dark` or `.auto` CSS
+  class, e.g. `<p-input-text name="some-name"></p-input-text>` inside `<div class="dark">…</div>` will render the dark
+  theme.
+- Remove **slotted** Anchor Styles entirely from all components.
+- `Heading`: Uses a regular instead of semi-bold font-weight
+- `Text` and `Icon`:
+  - value `'notification-success', 'notification-warning', 'notification-error', 'notification-info'` of prop `color`
+    (use `'success', 'warning', 'error', 'info'` instead)
+- `Icon`:
+  - when `color="inherit"` is used no CSS filters are necessary anymore, instead a CSS color (e.g.
+    `p-icon { color: deeppink; }`) can be applied directly
+  - value `'state-disabled'` of prop color is removed
+- `Model Signature`:
+  - when `color="inherit"` is used a CSS color (e.g. `p-model-signature { color: deeppink; }`) can be applied directly
+- `Tag`:
+  - removed prop `color` and introduced prop `variant` with values `primary`, `secondary`, `success`, `warning`,
+    `error`, `info`
+- `Button`, `Link`:
+  - removed prop value `ghost`, use `secondary` instead
+- `Modal`
+  - visually changed footer slot: becomes frosted when it's sticky
+  - removed `.stretch-to-full-modal-width` use `-mt-(--ref-p-modal-pt) -mx-(--ref-p-modal-px) -mb-(--ref-p-modal-pb)`
+    instead
+  - added read only css variables `--ref-p-modal-pt`, `--ref-p-modal-pb`, `--ref-p-modal-px`
+  - added prop `background` with value `canvas | surface`
+- `Flyout`
+  - removed CSS variable `--p-flyout-max-width` (use `--p-flyout-width` with a static value or `min()`, `max()` or
+    `clamp()` instead)
+  - visually changed footer slot: becomes frosted when it's sticky
+  - added read only css variables `--ref-p-flyout-pb`
+  - added prop `background` with value `canvas | surface`
+- `Sheet`:
+  - added read only css variables `--ref-p-sheet-pt`, `--ref-p-sheet-px`, `--ref-p-sheet-pb`
+  - added prop `background` with value `canvas | surface`
+- `Inline Notification`:
+  - removed max-width limitation for content
+- `Banner`:
+  - added `state="success"`
+  - removed max-width limitation for content
+- `Toast`:
+  - added `state="warning | error"`
+- `Carousel`:
+  - removed CSS variable `--p-carousel-prev-next-filter`
+  - removed prop `gradient-color` (use `gradient="true"` instead)
+  - changed default value of prop `trim-space` from `true` to `false` (use `<p-carousel trim-space="true"></p-carousel>`
+    to enable trimming)
+  - changed default value of prop `pagination` from `true` to `false` (use `<p-carousel pagination="true"></p-carousel>`
+    to enable pagination)
+  - changed default value of prop `rewind` from `true` to `false` (use `<p-carousel rewind="true"></p-carousel>` to
+    enable rewind)
+- `Link Tile`, `Button Tile`:
+  - changed default value of prop `gradient` from `true` to `false` (use `<p-link-tile gradient="true"></p-link-tile>`
+    to enable gradient)
+  - removed prop `background` (use CSS class `.light | .dark | .auto` on :host element instead)
+  - added an optional light gradient when used in light mode and gradient is enabled
+  - added value `auto` for prop `aspect-ratio`
+- `Link Tile Product`:
+  - Values `3:4 | 9:16` of prop `aspect-ratio` (use `3/4 | 9/16` instead)
+
+- Tailwind CSS:
+  - Reset all default Tailwind color tokens
+  - Remove -light and -dark color tokens, instead control theming via `.light`, `.dark` or `.auto` CSS class only
+
+### Removed
+
+- `Partials`:
+  - Removed `getBrowserSupportFallbackScript()` and `getCookiesFallbackScript()` which are now in separate repo
+    `@porsche-design-system/fallbacks`
+  - Removed `getDSRPonyfill()` partial
+  - Removed `getFontFaceStyles()`, `getFontFaceStylesheet()` and `getInitialStyles()` partial in favor of CSS imports
+    from `@porsche-design-system/components-{js|angular|react|vue}`
+  - `@font-face` styles are no longer auto-injected, import of global styles is mandatory now
+  - Automatic FOUC handling in `getInitialStyles()`, must be implemented manually now
+
+- `Accordion`:
+  - prop `tag` (use `heading-tag` instead)
+  - event `accordionChange` (use `update` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Banner`:
+  - `slot="title"` (use `slot="heading"` instead)
+  - prop `persistent` (use `dismissButton` instead)
+  - prop `width`
+  - value `neutral` of prop `state` (use `info` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Button`, `Link`:
+  - prop `tertiary`
+- `Button Pure`:
+  - prop `weight` (can't be configured anymore)
+  - value `left | right` of prop `alignLabel` (use `start | end` instead)
+- `Carousel`:
+  - prop `wrapContent` (has no effect anyway)
+  - prop `disablePagination` (use `pagination` instead)
+  - value `left` of prop `alignHeader` (use `start` instead)
+  - event `carouselChange` (use `update` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Checkbox`:
+  - event `update` (use `change` instead)
+- `Display`:
+  - value `left | right` of prop `align` (use `start | end` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Divider`:
+  - prop `orientation` (use `direction` instead)
+  - value `neutral-contrast-{low|medium|high}` of prop `color` (use `contrast-{low|medium|high}` instead)
+- `Flyout`:
+  - value `left | right` of prop `position` (use `start | end` instead)
+- `Heading`:
+  - value `left | right` of prop `align` (use `start | end` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Icon`:
+  - prop: `lazy`
+  - value
+    `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of
+    prop `color` (use `primary | contrast-low | contrast-medium | contrast-high | notification-info` instead)
+- `Inline Notification`:
+  - prop `persistent` (use `dismissButton` instead)
+  - value `neutral` of prop `state` (use `info` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Link Pure`:
+  - prop `weight` (can't be configured anymore)
+  - value `left | right` of prop `alignLabel` (use `start | end` instead)
+- `Link Tile`, `Link Tile Model Signature`, `Button Tile`:
+  - Values `1:1 | 4:3 | 3:4 | 16:9 | 9:16` of prop `aspect-ratio` (use `1/1 | 4/3 | 3/4 | 16/9 | 9/16` instead)
+- `Link Tile`, `Button Tile`:
+  - Value `default` of prop `size` (use `medium` instead)
+  - Value `semibold` of prop `weight` (use `semi-bold` instead)
+- `Modal`:
+  - prop `disableCloseButton` (use `dismissButton` instead)
+  - prop `heading` (use `slot="header"` instead)
+  - slot `heading` (use `slot="header"` instead)
+  - event `close` (use `dismiss` instead)
+- `Multi Select`:
+  - event `update` (use `change` instead)
+- `Pagination`:
+  - prop `allyLabel` (use `intl.root` instead)
+  - prop `allyLabelPrev` (use `intl.prev` instead)
+  - prop `allyLabelPage` (use `intl.page` instead)
+  - prop `allyLabelNext` (use `intl.next` instead)
+  - prop `maxNumberOfPageLinks` (has no effect anyway)
+  - event `pageChange` (use `update` instead)
+- `Pin Code`:
+  - event `update` (use `change` instead)
+- `Scroller`:
+  - prop `gradientColorScheme` (has no effect anyway)
+  - prop `gradientColor` (has no effect anyway)
+  - prop `scrollIndicatorPosition` (use `alignScrollIndicator` instead)
+- `Segmented Control`:
+  - prop `backgroundColor` (has no effect anyway)
+  - event `segmentedControlChange` (use `change` instead)
+  - event `update` (use `change` instead)
+- `Select`:
+  - event `update` (use `change` instead)
+- `Stepper Horizontal`:
+  - event `stepChange` (use `update` instead)
+- `Switch`:
+  - value `left | right` of prop `alignLabel` (use `start | end` instead)
+  - event `switchChange` (use `update` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Table`:
+  - event `sortingChange` (use `update` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Tabs`, `Tabs Bar`:
+  - prop `gradientColorScheme` (has no effect anyway)
+  - prop `gradientColor` (has no effect anyway)
+  - value `semibold` of prop `weight` (use `semi-bold` instead)
+  - event `tabChange` (use `update` instead)
+- `Tabs`
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Tag`:
+  - prop `color` (use `variant` instead)
+- `Tag Dismissible`:
+  - prop `color`
+- `Text`
+  - value `left | right` of prop `align` (use `start | end` instead)
+  - value
+    `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of
+    prop `color` (use `primary | contrast-low | contrast-medium | contrast-high | notification-info` instead)
+  - value `semibold` of prop `weight` (use `semi-bold` instead)
+  - Slotted anchor styling (use `Link Pure` instead or define an anchor style)
+- `Text List`
+  - prop `listType` (use `type` instead)
+  - prop `orderType` (use `type` instead)
+  - Slotted anchor `<a>` styling (use `Link Pure` instead or define an anchor style)
+- `Toast`:
+  - value `neutral` of prop `state` (use `info` instead)
+- Removed Components:
+  - `Button Group` (use Tailwind CSS instead,
+    `<div role="group" class="flex flex-wrap gap-fluid-sm max-xs:flex-col">…</div>`)
+  - `Checkbox Wrapper` (use `Checkbox` instead)
+  - `Radio Button Wrapper` (use `Radio Group` instead)
+  - `Content Wrapper` (use Porsche Grid Style instead, Tailwind CSS is recommended)
+  - `Link Tile Model Signature`
+  - `Fieldset Wrapper` (use `Fieldset` instead)
+  - `Flex` (use CSS Flex instead, Tailwind CSS is recommended)
+  - `Grid` (use CSS Grid instead, Tailwind CSS is recommended)
+  - `Headline` (use `Heading` instead)
+  - `Link Social`
+  - `Marque` (use `Wordmark` (recommended) or `Crest` instead)
+  - `Select Wrapper` (use `Select` instead)
+  - `Text Field Wrapper` (use `Input-{Date|Email|Number|Password|Search|Tel|Text|Time|Url}` instead)
+  - `Textarea Wrapper` (use `Textarea` instead)
+
+### Fixed
+
+- `Checkbox`: missing deprecation for `CheckboxUpdateEventDetail` event & disabled prop is not mutable
+- `Input Date`, `Input Email`, `Input Number`, `Input Password`, `Input Search`, `Input Tel`, `Input Text`,
+  `Input Time`, `Input Url`, `Textarea`: disabled prop is not mutable & error when disabled and invalid
+- `Multi Select`, `Pin Code`, `Radio Group`, `Textarea`: disabled prop is not mutable
+  ([#4118](https://github.com/porsche-design-system/porsche-design-system/pull/4118))
+  ([#4121](https://github.com/porsche-design-system/porsche-design-system/pull/4121))
+
+## [3.31.0] - 2025-11-13
+
 ## [3.31.0-rc.0] - 2025-11-11
 
 ### Added
@@ -1427,7 +1678,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ```diff
 - <p-carousel align-header="left"></p-carousel>
-+ <p-carousel-pure align-header="start"></p-carousel>
++ <p-carousel align-header="start"></p-carousel>
 ```
 
 ### Fixed

package/cjs/hooks.cjs

@@ -25,14 +25,6 @@ const usePrefix = (tagName) => {
         return prefix ? prefix + '-' + tagName : tagName;
     }
 };
-const useTheme = () => {
-    if (process.env.NODE_ENV === 'test' && skipCheck) {
-        return 'light';
-    }
-    else {
-        return react.useContext(provider.PorscheDesignSystemContext).theme; // eslint-disable-line react-hooks/rules-of-hooks
-    }
-};
 const useEventCallback = (ref, eventName, eventHandler) => {
     // @ts-expect-error
     react.useEffect(() => {
@@ -62,7 +54,7 @@ const useMergedClass = (ref, className) => {
 };
 const useBrowserLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const useToastManager = () => {
-    const tagName = usePrefix('p-toast');
+    const tagName = internalHooks.usePrefix('p-toast');
     return {
         addMessage: (message) => {
             const toast = document.body.querySelector(tagName);
@@ -70,11 +62,14 @@ const useToastManager = () => {
         },
     };
 };
+const internalHooks = {
+    usePrefix,
+};
 
+exports.internalHooks = internalHooks;
 exports.skipCheckForPorscheDesignSystemProviderDuringTests = skipCheckForPorscheDesignSystemProviderDuringTests;
 exports.useBrowserLayoutEffect = useBrowserLayoutEffect;
 exports.useEventCallback = useEventCallback;
 exports.useMergedClass = useMergedClass;
 exports.usePrefix = usePrefix;
-exports.useTheme = useTheme;
 exports.useToastManager = useToastManager;

package/cjs/lib/components/accordion.wrapper.cjs

@@ -6,15 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTag = 'h2', onAccordionChange, onUpdate, open, size = 'small', sticky, tag, theme, className, ...rest }, ref) => {
+const PAccordion = /*#__PURE__*/ react.forwardRef(({ compact, heading, headingTag = 'h2', onUpdate, open, size = 'small', sticky, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
-    const propsToSync = [compact, heading, headingTag, open, size, sticky, tag, theme || hooks.useTheme()];
+    const propsToSync = [compact, heading, headingTag, open, size, sticky];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'heading', 'headingTag', 'open', 'size', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/banner.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, persistent, state = 'info', theme, width, className, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, state = 'info', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, headingTag, open, persistent, state, theme || hooks.useTheme(), width];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/button-pure.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, theme, type = 'submit', underline = false, value, weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'end', aria, disabled = false, form, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, name, size = 'small', stretch = false, type = 'submit', underline = false, value, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, theme || hooks.useTheme(), type, underline, value, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, form, hideLabel, icon, iconSource, loading, name, size, stretch, type, underline, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'theme', 'type', 'underline', 'value', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'size', 'stretch', 'type', 'underline', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/button-tile.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButtonTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+const PButtonTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', compact = false, description, disabled = false, gradient = false, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button-tile');
-    const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
+    const propsToSync = [align, aria, aspectRatio, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'disabled', 'gradient', 'icon', 'iconSource', 'label', 'loading', 'size', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/button.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/canvas.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, ...rest }, ref) => {
+const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     hooks.useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = hooks.usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarStartOpen, theme || hooks.useTheme()];
+    const propsToSync = [sidebarEndOpen, sidebarStartOpen];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/carousel.wrapper.cjs

@@ -6,15 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, focusOnCenterSlide = false, gradient = false, heading, headingSize = 'x-large', intl, onUpdate, pagination = false, rewind = false, skipLinkTarget, slidesPerPage = 1, trimSpace = false, width = 'basic', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, focusOnCenterSlide, gradient, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, trimSpace, width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'focusOnCenterSlide', 'gradient', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'trimSpace', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/checkbox.wrapper.cjs

@@ -6,16 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
+const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, required = false, state = 'none', value = 'on', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
-    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-checkbox');
-    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/display.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme, className, ...rest }, ref) => {
+const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-display');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme()];
+    const propsToSync = [align, color, ellipsis, size, tag];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/divider.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
+const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-lower', direction = 'horizontal', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-divider');
-    const propsToSync = [color, direction, orientation, theme || hooks.useTheme()];
+    const propsToSync = [color, direction];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/drilldown.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PDrilldown = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PDrilldown = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-drilldown');
-    const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
+    const propsToSync = [activeIdentifier, aria, open];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeIdentifier', 'aria', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeIdentifier', 'aria', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/fieldset.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFieldset = /*#__PURE__*/ react.forwardRef(({ aria, label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
+const PFieldset = /*#__PURE__*/ react.forwardRef(({ aria, label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-fieldset');
-    const propsToSync = [aria, label, labelSize, message, required, state, theme || hooks.useTheme()];
+    const propsToSync = [aria, label, labelSize, message, required, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'label', 'labelSize', 'message', 'required', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/flyout.wrapper.cjs

@@ -6,16 +6,16 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, disableBackdropClick, footerBehavior, open, position, theme || hooks.useTheme()];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'disableBackdropClick', 'footerBehavior', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/heading.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme, className, ...rest }, ref) => {
+const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-heading');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme()];
+    const propsToSync = [align, color, ellipsis, size, tag];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/icon.wrapper.cjs

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
+const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'small', source, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-icon');
-    const propsToSync = [aria, color, lazy, name, size, source, theme || hooks.useTheme()];
+    const propsToSync = [aria, color, name, size, source];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'color', 'name', 'size', 'source'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/lib/components/inline-notification.wrapper.cjs

@@ -6,15 +6,15 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
+const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, state = 'info', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme || hooks.useTheme()];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,