@porsche-design-system/components-react 3.0.0-alpha.3 → 3.0.0-alpha.5

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
+export type PFieldsetProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The size of the label text.
+     */
+    labelSize?: FieldsetLabelSize;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Marks the Fieldset as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FieldsetState;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The size of the label text.
+     */
+    labelSize?: FieldsetLabelSize;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Marks the Fieldset as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: FieldsetState;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/fieldset.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PFieldset = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-fieldset');
+    const propsToSync = [label, labelSize, message, required, state, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PFieldset = PFieldset;

package/lib/components/index.d.ts

@@ -3,11 +3,14 @@ export * from './banner.wrapper';
 export * from './button.wrapper';
 export * from './button-group.wrapper';
 export * from './button-pure.wrapper';
+export * from './button-tile.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
+export * from './crest.wrapper';
 export * from './display.wrapper';
 export * from './divider.wrapper';
+export * from './fieldset.wrapper';
 export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
@@ -21,6 +24,7 @@ export * from './link.wrapper';
 export * from './link-pure.wrapper';
 export * from './link-social.wrapper';
 export * from './link-tile.wrapper';
+export * from './link-tile-model-signature.wrapper';
 export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './model-signature.wrapper';
@@ -53,3 +57,4 @@ export * from './text-list.wrapper';
 export * from './text-list-item.wrapper';
 export * from './textarea-wrapper.wrapper';
 export * from './toast.wrapper';
+export * from './wordmark.wrapper';

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

@@ -0,0 +1,64 @@
+import { HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, LinkTileModelSignatureAspectRatio, LinkTileModelSignatureHeadingTag, LinkTileModelSignatureLinkDirection, LinkTileModelSignatureModel, LinkTileModelSignatureWeight } from '../types';
+export type PLinkTileModelSignatureProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Aspect ratio of the link-tile-model-signature.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileModelSignatureAspectRatio>;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Heading text.
+     */
+    heading: string;
+    /**
+     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     */
+    headingTag?: LinkTileModelSignatureHeadingTag;
+    /**
+     * Defines the direction of the main and cross axis of the links. The default is '{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint 'xs'.
+     */
+    linkDirection?: BreakpointCustomizable<LinkTileModelSignatureLinkDirection>;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: LinkTileModelSignatureModel;
+    /**
+     * Adapts the font weight of the heading.
+     */
+    weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
+};
+export declare const PLinkTileModelSignature: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Aspect ratio of the link-tile-model-signature.
+     */
+    aspectRatio?: BreakpointCustomizable<LinkTileModelSignatureAspectRatio>;
+    /**
+     * Description text.
+     */
+    description?: string;
+    /**
+     * Heading text.
+     */
+    heading: string;
+    /**
+     * Sets a custom headline tag which wraps the heading to enhance semantics.
+     */
+    headingTag?: LinkTileModelSignatureHeadingTag;
+    /**
+     * Defines the direction of the main and cross axis of the links. The default is '{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint 'xs'.
+     */
+    linkDirection?: BreakpointCustomizable<LinkTileModelSignatureLinkDirection>;
+    /**
+     * Adapts the model of the component.
+     */
+    model?: LinkTileModelSignatureModel;
+    /**
+     * Adapts the font weight of the heading.
+     */
+    weight?: BreakpointCustomizable<LinkTileModelSignatureWeight>;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/link-tile-model-signature.wrapper.js

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

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

@@ -14,7 +14,7 @@ export type PLinkTileProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
-     * Displays the tile-link as compact version with description and link icon only.
+     * Displays the link-tile as compact version with description and link icon only.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -68,7 +68,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
      */
     aspectRatio?: BreakpointCustomizable<LinkTileAspectRatio>;
     /**
-     * Displays the tile-link as compact version with description and link icon only.
+     * Displays the link-tile as compact version with description and link icon only.
      */
     compact?: BreakpointCustomizable<boolean>;
     /**

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

@@ -22,6 +22,7 @@ export type PMarqueProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      */
     trademark?: boolean;
 };
