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

package/esm/lib/components/input-text.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputText = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, spellCheck, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PInputText = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, spellCheck, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-text');
-    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'spellCheck', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'spellCheck', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-time.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputTimeBlurEventDetail, InputTimeChangeEventDetail, InputTimeInputEventDetail, InputTimeState, Theme } from '../types';
+import type { BreakpointCustomizable, InputTimeBlurEventDetail, InputTimeChangeEventDetail, InputTimeInputEventDetail, InputTimeState } from '../types';
 export type PInputTimeProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., auto-complete='on').
@@ -77,16 +77,12 @@ export type PInputTimeProps = BaseProps & {
      * efines the granularity of the time input. The step value is given in seconds. The default is 60 (one minute). You can also specify smaller increments (e.g., step='1' for seconds, step='0.001' for milliseconds).
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default time value for the input, in hh:mm or hh:mm:ss format (e.g., value='14:00').
      */
     value?: string;
 };
-export declare const PInputTime: 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 PInputTime: 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"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., auto-complete='on').
      */
@@ -163,10 +159,6 @@ export declare const PInputTime: import("react").ForwardRefExoticComponent<Omit<
      * efines the granularity of the time input. The step value is given in seconds. The default is 60 (one minute). You can also specify smaller increments (e.g., step='1' for seconds, step='0.001' for milliseconds).
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default time value for the input, in hh:mm or hh:mm:ss format (e.g., value='14:00').
      */

package/esm/lib/components/input-time.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputTime = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 60, theme, value = '', className, ...rest }, ref) => {
+const PInputTime = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 60, value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-time');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-url.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState, Theme } from '../types';
+import type { BreakpointCustomizable, InputUrlBlurEventDetail, InputUrlChangeEventDetail, InputUrlInputEventDetail, InputUrlState } from '../types';
 export type PInputUrlProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='url').
@@ -85,16 +85,12 @@ export type PInputUrlProps = BaseProps & {
      * Indicates the validation or overall status of the input component.
      */
     state?: InputUrlState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The url input value.
      */
     value?: string;
 };
-export declare const PInputUrl: 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 PInputUrl: 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"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='url').
      */
@@ -179,10 +175,6 @@ export declare const PInputUrl: import("react").ForwardRefExoticComponent<Omit<i
      * Indicates the validation or overall status of the input component.
      */
     state?: InputUrlState;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The url input value.
      */

package/esm/lib/components/input-url.wrapper.mjs

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, ...rest }, ref) => {
+const PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-url');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-week.wrapper.d.ts

@@ -0,0 +1,168 @@
+import type { BaseProps } from '../../BaseProps';
+import type { BreakpointCustomizable, InputWeekBlurEventDetail, InputWeekChangeEventDetail, InputWeekInputEventDetail, InputWeekState } from '../types';
+export type PInputWeekProps = BaseProps & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     */
+    max?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     */
+    min?: string;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputWeekBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputWeekChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputWeekInputEventDetail>) => void;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputWeekState;
+    /**
+     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 month.
+     */
+    step?: number;
+    /**
+     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27')
+     */
+    value?: string;
+};
+export declare const PInputWeek: 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"> & {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features.
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * Specifies the latest week that can be selected. The value must be a week string in YYYY-Www format (e.g., max='2024-W52').
+     */
+    max?: string;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * Specifies the earliest week that can be selected. The value must be a week string in YYYY-Www format (e.g., min='2024-W01').
+     */
+    min?: string;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Emitted when the number input has lost focus.
+     */
+    onBlur?: (event: CustomEvent<InputWeekBlurEventDetail>) => void;
+    /**
+     * Emitted when the number input loses focus after its value was changed.
+     */
+    onChange?: (event: CustomEvent<InputWeekChangeEventDetail>) => void;
+    /**
+     * Emitted when the value has been changed as a direct result of a user action.
+     */
+    onInput?: (event: CustomEvent<InputWeekInputEventDetail>) => void;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputWeekState;
+    /**
+     * Defines the stepping interval in weeks. For example, step="1" increments by 1 week. The default is 1 month.
+     */
+    step?: number;
+    /**
+     * The default week value for the input, in YYYY-Www format (e.g., value='2025-W27')
+     */
+    value?: string;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/input-week.wrapper.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PInputWeek = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, value = '', className, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-week');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputWeek };

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
+import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget } from '../types';
 export type PLinkPureProps = BaseProps & {
     /**
      * Display link in active state.
@@ -49,21 +49,12 @@ export type PLinkPureProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: LinkPureTarget;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Shows an underline under the label.
      */
     underline?: boolean;
-    /**
-     * The weight of the text (only has effect with visible label).
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    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.
      */
@@ -112,19 +103,10 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<i
      * Target attribute where the link should be opened.
      */
     target?: LinkPureTarget;
-    /**
-     * Adapts the button color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * Shows an underline under the label.
      */
     underline?: boolean;
-    /**
-     * The weight of the text (only has effect with visible label).
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    weight?: LinkPureWeight;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

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

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget, Theme } from '../types';
+import type { BreakpointCustomizable, LinkTileProductAspectRatio, LinkTileProductLikeEventDetail, LinkTileProductTarget } from '../types';
 export type PLinkTileProductProps = BaseProps & {
     /**
      * Aspect ratio of the link-tile-product.
@@ -45,12 +45,8 @@ export type PLinkTileProductProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: LinkTileProductTarget;
-    /**
-     * Adapts the link-tile-product color depending on the theme.
-     */
-    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.
      */
@@ -95,10 +91,6 @@ export declare const PLinkTileProduct: import("react").ForwardRefExoticComponent
      * Target attribute where the link should be opened.
      */
     target?: LinkTileProductTarget;
-    /**
-     * Adapts the link-tile-product color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-tile-product.wrapper.mjs

@@ -1,17 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, ...rest }, ref) => {
+const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
 export type PLinkTileProps = BaseProps & {
     /**
      * Alignment of link and description.
@@ -13,10 +13,6 @@ export type PLinkTileProps = BaseProps & {
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
-    /**
-     * Adapts the description and link theme when used on light background image.
-     */
-    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */
@@ -58,7 +54,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.
      */
@@ -71,10 +67,6 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<i
      * Aspect ratio of the link-tile.
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
-    /**
-     * Adapts the description and link theme when used on light background image.
-     */
-    background?: LinkTileBackground;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */

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

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', compact = false, description, download, gradient = false, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, Theme, LinkVariant } from '../types';
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, LinkVariant } from '../types';
 export type PLinkProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -37,16 +37,12 @@ export type PLinkProps = BaseProps & {
      * Target attribute where the link should be opened.
      */
     target?: LinkTarget;
-    /**
-     * Adapts the link color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The style variant of the link.
      */
     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.
      */
@@ -83,10 +79,6 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<impor
      * Target attribute where the link should be opened.
      */
     target?: LinkTarget;
-    /**
-     * Adapts the link color when used on dark background.
-     */
-    theme?: Theme;
     /**
      * The style variant of the link.
      */

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

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