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

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

@@ -63,7 +63,7 @@ export type PLinkPureProps = BaseProps & {
      */
     weight?: LinkPureWeight;
 };
-export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display link in active state.
      */

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

@@ -35,7 +35,7 @@ export type PLinkSocialProps = BaseProps & {
     theme?: Theme;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays as compact version.
      */

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

@@ -30,7 +30,7 @@ export type PLinkTileModelSignatureProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
 };
-export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aspect ratio of the link-tile-model-signature.
      */

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

@@ -50,7 +50,7 @@ export type PLinkTileProductProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aspect ratio of the link-tile-product.
      */

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

@@ -58,7 +58,7 @@ export type PLinkTileProps = BaseProps & {
      */
     weight?: BreakpointCustomizable<LinkTileWeight>;
 };
-export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of link and description.
      */

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

@@ -46,7 +46,7 @@ export type PLinkProps = BaseProps & {
      */
     variant?: LinkVariant;
 };
-export declare const PLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -27,7 +27,7 @@ export type PMarqueProps = BaseProps & {
     variant?: MarqueVariant;
 };
 /** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
-export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PMarque: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -55,7 +55,7 @@ export type PModalProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PModal: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PModal: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -30,7 +30,7 @@ export type PModelSignatureProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PModelSignature: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Adapts the color of the component.
      */

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

@@ -9,7 +9,7 @@ export type PMultiSelectOptionProps = BaseProps & {
      */
     value: string;
 };
-export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PMultiSelectOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectChangeEventDetail, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
+import type { MultiSelectDropdownDirection, BreakpointCustomizable, MultiSelectChangeEventDetail, MultiSelectToggleEventDetail, MultiSelectUpdateEventDetail, MultiSelectState, Theme } from '../types';
 export type PMultiSelectProps = BaseProps & {
     /**
      * Displays as compact version.
@@ -45,6 +45,10 @@ export type PMultiSelectProps = BaseProps & {
      * Emitted when the selection is changed.
      */
     onChange?: (event: CustomEvent<MultiSelectChangeEventDetail>) => void;
+    /**
+     * Emitted when the dropdown is toggled.
+     */
+    onToggle?: (event: CustomEvent<MultiSelectToggleEventDetail>) => void;
     /**
      * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
      */
@@ -66,7 +70,7 @@ export type PMultiSelectProps = BaseProps & {
      */
     value?: string[];
 };
-export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays as compact version.
      */
@@ -111,6 +115,10 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
      * Emitted when the selection is changed.
      */
     onChange?: (event: CustomEvent<MultiSelectChangeEventDetail>) => void;
+    /**
+     * Emitted when the dropdown is toggled.
+     */
+    onToggle?: (event: CustomEvent<MultiSelectToggleEventDetail>) => void;
     /**
      * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
      */

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

@@ -4,10 +4,11 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, onUpdate, required = false, state = 'none', theme, value = [], className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'toggle', onToggle);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
     const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];

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

@@ -9,7 +9,7 @@ export type POptgroupProps = BaseProps & {
      */
     label?: string;
 };
-export declare const POptgroup: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const POptgroup: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the optgroup.
      */

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

@@ -55,7 +55,7 @@ export type PPaginationProps = BaseProps & {
      */
     totalItemsCount: number;
 };
-export declare const PPagination: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PPagination: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Index of the currently active page.
      */

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

@@ -74,7 +74,7 @@ export type PPinCodeProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A boolean value that, if present, renders the pin-code as a compact version.
      */

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

@@ -18,7 +18,7 @@ export type PPopoverProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -27,7 +27,7 @@ export type PRadioButtonWrapperProps = BaseProps & {
     theme?: Theme;
 };
 /** @deprecated since v3.30.0, will be removed with next major release. Please use `p-radio-group` instead. */
-export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */

package/esm/lib/components/radio-group-option.wrapper.d.ts

@@ -17,7 +17,7 @@ export type PRadioGroupOptionProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PRadioGroupOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PRadioGroupOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A boolean value that, if present, makes the radio group option unusable and unclickable.
      */

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

@@ -66,7 +66,7 @@ export type PRadioGroupProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PRadioGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PRadioGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A boolean value that, if present, renders the radio group as a compact version.
      */

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

@@ -34,7 +34,7 @@ export type PScrollerProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Sets the vertical position of scroll indicator.
      */

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

@@ -26,7 +26,7 @@ export type PSegmentedControlItemProps = BaseProps & {
      */
     value: string | number;
 };
-export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSegmentedControlItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, SegmentedControlChangeEventDetail, SegmentedControlUpdateEventDetail, Theme } from '../types';
+import type { SegmentedControlBackgroundColor, BreakpointCustomizable, SegmentedControlColumns, SegmentedControlChangeEventDetail, SegmentedControlUpdateEventDetail, SegmentedControlState, Theme } from '../types';
 export type PSegmentedControlProps = BaseProps & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