+/** @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" | "onChange"> & {
     /**
      * Add ARIA attributes.

package/lib/components/marque.wrapper.js

@@ -5,6 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-marque');

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

@@ -21,6 +21,10 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      * Scrolls the scroll area to the left either smooth or immediately
      */
     scrollToPosition?: ScrollerScrollToPosition;
+    /**
+     * Specifies if scrollbar should be shown
+     */
+    scrollbar?: boolean;
     /**
      * Adapts the color when used on dark background.
      */
@@ -47,6 +51,10 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
      * Scrolls the scroll area to the left either smooth or immediately
      */
     scrollToPosition?: ScrollerScrollToPosition;
+    /**
+     * Specifies if scrollbar should be shown
+     */
+    scrollbar?: boolean;
     /**
      * Adapts the color when used on dark background.
      */

package/lib/components/scroller.wrapper.js

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

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { TableChangeEvent } from '../types';
+import type { TableChangeEvent, Theme } from '../types';
 export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
     /**
      * A caption describing the contents of the table for accessibility only. This won't be visible in the browser. Use an element with an attribute of `slot="caption"` for a visible caption.
@@ -13,6 +13,10 @@ export type PTableProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
      * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
      */
     onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
 };
 export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
     /**
@@ -27,6 +31,10 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<HTML
      * @deprecated since v3.0.0, will be removed with next major release, use `change` event instead. Emitted when sorting is changed.
      */
     onSortingChange?: (event: CustomEvent<TableChangeEvent>) => void;
