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

package/ssr/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/ssr/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/ssr/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/ssr/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/ssr/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/ssr/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/ssr/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/ssr/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/ssr/lib/dsr-components/button-tile.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRButtonTile extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/crest.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRCrest extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/fieldset-wrapper.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 export declare class DSRFieldsetWrapper extends Component<any> {
     host: HTMLElement;
     render(): JSX.Element;

package/ssr/lib/dsr-components/fieldset.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRFieldset extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRLinkTileModelSignature extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/lib/dsr-components/marque.d.ts

@@ -1,4 +1,5 @@
 import { Component } from 'react';
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
 export declare class DSRMarque extends Component<any> {
     host: HTMLElement;
     render(): JSX.Element;

package/ssr/lib/dsr-components/table.d.ts

@@ -1,11 +1,5 @@
 import { Component } from 'react';
 export declare class DSRTable extends Component<any> {
     host: HTMLElement;
-    private isScrollIndicatorVisible;
-    private isScrollable;
-    private intersectionObserver;
-    private scrollAreaElement;
-    private scrollTriggerElement;
-    private tableElement;
     render(): JSX.Element;
 }

package/ssr/lib/dsr-components/wordmark.d.ts

@@ -0,0 +1,5 @@
+import { Component } from 'react';
+export declare class DSRWordmark extends Component<any> {
+    host: HTMLElement;
+    render(): JSX.Element;
+}

package/ssr/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/styles/_index.scss

@@ -0,0 +1 @@
+@import '@porsche-design-system/components-js/styles';

package/styles/scss.scss

@@ -1 +0,0 @@
-@import '~@porsche-design-system/components-js/styles/scss';