@porsche-design-system/components-react 4.0.0-beta.4 → 4.0.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (157) hide show
  1. package/CHANGELOG.md +72 -4
  2. package/cjs/lib/components/banner.wrapper.cjs +3 -3
  3. package/esm/lib/components/accordion.wrapper.d.ts +8 -0
  4. package/esm/lib/components/banner.wrapper.d.ts +37 -15
  5. package/esm/lib/components/banner.wrapper.mjs +3 -3
  6. package/esm/lib/components/button-pure.wrapper.d.ts +22 -0
  7. package/esm/lib/components/button-tile.wrapper.d.ts +20 -0
  8. package/esm/lib/components/button.wrapper.d.ts +14 -0
  9. package/esm/lib/components/canvas.wrapper.d.ts +6 -0
  10. package/esm/lib/components/carousel.wrapper.d.ts +22 -0
  11. package/esm/lib/components/checkbox.wrapper.d.ts +24 -0
  12. package/esm/lib/components/crest.wrapper.d.ts +2 -0
  13. package/esm/lib/components/display.wrapper.d.ts +8 -0
  14. package/esm/lib/components/divider.wrapper.d.ts +4 -0
  15. package/esm/lib/components/drilldown-item.wrapper.d.ts +6 -0
  16. package/esm/lib/components/drilldown-link.wrapper.d.ts +4 -0
  17. package/esm/lib/components/drilldown.wrapper.d.ts +2 -0
  18. package/esm/lib/components/fieldset.wrapper.d.ts +10 -0
  19. package/esm/lib/components/flag.wrapper.d.ts +4 -0
  20. package/esm/lib/components/flyout.wrapper.d.ts +12 -0
  21. package/esm/lib/components/heading.wrapper.d.ts +12 -0
  22. package/esm/lib/components/icon.wrapper.d.ts +6 -0
  23. package/esm/lib/components/inline-notification.wrapper.d.ts +14 -0
  24. package/esm/lib/components/input-date.wrapper.d.ts +24 -0
  25. package/esm/lib/components/input-email.wrapper.d.ts +28 -0
  26. package/esm/lib/components/input-month.wrapper.d.ts +24 -0
  27. package/esm/lib/components/input-number.wrapper.d.ts +28 -0
  28. package/esm/lib/components/input-password.wrapper.d.ts +26 -0
  29. package/esm/lib/components/input-search.wrapper.d.ts +28 -0
  30. package/esm/lib/components/input-tel.wrapper.d.ts +26 -0
  31. package/esm/lib/components/input-text.wrapper.d.ts +26 -0
  32. package/esm/lib/components/input-time.wrapper.d.ts +24 -0
  33. package/esm/lib/components/input-url.wrapper.d.ts +26 -0
  34. package/esm/lib/components/input-week.wrapper.d.ts +24 -0
  35. package/esm/lib/components/link-pure.wrapper.d.ts +18 -0
  36. package/esm/lib/components/link-tile-product.wrapper.d.ts +8 -0
  37. package/esm/lib/components/link-tile.wrapper.d.ts +14 -0
  38. package/esm/lib/components/link.wrapper.d.ts +10 -0
  39. package/esm/lib/components/modal.wrapper.d.ts +12 -0
  40. package/esm/lib/components/model-signature.wrapper.d.ts +12 -0
  41. package/esm/lib/components/multi-select-option.wrapper.d.ts +2 -0
  42. package/esm/lib/components/multi-select.wrapper.d.ts +20 -0
  43. package/esm/lib/components/optgroup.wrapper.d.ts +2 -0
  44. package/esm/lib/components/pagination.wrapper.d.ts +10 -0
  45. package/esm/lib/components/pin-code.wrapper.d.ts +24 -0
  46. package/esm/lib/components/popover.wrapper.d.ts +2 -0
  47. package/esm/lib/components/radio-group-option.wrapper.d.ts +4 -0
  48. package/esm/lib/components/radio-group.wrapper.d.ts +22 -0
  49. package/esm/lib/components/scroller.wrapper.d.ts +6 -0
  50. package/esm/lib/components/segmented-control-item.wrapper.d.ts +2 -0
  51. package/esm/lib/components/segmented-control.wrapper.d.ts +18 -0
  52. package/esm/lib/components/select-option.wrapper.d.ts +2 -0
  53. package/esm/lib/components/select.wrapper.d.ts +20 -0
  54. package/esm/lib/components/sheet.wrapper.d.ts +8 -0
  55. package/esm/lib/components/spinner.wrapper.d.ts +4 -0
  56. package/esm/lib/components/stepper-horizontal-item.wrapper.d.ts +2 -0
  57. package/esm/lib/components/stepper-horizontal.wrapper.d.ts +2 -0
  58. package/esm/lib/components/switch.wrapper.d.ts +14 -0
  59. package/esm/lib/components/table-cell.wrapper.d.ts +2 -0
  60. package/esm/lib/components/table-head-cell.wrapper.d.ts +4 -0
  61. package/esm/lib/components/table.wrapper.d.ts +6 -0
  62. package/esm/lib/components/tabs-bar.wrapper.d.ts +6 -0
  63. package/esm/lib/components/tabs.wrapper.d.ts +8 -0
  64. package/esm/lib/components/tag-dismissible.wrapper.d.ts +2 -0
  65. package/esm/lib/components/tag.wrapper.d.ts +6 -0
  66. package/esm/lib/components/text-list.wrapper.d.ts +2 -0
  67. package/esm/lib/components/text.wrapper.d.ts +14 -0
  68. package/esm/lib/components/textarea.wrapper.d.ts +30 -0
  69. package/esm/lib/components/wordmark.wrapper.d.ts +4 -0
  70. package/esm/lib/types.d.ts +5 -0
  71. package/global-styles/cn/index.css +1 -0
  72. package/global-styles/index.css +1 -0
  73. package/global-styles/variables.css +1 -0
  74. package/package.json +4 -2
  75. package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +723 -775
  76. package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +16 -77
  77. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/banner.wrapper.cjs +4 -5
  78. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.cjs +11 -6
  79. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.cjs +1 -1
  80. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.cjs +4 -6
  81. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.cjs +1 -4
  82. package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +723 -775
  83. package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +15 -76
  84. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/banner.wrapper.mjs +4 -5
  85. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.mjs +11 -6
  86. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.mjs +1 -1
  87. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.mjs +5 -7
  88. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.mjs +2 -5
  89. package/ssr/esm/lib/components/accordion.wrapper.d.ts +8 -0
  90. package/ssr/esm/lib/components/banner.wrapper.d.ts +37 -15
  91. package/ssr/esm/lib/components/button-pure.wrapper.d.ts +22 -0
  92. package/ssr/esm/lib/components/button-tile.wrapper.d.ts +20 -0
  93. package/ssr/esm/lib/components/button.wrapper.d.ts +14 -0
  94. package/ssr/esm/lib/components/canvas.wrapper.d.ts +6 -0
  95. package/ssr/esm/lib/components/carousel.wrapper.d.ts +22 -0
  96. package/ssr/esm/lib/components/checkbox.wrapper.d.ts +24 -0
  97. package/ssr/esm/lib/components/crest.wrapper.d.ts +2 -0
  98. package/ssr/esm/lib/components/display.wrapper.d.ts +8 -0
  99. package/ssr/esm/lib/components/divider.wrapper.d.ts +4 -0
  100. package/ssr/esm/lib/components/drilldown-item.wrapper.d.ts +6 -0
  101. package/ssr/esm/lib/components/drilldown-link.wrapper.d.ts +4 -0
  102. package/ssr/esm/lib/components/drilldown.wrapper.d.ts +2 -0
  103. package/ssr/esm/lib/components/fieldset.wrapper.d.ts +10 -0
  104. package/ssr/esm/lib/components/flag.wrapper.d.ts +4 -0
  105. package/ssr/esm/lib/components/flyout.wrapper.d.ts +12 -0
  106. package/ssr/esm/lib/components/heading.wrapper.d.ts +12 -0
  107. package/ssr/esm/lib/components/icon.wrapper.d.ts +6 -0
  108. package/ssr/esm/lib/components/inline-notification.wrapper.d.ts +14 -0
  109. package/ssr/esm/lib/components/input-date.wrapper.d.ts +24 -0
  110. package/ssr/esm/lib/components/input-email.wrapper.d.ts +28 -0
  111. package/ssr/esm/lib/components/input-month.wrapper.d.ts +24 -0
  112. package/ssr/esm/lib/components/input-number.wrapper.d.ts +28 -0
  113. package/ssr/esm/lib/components/input-password.wrapper.d.ts +26 -0
  114. package/ssr/esm/lib/components/input-search.wrapper.d.ts +28 -0
  115. package/ssr/esm/lib/components/input-tel.wrapper.d.ts +26 -0
  116. package/ssr/esm/lib/components/input-text.wrapper.d.ts +26 -0
  117. package/ssr/esm/lib/components/input-time.wrapper.d.ts +24 -0
  118. package/ssr/esm/lib/components/input-url.wrapper.d.ts +26 -0
  119. package/ssr/esm/lib/components/input-week.wrapper.d.ts +24 -0
  120. package/ssr/esm/lib/components/link-pure.wrapper.d.ts +18 -0
  121. package/ssr/esm/lib/components/link-tile-product.wrapper.d.ts +8 -0
  122. package/ssr/esm/lib/components/link-tile.wrapper.d.ts +14 -0
  123. package/ssr/esm/lib/components/link.wrapper.d.ts +10 -0
  124. package/ssr/esm/lib/components/modal.wrapper.d.ts +12 -0
  125. package/ssr/esm/lib/components/model-signature.wrapper.d.ts +12 -0
  126. package/ssr/esm/lib/components/multi-select-option.wrapper.d.ts +2 -0
  127. package/ssr/esm/lib/components/multi-select.wrapper.d.ts +20 -0
  128. package/ssr/esm/lib/components/optgroup.wrapper.d.ts +2 -0
  129. package/ssr/esm/lib/components/pagination.wrapper.d.ts +10 -0
  130. package/ssr/esm/lib/components/pin-code.wrapper.d.ts +24 -0
  131. package/ssr/esm/lib/components/popover.wrapper.d.ts +2 -0
  132. package/ssr/esm/lib/components/radio-group-option.wrapper.d.ts +4 -0
  133. package/ssr/esm/lib/components/radio-group.wrapper.d.ts +22 -0
  134. package/ssr/esm/lib/components/scroller.wrapper.d.ts +6 -0
  135. package/ssr/esm/lib/components/segmented-control-item.wrapper.d.ts +2 -0
  136. package/ssr/esm/lib/components/segmented-control.wrapper.d.ts +18 -0
  137. package/ssr/esm/lib/components/select-option.wrapper.d.ts +2 -0
  138. package/ssr/esm/lib/components/select.wrapper.d.ts +20 -0
  139. package/ssr/esm/lib/components/sheet.wrapper.d.ts +8 -0
  140. package/ssr/esm/lib/components/spinner.wrapper.d.ts +4 -0
  141. package/ssr/esm/lib/components/stepper-horizontal-item.wrapper.d.ts +2 -0
  142. package/ssr/esm/lib/components/stepper-horizontal.wrapper.d.ts +2 -0
  143. package/ssr/esm/lib/components/switch.wrapper.d.ts +14 -0
  144. package/ssr/esm/lib/components/table-cell.wrapper.d.ts +2 -0
  145. package/ssr/esm/lib/components/table-head-cell.wrapper.d.ts +4 -0
  146. package/ssr/esm/lib/components/table.wrapper.d.ts +6 -0
  147. package/ssr/esm/lib/components/tabs-bar.wrapper.d.ts +6 -0
  148. package/ssr/esm/lib/components/tabs.wrapper.d.ts +8 -0
  149. package/ssr/esm/lib/components/tag-dismissible.wrapper.d.ts +2 -0
  150. package/ssr/esm/lib/components/tag.wrapper.d.ts +6 -0
  151. package/ssr/esm/lib/components/text-list.wrapper.d.ts +2 -0
  152. package/ssr/esm/lib/components/text.wrapper.d.ts +14 -0
  153. package/ssr/esm/lib/components/textarea.wrapper.d.ts +30 -0
  154. package/ssr/esm/lib/components/wordmark.wrapper.d.ts +4 -0
  155. package/ssr/esm/lib/dsr-components/banner.d.ts +2 -2
  156. package/ssr/esm/lib/types.d.ts +5 -0
  157. package/tailwindcss/index.css +73 -14