+    /**
+     * Adapts the color when used on dark background.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/table.wrapper.js

@@ -5,14 +5,16 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PTable = react.forwardRef(({ caption, onChange, onSortingChange, className, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onChange, onSortingChange, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     const WebComponentTag = hooks.usePrefix('p-table');
+    const propsToSync = [caption, theme];
     hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.caption = caption;
-    }, [caption]);
+        const { current } = elementRef;
+        ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
     const props = {
         ...rest,
         class: hooks.useMergedClass(elementRef, className),

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

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget, Theme } from '../types';
+export type PWordmarkProps = Omit<HTMLAttributes<{}>, 'color' | 'onChange'> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+};
+export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color" | "onChange"> & {
+    /**
+     * Add ARIA attributes.
+     */
+    aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
+    /**
+     * When providing an url then the component will be rendered as `<a>`.
+     */
+    href?: string;
+    /**
+     * Adapts sizing of wordmark.
+     */
+    size?: WordmarkSize;
+    /**
+     * Target attribute where the link should be opened.
+     */
+    target?: WordmarkTarget;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/wordmark.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PWordmark = react.forwardRef(({ aria, href, size = 'small', target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-wordmark');
+    const propsToSync = [aria, href, size, target, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PWordmark = PWordmark;

package/lib/types.d.ts

@@ -209,6 +209,29 @@ export declare type BreakpointValues<T> = {
     base: T;
 };
 export declare type BreakpointCustomizable<T> = T | BreakpointValues<T>;
+declare const TILE_ASPECT_RATIOS: readonly [
+    "1:1",
+    "4:3",
+    "3:4",
+    "16:9",
+    "9:16"
+];
+export declare type TileAspectRatio = (typeof TILE_ASPECT_RATIOS)[number];
+declare const TILE_SIZES: readonly [
+    "default",
+    "inherit"
+];
+export declare type TileSize = (typeof TILE_SIZES)[number];
+declare const TILE_WEIGHTS: readonly [
+    "regular",
+    "semi-bold"
+];
+export declare type TileWeight = (typeof TILE_WEIGHTS)[number];
+declare const TILE_ALIGNS: readonly [
+    "top",
+    "bottom"
+];
+export declare type TileAlign = (typeof TILE_ALIGNS)[number];
 declare const GRADIENT_COLOR_SCHEMES: readonly [
     "default",
     "surface"
@@ -523,29 +546,38 @@ declare const BANNER_WIDTHS: readonly [
     "basic",
     "fluid"
 ];
+/** @deprecated */
 export declare type BannerWidth = typeof BANNER_WIDTHS[number];
 export declare type ButtonIcon = LinkButtonIconName;
-declare const BUTTON_GROUP_DIRECTIONS: readonly [
+declare const GROUP_DIRECTIONS: readonly [
     "row",
     "column"
 ];
-export declare type ButtonGroupDirection = typeof BUTTON_GROUP_DIRECTIONS[number];
+export declare type GroupDirection = (typeof GROUP_DIRECTIONS)[number];
+export declare type ButtonGroupDirection = GroupDirection;
 export declare type ButtonPureType = ButtonType;
 export declare type ButtonPureIcon = LinkButtonIconName;
 export declare type ButtonPureAriaAttribute = ButtonAriaAttribute;
 export declare type ButtonPureAlignLabel = AlignLabel;
 export declare type ButtonPureWeight = TextWeight;
 export declare type ButtonPureSize = TextSize;
+export declare type ButtonTileAriaAttribute = ButtonAriaAttribute;
+export declare type ButtonTileIcon = LinkButtonIconName;
+export declare type ButtonTileType = ButtonType;
+export declare type ButtonTileAspectRatio = TileAspectRatio;
+export declare type ButtonTileSize = TileSize;
+export declare type ButtonTileWeight = TileWeight;
+export declare type ButtonTileAlign = TileAlign;
 declare const CAROUSEL_WIDTHS: readonly [
     "basic",
     "extended"
 ];
-export declare type CarouselWidth = typeof CAROUSEL_WIDTHS[number];
+export declare type CarouselWidth = (typeof CAROUSEL_WIDTHS)[number];
 declare const CAROUSEL_ALIGN_HEADERS: readonly [
     "left",
     "center"
 ];
-export declare type CarouselAlignHeader = typeof CAROUSEL_ALIGN_HEADERS[number];
+export declare type CarouselAlignHeader = (typeof CAROUSEL_ALIGN_HEADERS)[number];
 export declare type CarouselInternationalization = Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>>;
 export declare type CarouselChangeEvent = {
     activeIndex: number;
@@ -565,6 +597,11 @@ declare const CONTENT_WRAPPER_WIDTHS: readonly [
     "full"
 ];
 export declare type ContentWrapperWidth = typeof CONTENT_WRAPPER_WIDTHS[number];
+export declare type CrestTarget = LinkTarget;
+declare const CREST_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type CrestAriaAttribute = (typeof CREST_ARIA_ATTRIBUTES)[number];
 declare const DISPLAY_TAGS: readonly [
     "h1",
     "h2",
@@ -602,12 +639,14 @@ declare const DIVIDER_DIRECTIONS: readonly [
 ];
 export declare type DividerDirection = typeof DIVIDER_DIRECTIONS[number];
 export declare type DividerOrientation = DividerDirection;
-declare const FIELDSET_WRAPPER_LABEL_SIZES: readonly [
+declare const FIELDSET_LABEL_SIZES: readonly [
     "small",
     "medium"
 ];
-export declare type FieldsetWrapperLabelSize = typeof FIELDSET_WRAPPER_LABEL_SIZES[number];
-export declare type FieldsetWrapperState = FormState;
+export declare type FieldsetLabelSize = typeof FIELDSET_LABEL_SIZES[number];
+export declare type FieldsetState = FormState;
+export declare type FieldsetWrapperLabelSize = FieldsetLabelSize;
+export declare type FieldsetWrapperState = FieldsetState;
 export declare type FlexInline = boolean;
 declare const FLEX_WRAPS: readonly [
     "nowrap",
@@ -830,47 +869,17 @@ export declare type LinkPureSize = TextSize;
 export declare type LinkPureTarget = LinkTarget;
 export declare type LinkSocialIcon = Extract<IconName, "logo-facebook" | "logo-google" | "logo-instagram" | "logo-linkedin" | "logo-pinterest" | "logo-twitter" | "logo-wechat" | "logo-whatsapp" | "logo-xing" | "logo-youtube" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-foursquare" | "logo-gmail" | "logo-hatena" | "logo-kaixin" | "logo-kakaotalk" | "logo-naver" | "logo-qq-share" | "logo-qq" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-viber" | "logo-vk" | "logo-weibo" | "logo-yahoo" | "logo-youku">;
 export declare type LinkSocialTarget = LinkTarget;
+export declare type LinkTileTarget = LinkTarget;
+export declare type LinkTileAriaAttribute = LinkAriaAttribute;
+export declare type LinkTileAspectRatio = TileAspectRatio;
+export declare type LinkTileSize = TileSize;
+export declare type LinkTileAlign = TileAlign;
 declare const LINK_TILE_WEIGHTS: readonly [
     "regular",
     "semi-bold",
     "semibold"
 ];
-export declare type LinkTileWeight = typeof LINK_TILE_WEIGHTS[number];
-declare const LINK_TILE_SIZES: readonly [
-    "default",
-    "inherit"
-];
-export declare type LinkTileSize = typeof LINK_TILE_SIZES[number];
-declare const LINK_TILE_ALIGNS: readonly [
-    "top",
-    "bottom"
-];
-export declare type LinkTileAlign = typeof LINK_TILE_ALIGNS[number];
-declare const LINK_TILE_ASPECT_RATIOS: readonly [
-    "1:1",
-    "4:3",
-    "3:4",
-    "16:9",
-    "9:16"
-];
-export declare type LinkTileAspectRatio = typeof LINK_TILE_ASPECT_RATIOS[number];
-export declare type LinkTileTarget = LinkTarget;
-export declare type LinkTileAriaAttribute = LinkAriaAttribute;
-declare const MARQUE_SIZES: readonly [
-    "responsive",
-    "small",
-    "medium"
-];
-export declare type MarqueSize = typeof MARQUE_SIZES[number];
-export declare type MarqueTarget = LinkTarget;
-declare const MARQUE_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
-declare const MODAL_ARIA_ATTRIBUTES: readonly [
-    "aria-label"
-];
-export declare type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
+export declare type LinkTileWeight = (typeof LINK_TILE_WEIGHTS)[number];
 declare const MODEL_SIGNATURES_MANIFEST: {
     "718": string;
     "911": string;
@@ -897,6 +906,33 @@ declare const MODEL_SIGNATURE_COLORS: readonly [
     "inherit"
 ];
 export declare type ModelSignatureColor = typeof MODEL_SIGNATURE_COLORS[number];
+export declare type LinkTileModelSignatureModel = ModelSignatureModel;
+declare const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS: readonly [
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6"
+];
+export declare type LinkTileModelSignatureHeadingTag = (typeof LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS)[number];
+export declare type LinkTileModelSignatureWeight = TileWeight;
+export declare type LinkTileModelSignatureAspectRatio = TileAspectRatio;
+export declare type LinkTileModelSignatureLinkDirection = GroupDirection;
+declare const MARQUE_SIZES: readonly [
+    "responsive",
+    "small",
+    "medium"
+];
+export declare type MarqueSize = typeof MARQUE_SIZES[number];
+export declare type MarqueTarget = LinkTarget;
+declare const MARQUE_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type MarqueAriaAttribute = typeof MARQUE_ARIA_ATTRIBUTES[number];
+declare const MODAL_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type ModalAriaAttribute = (typeof MODAL_ARIA_ATTRIBUTES)[number];
 declare const PAGINATION_NUMBER_OF_PAGE_LINKS: readonly [
     5,
     7
@@ -1069,4 +1105,14 @@ export declare type ToastMessage = {
     text: string;
     state?: ToastState;
 };
+declare const WORDMARK_SIZES: readonly [
+    "small",
+    "inherit"
+];
+export declare type WordmarkSize = (typeof WORDMARK_SIZES)[number];
+export declare type WordmarkTarget = LinkTarget;
+declare const WORDMARK_ARIA_ATTRIBUTES: readonly [
+    "aria-label"
+];
+export declare type WordmarkAriaAttribute = (typeof WORDMARK_ARIA_ATTRIBUTES)[number];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@porsche-design-system/components-react",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.5",
   "description": "Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.",
   "keywords": [
     "porsche",
@@ -17,7 +17,7 @@
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://designsystem.porsche.com",
   "dependencies": {
-    "@porsche-design-system/components-js": "3.0.0-alpha.3"
+    "@porsche-design-system/components-js": "3.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": ">=17.0.0 <19.0.0",