@porsche-design-system/components-react 3.5.0-rc.0 → 3.6.0-rc.0

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+const PGrid = forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-grid');
+    const propsToSync = [direction, gutter, wrap];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['direction', 'gutter', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PGrid };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PHeading = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-heading');
+    const propsToSync = [align, color, ellipsis, size, tag, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PHeading };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
+const PHeadline = forwardRef(({ align = 'left', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-headline');
+    const propsToSync = [align, color, ellipsis, tag, theme, variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PHeadline };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+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];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PIcon };

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -0,0 +1,25 @@
+'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 PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'action', onAction);
+    useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = usePrefix('p-inline-notification');
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInlineNotification };

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

@@ -0,0 +1,130 @@
+import { type HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
+export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: BreakpointCustomizable<LinkPureAlignLabel>;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: LinkPureIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<LinkPureSize>;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean>;
+    /**
+     * 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<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Display link in active state.
+     */
+    active?: boolean | undefined;
+    /**
+     * Aligns the label.
+     */
+    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed
+     */
+    icon?: import("../types").LinkButtonIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Size of the link.
+     */
+    size?: BreakpointCustomizable<"small" | "inherit" | "xx-small" | "x-small" | "medium" | "large" | "x-large"> | undefined;
+    /**
+     * Stretches the area between icon and label to max available space.
+     */
+    stretch?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the button color depending on the theme.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean | undefined;
+    /**
+     * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
+     */
+    weight?: "bold" | "regular" | "semi-bold" | "thin" | "semibold" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PLinkPure = forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-pure');
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];
+    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]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkPure };

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
+const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-social');
+    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkSocial };

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PLinkTileModelSignature = forwardRef(({ aspectRatio = '3:4', description, heading, headingTag = 'h2', linkDirection = { base: 'column', xs: 'row' }, model = '911', weight = 'semi-bold', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-tile-model-signature');
+    const propsToSync = [aspectRatio, description, heading, headingTag, linkDirection, model, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'headingTag', 'linkDirection', 'model', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkTileModelSignature };

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

@@ -0,0 +1,120 @@
+import { type HTMLAttributes } from 'react';
+import type { LinkTileAlign, SelectedAriaAttributes, LinkTileAriaAttribute, BreakpointCustomizable, LinkTileAspectRatio, LinkTileBackground, LinkTileSize, LinkTileTarget, LinkTileWeight } from '../types';
+export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Alignment of link and description.
+     */
+    align?: LinkTileAlign;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkTileAriaAttribute>;
+    /**
+     * 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.
+     */
+    compact?: BreakpointCustomizable<boolean>;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<LinkTileSize>;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: LinkTileTarget;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<LinkTileWeight>;
+};
+export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Alignment of link and description.
+     */
+    align?: "top" | "bottom" | undefined;
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    /**
+     * Aspect ratio of the link-tile.
+     */
+    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    /**
+     * Adapts the description and link theme when used on light background image.
+     */
+    background?: "light" | "dark" | undefined;
+    /**
+     * Displays the link-tile as compact version with description and link icon only.
+     */
+    compact?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * Description text.
+     */
+    description: string;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show gradient.
+     */
+    gradient?: boolean | undefined;
+    /**
+     * href of the `<a>`.
+     */
+    href: string;
+    /**
+     * Label of the <a />.
+     */
+    label: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Font size of the description.
+     */
+    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Font weight of the description.
+     */
+    weight?: BreakpointCustomizable<"regular" | "semi-bold" | "semibold"> | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PLinkTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semi-bold', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-tile');
+    const propsToSync = [align, aria, aspectRatio, background, 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]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkTile };

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

@@ -0,0 +1,88 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkIcon, LinkTarget, Theme, LinkVariant } from '../types';
+export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<LinkAriaAttribute>;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: LinkIcon;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string;
+    /**
+     * 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<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    /**
+     * Special download attribute to open native browser download dialog if target url points to a downloadable file.
+     */
+    download?: string | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * The icon shown. By choosing 'none', no icon is displayed.
+     */
+    icon?: import("../types").LinkButtonIconName | undefined;
+    /**
+     * A URL path to a custom icon.
+     */
+    iconSource?: string | undefined;
+    /**
+     * Specifies the relationship of the target object to the link object.
+     */
+    rel?: string | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Adapts the link color when used on dark background.
+     */
+    theme?: "light" | "dark" | undefined;
+    /**
+     * The style variant of the link.
+     */
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PLink = forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme = 'light', variant = 'primary', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link');
+    const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme, variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLink };

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

@@ -0,0 +1,55 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, MarqueAriaAttribute, MarqueSize, MarqueTarget, MarqueVariant } from '../types';
+export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<MarqueAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of marque.
+     */
+    size?: MarqueSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: MarqueTarget;
+    /**
+     * Show/hide trademark sign (only has effect when variant is set to default).
+     */
+    trademark?: boolean;
+    /**
+     * Shows marque in special editions
+     */
+    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<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-current"> | undefined;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string | undefined;
+    /**
+     * Adapts sizing of marque.
+     */
+    size?: "small" | "medium" | "responsive" | undefined;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: string | undefined;
+    /**
+     * Show/hide trademark sign (only has effect when variant is set to default).
+     */
+    trademark?: boolean | undefined;
+    /**
+     * Shows marque in special editions
+     */
+    variant?: "default" | "75-years" | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
+const PMarque = forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, variant = 'default', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-marque');
+    const propsToSync = [aria, href, size, target, trademark, variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', 'target', 'trademark', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PMarque };