@@ -3,6 +3,7 @@ import type { StepperHorizontalItemState } from '../types';
3
3
  export type PStepperHorizontalItemProps = BaseProps & {
4
4
  /**
5
5
  * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
6
+ * @default false
6
7
  */
7
8
  disabled?: boolean;
8
9
  /**
@@ -13,6 +14,7 @@ export type PStepperHorizontalItemProps = BaseProps & {
13
14
  export declare const PStepperHorizontalItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
14
15
  /**
15
16
  * Disables the stepper-horizontal-item. No events will be triggered while disabled state is active.
17
+ * @default false
16
18
  */
17
19
  disabled?: boolean;
18
20
  /**
@@ -7,6 +7,7 @@ export type PStepperHorizontalProps = BaseProps & {
7
7
  onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEventDetail>) => void;
8
8
  /**
9
9
  * The text size.
10
+ * @default 'small'
10
11
  */
11
12
  size?: BreakpointCustomizable<StepperHorizontalSize>;
12
13
  };
@@ -17,6 +18,7 @@ export declare const PStepperHorizontal: import("react").ForwardRefExoticCompone
17
18
  onUpdate?: (event: CustomEvent<StepperHorizontalUpdateEventDetail>) => void;
18
19
  /**
19
20
  * The text size.
21
+ * @default 'small'
20
22
  */
