@porsche-design-system/components-react 3.0.0-rc.0 → 3.0.0-rc.2

package/CHANGELOG.md

@@ -9,12 +9,71 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-rc.2] - 2023-05-09
+
+#### Fixed
+
+- `Checkbox Wrapper` Safari visual state change while hovering
+  [#2508](https://github.com/porsche-design-system/porsche-design-system/pull/2508)
+- `Checkbox Wrapper` keyboard arrow navigation
+  [#2508](https://github.com/porsche-design-system/porsche-design-system/pull/2508)
+- `Modal` fix hover state of dismiss button
+  ([#2510](https://github.com/porsche-design-system/porsche-design-system/pull/2510))
+- `Link Pure`, `Button Pure`: adjust offset of `:hover` and `active` styles
+  ([#2511](https://github.com/porsche-design-system/porsche-design-system/pull/2511))
+- `Tabs Bar`, `Tabs` ([#2521](https://github.com/porsche-design-system/porsche-design-system/pull/2521)):
+  - `focus` state of tabpanel
+  - Indicator bar height
+- Optimize icon/text alignment of `Link Pure` and `Button Pure` in Safari
+- `Select Wrapper` multiline option height and scaling behavior
+  ([#2524](https://github.com/porsche-design-system/porsche-design-system/pull/2524))
+- Fixed accessibility issues of `Tabs`, `Tabs Bar` and `Stepper Horizontal` to comply with v.4.7.0 of `axe-core`
+  ([#2530](https://github.com/porsche-design-system/porsche-design-system/pull/2530))
+- React: `patchRemixRunProcessBrowserGlobalIdentifier` binary now supports Remix 1.16.0
+  ([#2537](https://github.com/porsche-design-system/porsche-design-system/pull/2537))
+- Angular: added optional modifier to optional properties for better type checking in strict mode
+  ([#2544](https://github.com/porsche-design-system/porsche-design-system/pull/2544))
+
+#### Added
+
+- Deprecation warning to `Icon` component if `lazy` prop is used
+  ([#2521](https://github.com/porsche-design-system/porsche-design-system/pull/2521))
+- `aria` prop to `Scroller` component
+  ([#2530](https://github.com/porsche-design-system/porsche-design-system/pull/2530))
+
+#### Changed
+
+- Model signature asset of 718 model ([#2532](https://github.com/porsche-design-system/porsche-design-system/pull/2532))
+
+### [3.0.0-rc.1] - 2023-04-19
+
+#### Added
+
+- Prop `name` for `Icon` supports `push-pin`, `push-pin-off`, `qr`, `pin-filled`, `shopping-cart-filled`,
+  `shopping-bag-filled`, `logo-apple-podcast`, `logo-spotify` and `user-filled`
+  ([#2471](https://github.com/porsche-design-system/porsche-design-system/pull/2471)).
+- **[EXPERIMENTAL]** Prop `loading` for `Checkbox Wrapper`
+  ([#2483](https://github.com/porsche-design-system/porsche-design-system/pull/2483))
+
+#### Fixed
+
+- `Wordmark`, `Crest` and `Model Signature` respect parent width/height
+  ([#2479](https://github.com/porsche-design-system/porsche-design-system/pull/2479))
+- `Button Tile`, `Link Tile` and `Link Tile Model Signature` are using correct border radius of
+  `pds-border-radius-large` ([#2473](https://github.com/porsche-design-system/porsche-design-system/pull/2473))
+- `Text Field Wrapper` with `input type="search"` has better accessibility for clear button
+  ([#2476](https://github.com/porsche-design-system/porsche-design-system/pull/2476))
+- `Accordion` layout shift with nested accordions
+  ([#2465](https://github.com/porsche-design-system/porsche-design-system/pull/2465))
+- Color Contrast issues and rendering in Windows High Contrast Mode
+  ([#2420](https://github.com/porsche-design-system/porsche-design-system/pull/2420))
+
 ### [3.0.0-rc.0] - 2023-04-11
 
-### Fixed
+#### Fixed
 
 - Styles: `borderRadiusLarge` and `pds-border-radius-large` are exposing correct value
-  ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2461))
+  ([#2463](https://github.com/porsche-design-system/porsche-design-system/pull/2463))
 
 ### [3.0.0-alpha.6] - 2023-04-06
 
@@ -50,7 +109,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ```diff
 - <PAccordion onAccordionChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
-+ <PAccordion onUpdate={(e: CustomEvent<AccordionUPdateEvent>) => {}} />
++ <PAccordion onUpdate={(e: CustomEvent<AccordionUpdateEvent>) => {}} />
 ```
 
 ##### Banner:
@@ -89,7 +148,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PPagination onUpdate={(e: CustomEvent<PaginationUpdateEvent>) => {}} />
 ```
 
-#### Segmented Control:
+##### Segmented Control:
 
 - Event `segmentedControlChange` is deprecated, use `update` event instead.
 
@@ -98,7 +157,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSegmentedControl onUpdate={(e: CustomEvent<SegmentedControlUpdateEvent>) => {}} />
 ```
 
-#### Stepper Horizontal:
+##### Stepper Horizontal:
 
 - Event `stepChange` is deprecated, use `update` event instead.
 
@@ -107,7 +166,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PStepperHorizontal onUpdate={(e: CustomEvent<StepperHorizontalUpdateEvent>) => {}} />
 ```
 
-#### Switch:
+##### Switch:
 
 - Event `switchChange` is deprecated, use `update` event instead.
 
@@ -116,7 +175,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSwitch onUpdate={(e: CustomEvent<SwitchUpdateEvent>) => {}} />
 ```
 
-#### Table:
+##### Table:
 
 - Event `sortingChange` is deprecated, use `update` event instead.
 
@@ -149,6 +208,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Wordmark` ([#2418](https://github.com/porsche-design-system/porsche-design-system/pull/2418))
 - `Crest` ([#2437](https://github.com/porsche-design-system/porsche-design-system/pull/2437))
+
+#### Changed
+
 - Styles: changed color values of `theme[Light|Dark]ContrastMedium` and `theme[Light|Dark]Notification[*]` color tokens
   of `Styles` subpackage ([#2436](https://github.com/porsche-design-system/porsche-design-system/pull/2436))
 
@@ -200,9 +262,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - `Banner`: CSS variable `--p-banner-position-type`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
+- Styles: `gridSafeZone`, `gridSafeZoneBase`, `gridSafeZoneXXL` and `pds-grid-safe-zone-base`, `pds-grid-safe-zone-xxl`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
-- `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
+- Styles: `gridWidth`, `gridWidthMin`, `gridWidthMax` and `pds-grid-width-min`, `pds-grid-width-max`
   ([#2422](https://github.com/porsche-design-system/porsche-design-system/pull/2422))
 
 #### 🤖 Property deprecations 🤖
@@ -246,7 +308,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PAccordion onChange={(e: CustomEvent<AccordionChangeEvent>) => {}} />
 ```
 
-#### Banner:
+##### Banner:
 
 - Named `slot="title"` is deprecated, use `heading` prop or `slot="heading"` instead.
 
@@ -304,7 +366,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <p-link-tile weight="semi-bold"></p-link-tile>
 ```
 
-#### Modal:
+##### Modal:
 
 - Prop `disableCloseButton` is deprecated, use `dismissButton` instead.
 - Event `close` is deprecated, use `dismiss` event instead.
@@ -343,7 +405,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <p-scroller align-scroll-indicator="top"></p-scroller>
 ```
 
-#### Segmented Control:
+##### Segmented Control:
 
 - Event `segmentedControlChange` is deprecated, use `change` event instead.
 
@@ -352,7 +414,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSegmentedControl onChange={(e: CustomEvent<SegmentedControlChangeEvent>) => {}} />
 ```
 
-#### Stepper Horizontal:
+##### Stepper Horizontal:
 
 - Event `stepChange` is deprecated, use `change` event instead.
 
@@ -361,7 +423,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PStepperHorizontal onChange={(e: CustomEvent<StepperHorizontalChangeEvent>) => {}} />
 ```
 
-#### Switch:
+##### Switch:
 
 - Event `switchChange` is deprecated, use `change` event instead.
 
@@ -370,7 +432,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 + <PSwitch onChange={(e: CustomEvent<SwitchChangeEvent>) => {}} />
 ```
 
-#### Table:
+##### Table:
 
 - Event `sortingChange` is deprecated, use `change` event instead.
 
@@ -434,9 +496,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Prop `showCharacterCount` is deprecated, use `showCounter` instead.
 
 ```diff
--<p-text-field-wrapper show-character-count="false">
-+<p-text-field-wrapper show-counter="false">
-  <input type="text" maxlength="20" />
+- <p-text-field-wrapper show-character-count="false">
++ <p-text-field-wrapper show-counter="false">
+    <input type="text" maxlength="20" />
 </p-text-field-wrapper>
 ```
 
@@ -445,9 +507,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Prop `showCharacterCount` is deprecated, use `showCounter` instead.
 
 ```diff
--<p-textarea-wrapper show-character-count="false">
-+<p-textarea-wrapper show-counter="false">
-  <textarea maxlength="80"></textarea>
+- <p-textarea-wrapper show-character-count="false">
++ <p-textarea-wrapper show-counter="false">
+    <textarea maxlength="80"></textarea>
 </p-textarea-wrapper>
 ```
 
@@ -485,10 +547,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
   - `Pagination` emits `change` and deprecated `pageChange` event
   - `Segmented Control` emits `change` and deprecated `segmentedControlChange` event
   - `Stepper Horizontal` emits `change` and deprecated `stepChange` event
-  - `Switch` emits `change`and deprecated `switchChange` event
-  - `Table` emits `change`and deprecated `sortingChange` event
-  - `Tabs` emits `change`and deprecated `tabChange` event
-  - `Tabs Bar` emits `change`and deprecated `tabChange` event
+  - `Switch` emits `change` and deprecated `switchChange` event
+  - `Table` emits `change` and deprecated `sortingChange` event
+  - `Tabs` emits `change` and deprecated `tabChange` event
+  - `Tabs Bar` emits `change` and deprecated `tabChange` event
 - Props have consistent names across components and deprecated old props
   - `Carousel` got `pagination` prop and deprecated `disablePagination` prop
   - `Divider` got `direction` prop and deprecated `orientation` prop

package/bin/patchRemixRunProcessBrowserGlobalIdentifier.js

@@ -26,32 +26,41 @@ var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
 
 const patchRemixRunProcessBrowserGlobalIdentifier = () => {
     const packageEntry = require.resolve('@remix-run/dev');
-    const compilerDirPath = path__namespace.resolve(packageEntry, '../compiler');
-    const [fileName] = fs__namespace
-        .readdirSync(compilerDirPath)
-        // file is currently called compileBrowser.js, but the other part is compilerServer.js
-        // that's why we also consider compilerBrowser.js to be on the safe side
-        .filter((fileName) => fileName.match(/^compiler?Browser\.js$/));
-    const filePath = path__namespace.resolve(compilerDirPath, fileName);
-    const filePathBackup = filePath.replace(/\.js$/, '-original$&');
-    if (!fs__namespace.existsSync(filePathBackup)) {
-        fs__namespace.copyFileSync(filePath, filePathBackup);
-    }
-    else {
-        fs__namespace.copyFileSync(filePathBackup, filePath);
-    }
-    const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
-    // prepending should be safer than appending because JSON.stringify() might be multiline like in source
-    // https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
-    const newFileContent = fileContent.replace(/"process\.env\.REMIX_DEV_SERVER_WS_PORT": JSON\.stringify\(.*/, '"process.browser": "true",\n      $&');
-    const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
-    if (newFileContent.includes('"process.browser": "true"')) {
-        console.log(`Successfully patched ${prettyFilePath}`);
-    }
-    else {
-        console.error(`Patching ${prettyFilePath} failed`);
-    }
-    fs__namespace.writeFileSync(filePath, newFileContent);
+    const compilerDirPaths = [
+        path__namespace.resolve(packageEntry, '../compiler'),
+        path__namespace.resolve(packageEntry, '../compiler/js'), // since 1.16.0 the file was moved into js sub-folder
+    ].filter(fs__namespace.existsSync);
+    const filePaths = compilerDirPaths
+        .map((compilerDirPath) => fs__namespace.readdirSync(compilerDirPath).map((fileName) => `${compilerDirPath}/${fileName}`))
+        .flat()
+        // file is currently called compileBrowser.js
+        // since 1.16.0 the file is called compiler.js
+        .filter((fileName) => fileName.match(/\/(?:compileBrowser|compiler)\.js$/));
+    filePaths.forEach((filePath) => {
+        const filePathBackup = filePath.replace(/\.js$/, '-original$&');
+        if (!fs__namespace.existsSync(filePathBackup)) {
+            fs__namespace.copyFileSync(filePath, filePathBackup);
+        }
+        else {
+            fs__namespace.copyFileSync(filePathBackup, filePath);
+        }
+        const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
+        // we want to extend the define config
+        // https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/js/compiler.ts#L221-L226
+        if (fileContent.match(/define: \{/)) {
+            // prepending should be safer than appending because JSON.stringify() might be multiline like in source
+            // https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
+            const newFileContent = fileContent.replace(/"process\.env\.NODE_ENV": JSON\.stringify\(.*/, '"process.browser": "true", // added by Porsche Design System\'s patchRemixRunProcessBrowserGlobalIdentifier.js\n      $&');
+            const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
+            if (newFileContent.includes('"process.browser": "true"')) {
+                console.log(`Successfully patched ${prettyFilePath}`);
+            }
+            else {
+                console.error(`Patching ${prettyFilePath} failed`);
+            }
+            fs__namespace.writeFileSync(filePath, newFileContent);
+        }
+    });
 };
 patchRemixRunProcessBrowserGlobalIdentifier();
 

package/esm/lib/components/checkbox-wrapper.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PIcon = forwardRef(({ aria, color = 'primary', lazy = false, 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 = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];

package/esm/lib/components/scroller.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PScroller = forwardRef(({ alignScrollIndicator = 'center', 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 = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -9,6 +9,10 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange
      * The label text.
      */
     label?: string;
+    /**
+     * Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */
@@ -31,6 +35,10 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      * The label text.
      */
     label?: string;
+    /**
+     * Disables the checkbox and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */

package/lib/components/checkbox-wrapper.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/icon.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PIcon = react.forwardRef(({ aria, color = 'primary', lazy = false, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];

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

@@ -1,10 +1,14 @@
 import { HTMLAttributes } from 'react';
-import type { ScrollerAlignScrollIndicator, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
+import type { ScrollerAlignScrollIndicator, SelectedAriaAttributes, ScrollerAriaAttribute, ScrollerGradientColor, ScrollerGradientColorScheme, ScrollerScrollIndicatorPosition, ScrollerScrollToPosition, Theme } from '../types';
 export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
-     * Sets the vertical position of scroll indicator
+     * Sets the vertical position of scroll indicator.
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
+    /**
+     * Add ARIA role.
+     */
+    aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
      * Adapts the background gradient color of prev and next button.
      */
@@ -18,11 +22,11 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
-     * Scrolls the scroll area to the left either smooth or immediately
+     * Scrolls the scroll area to the left either smooth or immediately.
      */
     scrollToPosition?: ScrollerScrollToPosition;
     /**
-     * Specifies if scrollbar should be shown
+     * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
     /**
@@ -32,9 +36,13 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
 };
 export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
-     * Sets the vertical position of scroll indicator
+     * Sets the vertical position of scroll indicator.
      */
     alignScrollIndicator?: ScrollerAlignScrollIndicator;
+    /**
+     * Add ARIA role.
+     */
+    aria?: SelectedAriaAttributes<ScrollerAriaAttribute>;
     /**
      * Adapts the background gradient color of prev and next button.
      */
@@ -48,11 +56,11 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
      */
     scrollIndicatorPosition?: ScrollerScrollIndicatorPosition;
     /**
-     * Scrolls the scroll area to the left either smooth or immediately
+     * Scrolls the scroll area to the left either smooth or immediately.
      */
     scrollToPosition?: ScrollerScrollToPosition;
     /**
-     * Specifies if scrollbar should be shown
+     * Specifies if scrollbar should be shown.
      */
     scrollbar?: boolean;
     /**

package/lib/components/scroller.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,