@@ -13,6 +13,10 @@ export type PSegmentedControlProps = BaseProps & {
      * A boolean value that, if present, renders the segmented-control as a compact version.
      */
     compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the segmented-control.
+     */
+    description?: string;
     /**
      * Disables the segmented-control.
      */
@@ -21,6 +25,18 @@ export type PSegmentedControlProps = BaseProps & {
      * The id of a form element the segmented-control should be associated with.
      */
     form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
     /**
      * The name of the segmented-control.
      */
@@ -41,6 +57,14 @@ export type PSegmentedControlProps = BaseProps & {
      * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
      */
     onUpdate?: (event: CustomEvent<SegmentedControlUpdateEventDetail>) => void;
+    /**
+     * A boolean value that specifies a selection must be made from the group before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the component.
+     */
+    state?: SegmentedControlState;
     /**
      * Adapts the segmented-control color depending on the theme.
      */
@@ -50,7 +74,7 @@ export type PSegmentedControlProps = BaseProps & {
      */
     value?: string | number;
 };
-export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release. Background color variations
      */
@@ -63,6 +87,10 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * A boolean value that, if present, renders the segmented-control as a compact version.
      */
     compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the segmented-control.
+     */
+    description?: string;
     /**
      * Disables the segmented-control.
      */
@@ -71,6 +99,18 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * The id of a form element the segmented-control should be associated with.
      */
     form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
     /**
      * The name of the segmented-control.
      */
@@ -91,6 +131,14 @@ export declare const PSegmentedControl: import("react").ForwardRefExoticComponen
      * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when selected element changes.
      */
     onUpdate?: (event: CustomEvent<SegmentedControlUpdateEventDetail>) => void;
+    /**
+     * A boolean value that specifies a selection must be made from the group before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the component.
+     */
+    state?: SegmentedControlState;
     /**
      * Adapts the segmented-control color depending on the theme.
      */

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -4,17 +4,17 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, disabled = false, form, name, onBlur, onChange, onSegmentedControlChange, onUpdate, theme, value, className, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, disabled, form, name, theme || useTheme(), value];
+    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'disabled', 'form', 'name', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -9,7 +9,7 @@ export type PSelectOptionProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the option.
      */

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

@@ -39,7 +39,7 @@ export type PSelectWrapperProps = BaseProps & {
     theme?: Theme;
 };
 /** @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead. */
-export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The description text.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectDropdownDirection, BreakpointCustomizable, SelectChangeEventDetail, SelectUpdateEventDetail, SelectState, Theme } from '../types';
+import type { SelectDropdownDirection, BreakpointCustomizable, SelectChangeEventDetail, SelectToggleEventDetail, SelectUpdateEventDetail, SelectState, Theme } from '../types';
 export type PSelectProps = BaseProps & {
     /**
      * Displays as compact version.
@@ -18,7 +18,7 @@ export type PSelectProps = BaseProps & {
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered.
+     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
      */
     filter?: boolean;
     /**
@@ -49,6 +49,10 @@ export type PSelectProps = BaseProps & {
      * Emitted when the selection is changed.
      */
     onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
+    /**
+     * Emitted when the dropdown is toggled.
+     */
+    onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
     /**
      * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
      */
@@ -70,7 +74,7 @@ export type PSelectProps = BaseProps & {
      */
     value?: string;
 };
-export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays as compact version.
      */
@@ -88,7 +92,7 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<imp
      */
     dropdownDirection?: SelectDropdownDirection;
     /**
-     * Shows an input in the dropdown allowing options to be filtered.
+     * Shows an input in the dropdown allowing options to be filtered. Will be ignored if the `filter` slot is used.
      */
     filter?: boolean;
     /**
@@ -119,6 +123,10 @@ export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<imp
      * Emitted when the selection is changed.
      */
     onChange?: (event: CustomEvent<SelectChangeEventDetail>) => void;
+    /**
+     * Emitted when the dropdown is toggled.
+     */
+    onToggle?: (event: CustomEvent<SelectToggleEventDetail>) => void;
     /**
      * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead. Emitted when the selection is changed.
      */

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

@@ -4,10 +4,11 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+const PSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', filter = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'toggle', onToggle);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-select');
     const propsToSync = [compact, description, disabled, dropdownDirection, filter, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];

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

@@ -34,7 +34,7 @@ export type PSheetProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PSheet: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSheet: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -14,7 +14,7 @@ export type PSpinnerProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */

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

@@ -10,7 +10,7 @@ export type PStepperHorizontalItemProps = BaseProps & {
      */
     state?: StepperHorizontalItemState;
 };
-export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
      */

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

@@ -18,7 +18,7 @@ export type PStepperHorizontalProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PStepperHorizontal: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when active step is changed.
      */

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

@@ -42,7 +42,7 @@ export type PSwitchProps = BaseProps & {
      */
     theme?: Theme;
 };
-export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the label.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTableBodyProps = BaseProps & {};
-export declare const PTableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -5,7 +5,7 @@ export type PTableCellProps = BaseProps & {
      */
     multiline?: boolean;
 };
-export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays slotted text multiline or forced into a single line.
      */

package/esm/lib/components/table-head-cell.wrapper.d.ts

@@ -14,7 +14,7 @@ export type PTableHeadCellProps = BaseProps & {
      */
     sort?: TableHeadCellSort;
 };
-export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Hides the label but stays accessible for screen readers. This property only takes effect when sort property is not defined.
      */

package/esm/lib/components/table-head-row.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
 export type PTableHeadRowProps = BaseProps & {};
-export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PTableHeadRow: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;