21
23
  size?: BreakpointCustomizable<StepperHorizontalSize>;
22
24
  } & {
@@ -3,26 +3,32 @@ import type { BreakpointCustomizable, SwitchAlignLabel, SwitchUpdateEventDetail
3
3
  export type PSwitchProps = BaseProps & {
4
4
  /**
5
5
  * Aligns the label.
6
+ * @default 'end'
6
7
  */
7
8
  alignLabel?: BreakpointCustomizable<SwitchAlignLabel>;
8
9
  /**
9
10
  * Visualize the switch with on/off status.
11
+ * @default false
10
12
  */
11
13
  checked?: boolean;
12
14
  /**
13
15
  * Displays the switch in compact mode.
16
+ * @default false
14
17
  */
15
18
  compact?: boolean;
16
19
  /**
17
20
  * Disables the switch. No events will be triggered while disabled state is active.
21
+ * @default false
18
22
  */
19
23
  disabled?: boolean;
20
24
  /**
21
25
  * Shows or hides the label. For better accessibility, it is recommended to show the label.
26
+ * @default false
22
27
  */
23
28
  hideLabel?: BreakpointCustomizable<boolean>;
24
29
  /**
25
30
  * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
31
+ * @default false
26
32
  */
27
33
  loading?: boolean;
28
34
  /**
@@ -31,32 +37,39 @@ export type PSwitchProps = BaseProps & {
31
37
  onUpdate?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
32
38
  /**
33
39
  * Stretches the contents to max available space.
40
+ * @default false
34
41
  */
35
42
  stretch?: BreakpointCustomizable<boolean>;
36
43
  };
37
44
  export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
38
45
  /**
39
46
  * Aligns the label.
47
+ * @default 'end'
40
48
  */
41
49
  alignLabel?: BreakpointCustomizable<SwitchAlignLabel>;
42
50
  /**
43
51
  * Visualize the switch with on/off status.
52
+ * @default false
44
53
  */
45
54
  checked?: boolean;
46
55
  /**
47
56
  * Displays the switch in compact mode.
57
+ * @default false
48
58
  */
49
59
  compact?: boolean;
50
60
  /**
51
61
  * Disables the switch. No events will be triggered while disabled state is active.
62
+ * @default false
52
63
  */
53
64
  disabled?: boolean;
54
65
  /**
55
66
  * Shows or hides the label. For better accessibility, it is recommended to show the label.
67
+ * @default false
56
68
  */
57
69
  hideLabel?: BreakpointCustomizable<boolean>;
58
70
  /**
59
71
  * Disables the switch and shows a loading indicator. No events will be triggered while loading state is active.
72
+ * @default false
60
73
  */
61
74
  loading?: boolean;
62
75
  /**
@@ -65,6 +78,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<imp
65
78
  onUpdate?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
66
79
  /**
67
80
  * Stretches the contents to max available space.
81
+ * @default false
68
82
  */
69
83
  stretch?: BreakpointCustomizable<boolean>;
70
84
  } & {
@@ -2,12 +2,14 @@ import type { BaseProps } from '../../BaseProps';
2
2
  export type PTableCellProps = BaseProps & {
3
3
  /**
4
4
  * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
5
+ * @default false
5
6
  */
6
7
  multiline?: boolean;
7
8
  };
8
9
  export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
9
10
  /**
10
11
  * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
12
+ * @default false
11
13
  */
12
14
  multiline?: boolean;
13
15
  } & {
@@ -3,10 +3,12 @@ import type { TableHeadCellSort } from '../types';
3
3
  export type PTableHeadCellProps = BaseProps & {
4
4
  /**
5
5
  * Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
6
+ * @default false
6
7
  */
7
8
  hideLabel?: boolean;
8
9
  /**
9
10
  * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
11
+ * @default false
10
12
  */
11
13
  multiline?: boolean;
12
14
  /**
@@ -17,10 +19,12 @@ export type PTableHeadCellProps = BaseProps & {
17
19
  export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
18
20
  /**
19
21
  * Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
22
+ * @default false
20
23
  */
21
24
  hideLabel?: boolean;
22
25
  /**
23
26
  * Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
27
+ * @default false
24
28
  */
25
29
  multiline?: boolean;
26
30
  /**
@@ -7,10 +7,12 @@ export type PTableProps = BaseProps & {
7
7
  caption?: string;
8
8
  /**
9
9
  * Displays with reduced spacing and smaller padding for a more condensed layout.
10
+ * @default false
10
11
  */
11
12
  compact?: boolean;
12
13
  /**
13
14
  * Controls the layout behavior of the table.
15
+ * @default 'auto'
14
16
  */
15
17
  layout?: TableLayout;
16
18
  /**
@@ -19,6 +21,7 @@ export type PTableProps = BaseProps & {
19
21
  onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
20
22
  /**
21
23
  * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
24
+ * @default false
22
25
  */
23
26
  sticky?: boolean;
24
27
  };
@@ -29,10 +32,12 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
29
32
  caption?: string;
30
33
  /**
31
34
  * Displays with reduced spacing and smaller padding for a more condensed layout.
35
+ * @default false
32
36
  */
33
37
  compact?: boolean;
34
38
  /**
35
39
  * Controls the layout behavior of the table.
40
+ * @default 'auto'
36
41
  */
37
42
  layout?: TableLayout;
38
43
  /**
@@ -41,6 +46,7 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
41
46
  onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
42
47
  /**
43
48
  * @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
49
+ * @default false
44
50
  */
45
51
  sticky?: boolean;
46
52
  } & {
@@ -7,6 +7,7 @@ export type PTabsBarProps = BaseProps & {
7
7
  activeTabIndex?: number | undefined;
8
8
  /**
9
9
  * Defines the background color. Use `frosted` only on images, videos or gradients.
10
+ * @default 'none'
10
11
  */
11
12
  background?: TabsBarBackground;
12
13
  /**
@@ -19,10 +20,12 @@ export type PTabsBarProps = BaseProps & {
19
20
  onUpdate?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
20
21
  /**
21
22
  * The text size.
23
+ * @default 'small'
22
24
  */
23
25
  size?: BreakpointCustomizable<TabsBarSize>;
24
26
  /**
25
27
  * @deprecated Will be removed in the next major release. Has no effect anymore.
28
+ * @default 'regular'
26
29
  */
27
30
  weight?: TabsBarWeight;
28
31
  };
@@ -33,6 +36,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
33
36
  activeTabIndex?: number | undefined;
34
37
  /**
35
38
  * Defines the background color. Use `frosted` only on images, videos or gradients.
39
+ * @default 'none'
36
40
  */
37
41
  background?: TabsBarBackground;
38
42
  /**
@@ -45,10 +49,12 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
45
49
  onUpdate?: (event: CustomEvent<TabsBarUpdateEventDetail>) => void;
46
50
  /**
47
51
  * The text size.
52
+ * @default 'small'
48
53
  */
49
54
  size?: BreakpointCustomizable<TabsBarSize>;
50
55
  /**
51
56
  * @deprecated Will be removed in the next major release. Has no effect anymore.
57
+ * @default 'regular'
52
58
  */
53
59
  weight?: TabsBarWeight;
54
60
  } & {
@@ -3,10 +3,12 @@ import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, Tab
3
3
  export type PTabsProps = BaseProps & {
4
4
  /**
5
5
  * Defines which tab is shown as selected (zero-based numbering).
6
+ * @default 0
6
7
  */
7
8
  activeTabIndex?: number;
8
9
  /**
9
10
  * Defines the background color. Use `frosted` only on images, videos or gradients.
11
+ * @default 'none'
10
12
  */
11
13
  background?: TabsBackground;
12
14
  /**
@@ -19,20 +21,24 @@ export type PTabsProps = BaseProps & {
19
21
  onUpdate?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
20
22
  /**
21
23
  * The text size.
24
+ * @default 'small'
22
25
  */
23
26
  size?: BreakpointCustomizable<TabsSize>;
24
27
  /**
25
28
  * @deprecated Will be removed in the next major release. Has no effect anymore.
29
+ * @default 'regular'
26
30
  */
27
31
  weight?: TabsWeight;
28
32
  };
29
33
  export declare const PTabs: 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"> & {
30
34
  /**
31
35
  * Defines which tab is shown as selected (zero-based numbering).
36
+ * @default 0
32
37
  */
33
38
  activeTabIndex?: number;
34
39
  /**
35
40
  * Defines the background color. Use `frosted` only on images, videos or gradients.
41
+ * @default 'none'
36
42
  */
37
43
  background?: TabsBackground;
38
44
  /**
@@ -45,10 +51,12 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
45
51
  onUpdate?: (event: CustomEvent<TabsUpdateEventDetail>) => void;
46
52
  /**
47
53
  * The text size.
54
+ * @default 'small'
48
55
  */
49
56
  size?: BreakpointCustomizable<TabsSize>;
50
57
  /**
51
58
  * @deprecated Will be removed in the next major release. Has no effect anymore.
59
+ * @default 'regular'
52
60
  */
53
61
  weight?: TabsWeight;
54
62
  } & {
@@ -7,6 +7,7 @@ export type PTagDismissibleProps = BaseProps & {
7
7
  aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
8
8
  /**
9
9
  * Displays the dismissible tag in compact mode.
10
+ * @default false
10
11
  */
11
12
  compact?: boolean;
12
13
  /**
@@ -21,6 +22,7 @@ export declare const PTagDismissible: import("react").ForwardRefExoticComponent<
21
22
  aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
22
23
  /**
23
24
  * Displays the dismissible tag in compact mode.
25
+ * @default false
24
26
  */
25
27
  compact?: boolean;
26
28
  /**
@@ -3,10 +3,12 @@ import type { TagIcon, TagVariant } from '../types';
3
3
  export type PTagProps = BaseProps & {
4
4
  /**
5
5
  * Displays the tag in compact mode.
6
+ * @default false
6
7
  */
7
8
  compact?: boolean;
8
9
  /**
9
10
  * The icon shown.
11
+ * @default 'none'
10
12
  */
11
13
  icon?: TagIcon;
12
14
  /**
@@ -15,16 +17,19 @@ export type PTagProps = BaseProps & {
15
17
  iconSource?: string;
16
18
  /**
17
19
  * Background color variations.
20
+ * @default 'secondary'
18
21
  */
19
22
  variant?: TagVariant;
20
23
  };
21
24
  export declare const PTag: 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"> & {
22
25
  /**
23
26
  * Displays the tag in compact mode.
27
+ * @default false
24
28
  */
25
29
  compact?: boolean;
26
30
  /**
27
31
  * The icon shown.
32
+ * @default 'none'
28
33
  */
29
34
  icon?: TagIcon;
30
35
  /**
@@ -33,6 +38,7 @@ export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import
33
38
  iconSource?: string;
34
39
  /**
35
40
  * Background color variations.
41
+ * @default 'secondary'
36
42
  */
37
43
  variant?: TagVariant;
38
44
  } & {
@@ -3,12 +3,14 @@ import type { TextListType } from '../types';
3
3
  export type PTextListProps = BaseProps & {
4
4
  /**
5
5
  * The list style type.
6
+ * @default 'unordered'
6
7
  */
7
8
  type?: TextListType;
8
9
  };
9
10
  export declare const PTextList: 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"> & {
10
11
  /**
11
12
  * The list style type.
13
+ * @default 'unordered'
12
14
  */
13
15
  type?: TextListType;
14
16
  } & {
@@ -3,60 +3,74 @@ import type { TextAlign, TextColor, TextHyphens, BreakpointCustomizable, TextSiz
3
3
  export type PTextProps = BaseProps & {
4
4
  /**
5
5
  * Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
6
+ * @default 'start'
6
7
  */
7
8
  align?: TextAlign;
8
9
  /**
9
10
  * Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
11
+ * @default 'primary'
10
12
  */
11
13
  color?: TextColor;
12
14
  /**
13
15
  * Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
16
+ * @default false
14
17
  */
15
18
  ellipsis?: boolean;
16
19
  /**
17
20
  * Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `&shy;`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
21
+ * @default 'inherit'
18
22
  */
19
23
  hyphens?: TextHyphens;
20
24
  /**
21
25
  * Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
26
+ * @default 'sm'
22
27
  */
23
28
  size?: BreakpointCustomizable<TextSize>;
24
29
  /**
25
30
  * Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes, 'time' for dates).
31
+ * @default 'p'
26
32
  */
27
33
  tag?: TextTag;
28
34
  /**
29
35
  * The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis.
36
+ * @default 'normal'
30
37
  */
31
38
  weight?: TextWeight;
32
39
  };
33
40
  export declare const PText: 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"> & {
34
41
  /**
35
42
  * Text alignment of the text. Use 'start' for left-aligned text (in LTR), 'center' for centered, 'end' for right-aligned (in LTR), or 'inherit' to adopt the parent's alignment.
43
+ * @default 'start'
36
44
  */
37
45
  align?: TextAlign;
38
46
  /**
39
47
  * Text color of the text. Use 'primary' for default, 'contrast-higher' / 'contrast-high' / 'contrast-medium' for alternative emphasis levels, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
48
+ * @default 'primary'
40
49
  */
41
50
  color?: TextColor;
42
51
  /**
43
52
  * Adds an ellipsis to a single line of text if it overflows the container width. When enabled, the text is truncated to a single line with `text-overflow: ellipsis`. Cannot be combined with multi-line content.
53
+ * @default false
44
54
  */
45
55
  ellipsis?: boolean;
46
56
  /**
47
57
  * Controls the hyphenation behavior of the text. Use 'auto' to let the browser automatically hyphenate words at appropriate points, 'manual' to only hyphenate at manually inserted hyphenation points (e.g. `&shy;`), 'none' to disable hyphenation entirely, or 'inherit' to adopt the parent's hyphenation setting.
58
+ * @default 'inherit'
48
59
  */
49
60
  hyphens?: TextHyphens;
50
61
  /**
51
62
  * Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}. You always need to provide a base value when doing this. Use 'inherit' to adopt the parent's font size.
63
+ * @default 'sm'
52
64
  */
53
65
  size?: BreakpointCustomizable<TextSize>;
54
66
  /**
55
67
  * Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes, 'time' for dates).
68
+ * @default 'p'
56
69
  */
57
70
  tag?: TextTag;
58
71
  /**
59
72
  * The font weight of the text. Use 'normal' for regular body text, 'semibold' for slightly emphasized text, or 'bold' for strong emphasis.
73
+ * @default 'normal'
60
74
  */
61
75
  weight?: TextWeight;
62
76
  } & {
@@ -7,18 +7,22 @@ export type PTextareaProps = BaseProps & {
7
7
  autoComplete?: string;
8
8
  /**
9
9
  * Displays the textarea in compact mode.
10
+ * @default false
10
11
  */
11
12
  compact?: boolean;
12
13
  /**
13
14
  * Show or hide the character counter.
15
+ * @default false
14
16
  */
15
17
  counter?: boolean;
16
18
  /**
17
19
  * Supplementary text providing more context or explanation for the textarea.
20
+ * @default ''
18
21
  */
19
22
  description?: string;
20
23
  /**
21
24
  * Disables the textarea. The value will not be submitted with the form.
25
+ * @default false
22
26
  */
23
27
  disabled?: boolean;
24
28
  /**
@@ -27,10 +31,12 @@ export type PTextareaProps = BaseProps & {
27
31
  form?: string;
28
32
  /**
29
33
  * Shows or hides the label. For better accessibility, it is recommended to show the label.
34
+ * @default false
30
35
  */
31
36
  hideLabel?: BreakpointCustomizable<boolean>;
32
37
  /**
33
38
  * Text content for a user-facing label.
39
+ * @default ''
34
40
  */
35
41
  label?: string;
36
42
  /**
@@ -39,6 +45,7 @@ export type PTextareaProps = BaseProps & {
39
45
  maxLength?: number;
40
46
  /**
41
47
  * Dynamic feedback text for validation or status.
48
+ * @default ''
42
49
  */
43
50
  message?: string;
44
51
  /**
@@ -63,22 +70,27 @@ export type PTextareaProps = BaseProps & {
63
70
  onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
64
71
  /**
65
72
  * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
73
+ * @default ''
66
74
  */
67
75
  placeholder?: string;
68
76
  /**
69
77
  * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
78
+ * @default false
70
79
  */
71
80
  readOnly?: boolean;
72
81
  /**
73
82
  * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
83
+ * @default false
74
84
  */
75
85
  required?: boolean;
76
86
  /**
77
87
  * Controls whether the textarea is resizable and in which direction.
88
+ * @default 'vertical'
78
89
  */
79
90
  resize?: TextareaResize;
80
91
  /**
81
92
  * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
93
+ * @default 7
82
94
  */
83
95
  rows?: number;
84
96
  /**
@@ -87,14 +99,17 @@ export type PTextareaProps = BaseProps & {
87
99
  spellCheck?: boolean;
88
100
  /**
89
101
  * Indicates the validation or overall status of the textarea component.
102
+ * @default 'none'
90
103
  */
91
104
  state?: TextareaState;
92
105
  /**
93
106
  * The textarea value.
107
+ * @default ''
94
108
  */
95
109
  value?: string;
96
110
  /**
97
111
  * Handles wrapping behavior of elements.
112
+ * @default 'soft'
98
113
  */
99
114
  wrap?: TextareaWrap;
100
115
  };
@@ -105,18 +120,22 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
105
120
  autoComplete?: string;
106
121
  /**
107
122
  * Displays the textarea in compact mode.
123
+ * @default false
108
124
  */
109
125
  compact?: boolean;
110
126
  /**
111
127
  * Show or hide the character counter.
128
+ * @default false
112
129
  */
113
130
  counter?: boolean;
114
131
  /**
115
132
  * Supplementary text providing more context or explanation for the textarea.
133
+ * @default ''
116
134
  */
117
135
  description?: string;
118
136
  /**
119
137
  * Disables the textarea. The value will not be submitted with the form.
138
+ * @default false
120
139
  */
121
140
  disabled?: boolean;
122
141
  /**
@@ -125,10 +144,12 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
125
144
  form?: string;
126
145
  /**
127
146
  * Shows or hides the label. For better accessibility, it is recommended to show the label.
147
+ * @default false
128
148
  */
129
149
  hideLabel?: BreakpointCustomizable<boolean>;
130
150
  /**
131
151
  * Text content for a user-facing label.
152
+ * @default ''
132
153
  */
133
154
  label?: string;
134
155
  /**
@@ -137,6 +158,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
137
158
  maxLength?: number;
138
159
  /**
139
160
  * Dynamic feedback text for validation or status.
161
+ * @default ''
140
162
  */
141
163
  message?: string;
142
164
  /**
@@ -161,22 +183,27 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
161
183
  onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
162
184
  /**
163
185
  * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
186
+ * @default ''
164
187
  */
165
188
  placeholder?: string;
166
189
  /**
167
190
  * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
191
+ * @default false
168
192
  */
169
193
  readOnly?: boolean;
170
194
  /**
171
195
  * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
196
+ * @default false
172
197
  */
173
198
  required?: boolean;
174
199
  /**
175
200
  * Controls whether the textarea is resizable and in which direction.
201
+ * @default 'vertical'
176
202
  */
177
203
  resize?: TextareaResize;
178
204
  /**
179
205
  * The number of rows. Has no effect when field-sizing CSS Variable '--p-textarea-field-sizing' is set to 'content'.
206
+ * @default 7
180
207
  */
181
208
  rows?: number;
182
209
  /**
@@ -185,14 +212,17 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
185
212
  spellCheck?: boolean;
186
213
  /**
187
214
  * Indicates the validation or overall status of the textarea component.
215
+ * @default 'none'
188
216
  */
189
217
  state?: TextareaState;
190
218
  /**
191
219
  * The textarea value.
220
+ * @default ''
192
221
  */
193
222
  value?: string;
194
223
  /**
195
224
  * Handles wrapping behavior of elements.
225
+ * @default 'soft'
196
226
  */
197
227
  wrap?: TextareaWrap;
198
228
  } & {
@@ -11,10 +11,12 @@ export type PWordmarkProps = BaseProps & {
11
11
  href?: string;
12
12
  /**
13
13
  * Controls the size of the wordmark.
14
+ * @default 'small'
14
15
  */
15
16
  size?: WordmarkSize;
16
17
  /**
17
18
  * Specifies where to open the linked document.
19
+ * @default '_self'
18
20
  */
19
21
  target?: WordmarkTarget;
20
22
  };
@@ -29,10 +31,12 @@ export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<i
29
31
  href?: string;
30
32
  /**
31
33
  * Controls the size of the wordmark.
34
+ * @default 'small'
32
35
  */
33
36
  size?: WordmarkSize;
34
37
  /**
35
38
  * Specifies where to open the linked document.
39
+ * @default '_self'
36
40
  */
37
41
  target?: WordmarkTarget;
38
42
  } & import("react").RefAttributes<HTMLElement>>;
@@ -784,6 +784,11 @@ export type SelectedAriaAttributes<T extends keyof AriaAttributes> = Pick<AriaAt
784
784
  export type SelectedAriaRole<T> = {
785
785
  role: Extract<AriaRole, T>;
786
786
  };
787
+ declare const BANNER_POSITIONS: readonly [
788
+ "top",
789
+ "bottom"
790
+ ];
791
+ export type BannerPosition = (typeof BANNER_POSITIONS)[number];
787
792
  declare const BANNER_STATES: readonly [
788
793
  "info",
789
794
  "success",
@@ -145,6 +145,7 @@ body {
145
145
  --p-spacing-fluid-xl: clamp(48px, 3vw + 38px, 96px);
146
146
  --p-spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);
147
147
 
148
+ --p-spacing-static-2xs: 1px;
148
149
  --p-spacing-static-xs: 4px;
149
150
  --p-spacing-static-sm: 8px;
150
151
  --p-spacing-static-md: 16px;