@porsche-design-system/components-vue 2.19.0-rc.0

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 (178) hide show
  1. package/CHANGELOG.md +1638 -0
  2. package/LICENSE +59 -0
  3. package/OSS_NOTICE +20981 -0
  4. package/PorscheDesignSystemProvider.vue.d.ts +33 -0
  5. package/PorscheDesignSystemProvider.vue.js +16 -0
  6. package/PorscheDesignSystemProvider.vue2.js +5 -0
  7. package/lib/components/AccordionWrapper.vue.d.ts +90 -0
  8. package/lib/components/AccordionWrapper.vue.js +33 -0
  9. package/lib/components/AccordionWrapper.vue2.js +5 -0
  10. package/lib/components/BannerWrapper.vue.d.ts +71 -0
  11. package/lib/components/BannerWrapper.vue.js +31 -0
  12. package/lib/components/BannerWrapper.vue2.js +5 -0
  13. package/lib/components/ButtonGroupWrapper.vue.d.ts +46 -0
  14. package/lib/components/ButtonGroupWrapper.vue.js +27 -0
  15. package/lib/components/ButtonGroupWrapper.vue2.js +5 -0
  16. package/lib/components/ButtonPureWrapper.vue.d.ts +179 -0
  17. package/lib/components/ButtonPureWrapper.vue.js +40 -0
  18. package/lib/components/ButtonPureWrapper.vue2.js +5 -0
  19. package/lib/components/ButtonWrapper.vue.d.ts +135 -0
  20. package/lib/components/ButtonWrapper.vue.js +36 -0
  21. package/lib/components/ButtonWrapper.vue2.js +5 -0
  22. package/lib/components/CarouselWrapper.vue.d.ts +112 -0
  23. package/lib/components/CarouselWrapper.vue.js +35 -0
  24. package/lib/components/CarouselWrapper.vue2.js +5 -0
  25. package/lib/components/CheckboxWrapperWrapper.vue.d.ts +73 -0
  26. package/lib/components/CheckboxWrapperWrapper.vue.js +30 -0
  27. package/lib/components/CheckboxWrapperWrapper.vue2.js +5 -0
  28. package/lib/components/ContentWrapperWrapper.vue.d.ts +62 -0
  29. package/lib/components/ContentWrapperWrapper.vue.js +29 -0
  30. package/lib/components/ContentWrapperWrapper.vue2.js +5 -0
  31. package/lib/components/DividerWrapper.vue.d.ts +55 -0
  32. package/lib/components/DividerWrapper.vue.js +24 -0
  33. package/lib/components/DividerWrapper.vue2.js +5 -0
  34. package/lib/components/FieldsetWrapperWrapper.vue.d.ts +84 -0
  35. package/lib/components/FieldsetWrapperWrapper.vue.js +31 -0
  36. package/lib/components/FieldsetWrapperWrapper.vue2.js +5 -0
  37. package/lib/components/FlexItemWrapper.vue.d.ts +95 -0
  38. package/lib/components/FlexItemWrapper.vue.js +32 -0
  39. package/lib/components/FlexItemWrapper.vue2.js +5 -0
  40. package/lib/components/FlexWrapper.vue.d.ts +95 -0
  41. package/lib/components/FlexWrapper.vue.js +32 -0
  42. package/lib/components/FlexWrapper.vue2.js +5 -0
  43. package/lib/components/GridItemWrapper.vue.d.ts +51 -0
  44. package/lib/components/GridItemWrapper.vue.js +28 -0
  45. package/lib/components/GridItemWrapper.vue2.js +5 -0
  46. package/lib/components/GridWrapper.vue.d.ts +70 -0
  47. package/lib/components/GridWrapper.vue.js +29 -0
  48. package/lib/components/GridWrapper.vue2.js +5 -0
  49. package/lib/components/HeadlineWrapper.vue.d.ts +92 -0
  50. package/lib/components/HeadlineWrapper.vue.js +32 -0
  51. package/lib/components/HeadlineWrapper.vue2.js +5 -0
  52. package/lib/components/IconWrapper.vue.d.ts +93 -0
  53. package/lib/components/IconWrapper.vue.js +28 -0
  54. package/lib/components/IconWrapper.vue2.js +5 -0
  55. package/lib/components/InlineNotificationWrapper.vue.d.ts +121 -0
  56. package/lib/components/InlineNotificationWrapper.vue.js +35 -0
  57. package/lib/components/InlineNotificationWrapper.vue2.js +5 -0
  58. package/lib/components/LinkPureWrapper.vue.d.ts +168 -0
  59. package/lib/components/LinkPureWrapper.vue.js +40 -0
  60. package/lib/components/LinkPureWrapper.vue2.js +5 -0
  61. package/lib/components/LinkSocialWrapper.vue.d.ts +94 -0
  62. package/lib/components/LinkSocialWrapper.vue.js +33 -0
  63. package/lib/components/LinkSocialWrapper.vue2.js +5 -0
  64. package/lib/components/LinkTileWrapper.vue.d.ts +154 -0
  65. package/lib/components/LinkTileWrapper.vue.js +39 -0
  66. package/lib/components/LinkTileWrapper.vue2.js +5 -0
  67. package/lib/components/LinkWrapper.vue.d.ts +124 -0
  68. package/lib/components/LinkWrapper.vue.js +36 -0
  69. package/lib/components/LinkWrapper.vue2.js +5 -0
  70. package/lib/components/MarqueWrapper.vue.d.ts +71 -0
  71. package/lib/components/MarqueWrapper.vue.js +26 -0
  72. package/lib/components/MarqueWrapper.vue2.js +5 -0
  73. package/lib/components/ModalWrapper.vue.d.ts +93 -0
  74. package/lib/components/ModalWrapper.vue.js +33 -0
  75. package/lib/components/ModalWrapper.vue2.js +5 -0
  76. package/lib/components/PaginationWrapper.vue.d.ts +131 -0
  77. package/lib/components/PaginationWrapper.vue.js +31 -0
  78. package/lib/components/PaginationWrapper.vue2.js +5 -0
  79. package/lib/components/PopoverWrapper.vue.d.ts +56 -0
  80. package/lib/components/PopoverWrapper.vue.js +29 -0
  81. package/lib/components/PopoverWrapper.vue2.js +5 -0
  82. package/lib/components/RadioButtonWrapperWrapper.vue.d.ts +73 -0
  83. package/lib/components/RadioButtonWrapperWrapper.vue.js +30 -0
  84. package/lib/components/RadioButtonWrapperWrapper.vue2.js +5 -0
  85. package/lib/components/ScrollerWrapper.vue.d.ts +70 -0
  86. package/lib/components/ScrollerWrapper.vue.js +30 -0
  87. package/lib/components/ScrollerWrapper.vue2.js +5 -0
  88. package/lib/components/SegmentedControlItemWrapper.vue.d.ts +72 -0
  89. package/lib/components/SegmentedControlItemWrapper.vue.js +31 -0
  90. package/lib/components/SegmentedControlItemWrapper.vue2.js +5 -0
  91. package/lib/components/SegmentedControlWrapper.vue.d.ts +63 -0
  92. package/lib/components/SegmentedControlWrapper.vue.js +30 -0
  93. package/lib/components/SegmentedControlWrapper.vue2.js +5 -0
  94. package/lib/components/SelectWrapperWrapper.vue.d.ts +128 -0
  95. package/lib/components/SelectWrapperWrapper.vue.js +35 -0
  96. package/lib/components/SelectWrapperWrapper.vue2.js +5 -0
  97. package/lib/components/SpinnerWrapper.vue.d.ts +52 -0
  98. package/lib/components/SpinnerWrapper.vue.js +24 -0
  99. package/lib/components/SpinnerWrapper.vue2.js +5 -0
  100. package/lib/components/StepperHorizontalItemWrapper.vue.d.ts +47 -0
  101. package/lib/components/StepperHorizontalItemWrapper.vue.js +28 -0
  102. package/lib/components/StepperHorizontalItemWrapper.vue2.js +5 -0
  103. package/lib/components/StepperHorizontalWrapper.vue.d.ts +49 -0
  104. package/lib/components/StepperHorizontalWrapper.vue.js +29 -0
  105. package/lib/components/StepperHorizontalWrapper.vue2.js +5 -0
  106. package/lib/components/SwitchWrapper.vue.d.ts +123 -0
  107. package/lib/components/SwitchWrapper.vue.js +35 -0
  108. package/lib/components/SwitchWrapper.vue2.js +5 -0
  109. package/lib/components/TableBodyWrapper.vue.d.ts +9 -0
  110. package/lib/components/TableBodyWrapper.vue.js +17 -0
  111. package/lib/components/TableBodyWrapper.vue2.js +5 -0
  112. package/lib/components/TableCellWrapper.vue.d.ts +39 -0
  113. package/lib/components/TableCellWrapper.vue.js +27 -0
  114. package/lib/components/TableCellWrapper.vue2.js +5 -0
  115. package/lib/components/TableHeadCellWrapper.vue.d.ts +59 -0
  116. package/lib/components/TableHeadCellWrapper.vue.js +29 -0
  117. package/lib/components/TableHeadCellWrapper.vue2.js +5 -0
  118. package/lib/components/TableHeadRowWrapper.vue.d.ts +9 -0
  119. package/lib/components/TableHeadRowWrapper.vue.js +17 -0
  120. package/lib/components/TableHeadRowWrapper.vue2.js +5 -0
  121. package/lib/components/TableHeadWrapper.vue.d.ts +9 -0
  122. package/lib/components/TableHeadWrapper.vue.js +17 -0
  123. package/lib/components/TableHeadWrapper.vue2.js +5 -0
  124. package/lib/components/TableRowWrapper.vue.d.ts +9 -0
  125. package/lib/components/TableRowWrapper.vue.js +17 -0
  126. package/lib/components/TableRowWrapper.vue2.js +5 -0
  127. package/lib/components/TableWrapper.vue.d.ts +32 -0
  128. package/lib/components/TableWrapper.vue.js +28 -0
  129. package/lib/components/TableWrapper.vue2.js +5 -0
  130. package/lib/components/TabsBarWrapper.vue.d.ts +85 -0
  131. package/lib/components/TabsBarWrapper.vue.js +32 -0
  132. package/lib/components/TabsBarWrapper.vue2.js +5 -0
  133. package/lib/components/TabsItemWrapper.vue.d.ts +28 -0
  134. package/lib/components/TabsItemWrapper.vue.js +27 -0
  135. package/lib/components/TabsItemWrapper.vue2.js +5 -0
  136. package/lib/components/TabsWrapper.vue.d.ts +88 -0
  137. package/lib/components/TabsWrapper.vue.js +32 -0
  138. package/lib/components/TabsWrapper.vue2.js +5 -0
  139. package/lib/components/TagDismissibleWrapper.vue.d.ts +56 -0
  140. package/lib/components/TagDismissibleWrapper.vue.js +29 -0
  141. package/lib/components/TagDismissibleWrapper.vue2.js +5 -0
  142. package/lib/components/TagWrapper.vue.d.ts +67 -0
  143. package/lib/components/TagWrapper.vue.js +30 -0
  144. package/lib/components/TagWrapper.vue2.js +5 -0
  145. package/lib/components/TextFieldWrapperWrapper.vue.d.ts +140 -0
  146. package/lib/components/TextFieldWrapperWrapper.vue.js +37 -0
  147. package/lib/components/TextFieldWrapperWrapper.vue2.js +5 -0
  148. package/lib/components/TextListItemWrapper.vue.d.ts +9 -0
  149. package/lib/components/TextListItemWrapper.vue.js +17 -0
  150. package/lib/components/TextListItemWrapper.vue2.js +5 -0
  151. package/lib/components/TextListWrapper.vue.d.ts +62 -0
  152. package/lib/components/TextListWrapper.vue.js +29 -0
  153. package/lib/components/TextListWrapper.vue2.js +5 -0
  154. package/lib/components/TextWrapper.vue.d.ts +106 -0
  155. package/lib/components/TextWrapper.vue.js +33 -0
  156. package/lib/components/TextWrapper.vue2.js +5 -0
  157. package/lib/components/TextareaWrapperWrapper.vue.d.ts +95 -0
  158. package/lib/components/TextareaWrapperWrapper.vue.js +32 -0
  159. package/lib/components/TextareaWrapperWrapper.vue2.js +5 -0
  160. package/lib/components/ToastWrapper.vue.d.ts +33 -0
  161. package/lib/components/ToastWrapper.vue.js +22 -0
  162. package/lib/components/ToastWrapper.vue2.js +5 -0
  163. package/lib/components/index.d.ts +52 -0
  164. package/lib/types.d.ts +738 -0
  165. package/package.json +28 -0
  166. package/partials/esm/partials.js +1 -0
  167. package/partials/package.json +6 -0
  168. package/partials/partials.d.ts +1 -0
  169. package/partials/partials.js +12 -0
  170. package/public-api.d.ts +5 -0
  171. package/public-api.js +112 -0
  172. package/utilities/js/esm/js.js +1 -0
  173. package/utilities/js/js.d.ts +1 -0
  174. package/utilities/js/js.js +12 -0
  175. package/utilities/js/package.json +6 -0
  176. package/utilities/scss.scss +1 -0
  177. package/utils.d.ts +9 -0
  178. package/utils.js +28 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,1638 @@
1
+ # Changelog
2
+
3
+ ## Porsche Design System - Components
4
+
5
+ All notable changes to this project will be documented in this file.
6
+
7
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to
8
+ [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
9
+
10
+ ### [Unreleased]
11
+
12
+ ### [2.19.0-rc.0] - 2022-12-21
13
+
14
+ #### Added
15
+
16
+ - Vue: typed components are available via the `@porsche-design-system/components-vue` package
17
+
18
+ #### Fixed
19
+
20
+ - `Modal` focus cycle when pressing Shift Tab right after it was opened
21
+
22
+ ### [2.18.0] - 2022-12-15
23
+
24
+ ### [2.18.0-rc.2] - 2022-12-14
25
+
26
+ #### Added
27
+
28
+ - Validation to ensure crucial partials are used.
29
+ **Disclaimer:** The Porsche Design System will **not** inject its initial styles anymore. Please use the
30
+ `getInitialStyles()` partial to reduce flash of unstyled content (FOUC) as described here:
31
+ **https://designsystem.porsche.com/v2/partials/initial-styles**
32
+
33
+ #### Changed
34
+
35
+ - `line-height` calculation for all components is handled CSS only now by using `ex`-unit in combination with `calc()`
36
+ which gives the best performance, the easiest possible integration and respects UI best practices in having **larger**
37
+ `line-height` values for **small** `font-size` definitions and **smaller** `line-height` values for **larger**
38
+ `font-size` definitions. The calculated values by CSS slightly differ compared to the ones calculated by JavaScript,
39
+ which might result in minor visual changes.
40
+
41
+ #### Fixed
42
+
43
+ - Screen reader announcements of `Textfield` and `Textarea` in `counter` mode
44
+ - Screen reader announcements in `Select Wrapper`
45
+
46
+ ### [2.18.0-rc.1] - 2022-11-24
47
+
48
+ #### Added
49
+
50
+ - `Carousel` now has a `rewind` property, better prev/next icons, a `max-width` for `heading` and `description` and
51
+ support for slotted `description`
52
+
53
+ #### Fixed
54
+
55
+ - `Select Wrapper` height if text is zoomed up to 200%
56
+
57
+ ### [2.18.0-rc.0] - 2022-11-17
58
+
59
+ #### Added
60
+
61
+ - SSR/SSG ready components using Declarative Shadow DOM for Next JS are shipped via
62
+ `@porsche-design-system/components-react/ssr`. To use it simply change your imports:
63
+
64
+ ```diff
65
+ - import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react';
66
+ + import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react/ssr';
67
+ ```
68
+
69
+ #### Changed
70
+
71
+ - Improve height calculation for `Accordion`
72
+ - Slotted anchor support for `Link Pure` is stricter (In case slotted `<a>` is used it must be a direct child of
73
+ `Link Pure`)
74
+ - `getFontLinks()` partial now has `{ weights: ['regular', 'semi-bold'] }` for a default
75
+
76
+ ### [2.17.0] - 2022-10-31
77
+
78
+ ### [2.17.0-rc.0] - 2022-10-31
79
+
80
+ #### Added
81
+
82
+ - `Link Tile`
83
+
84
+ #### Fixed
85
+
86
+ - `Scroller` bug where scrollable content was not fully hidden by the gradient, when zoomed into the page.
87
+
88
+ #### Changed
89
+
90
+ - Removed `!important` keyword from css property `display` of `Link Pure` and `Button Pure`
91
+
92
+ ### [2.16.3] - 2022-10-21
93
+
94
+ ### [2.16.3-rc.0] - 2022-10-21
95
+
96
+ #### Fixed
97
+
98
+ - `Button Pure` and `Link Pure` error when using `size="inherit"` and `icon="none"`
99
+
100
+ #### Changed
101
+
102
+ - Replaced all internal usage of `Text` and `Headline` components
103
+
104
+ ### [2.16.2] - 2022-09-15
105
+
106
+ ### [2.16.2-rc.0] - 2022-09-15
107
+
108
+ #### Fixed
109
+
110
+ - Issue with `Popover` where drop-shadow is not shown correctly in Chrome >= 105
111
+ - Issue with `Carousel` and `wrap-content="true"` where the layout was out of sync with `Content Wrapper` for
112
+ viewports >= 1760px.
113
+ - `Select Wrapper` with custom dropdown keeps attribute changes of native select options in sync if changed
114
+ programmatically
115
+
116
+ ### [2.16.1] - 2022-09-09
117
+
118
+ #### Fixed
119
+
120
+ - Issue with `Options` typing import for `Carousel`
121
+
122
+ ### [2.16.0] - 2022-09-08
123
+
124
+ ### [2.15.1-rc.1] - 2022-09-08
125
+
126
+ #### Added
127
+
128
+ - `Carousel`
129
+ - `Scroller`
130
+
131
+ #### Changed
132
+
133
+ - `Stepper Horizontal` now has `size` property
134
+ - `Stepper Horizontal` uses improved focus behavior in case it becomes scrollable and scroll indicators are centered
135
+ correctly.
136
+ - `Tabs Bar` uses improved focus behavior in case it becomes scrollable and scroll indicators are centered correctly.
137
+
138
+ ### [2.15.1-rc.0] - 2022-08-24
139
+
140
+ #### Fixed
141
+
142
+ - `Radio Button Wrapper` visual selection change bug in Safari >= 15.5
143
+
144
+ ### [2.15.0] - 2022-08-22
145
+
146
+ ### [2.15.0-rc.1] - 2022-08-18
147
+
148
+ #### Changed
149
+
150
+ - Downgraded `@angular` to `v13` to ensure backwards compatibility of `@porsche-design-system/components-angular`
151
+
152
+ ### [2.15.0-rc.0] - 2022-08-16
153
+
154
+ #### Fixed
155
+
156
+ - `Popover` visual shadow bug in Safari
157
+ - `Stepper Horizontal Item` bug where pseudo styles of the counter element were overridable
158
+
159
+ ### [2.15.0-beta.0] - 2022-08-05
160
+
161
+ #### Fixed
162
+
163
+ - `Tabs` & `Tabs Bar` `size` property when using `BreakpointCustomizable`
164
+
165
+ #### Changed
166
+
167
+ - `Modal` uses poly fluid sizing for outer spacing
168
+ - `Banner` uses poly fluid sizing for outer spacing
169
+ - `Content Wrapper` uses poly fluid sizing for inner spacing
170
+ - `Modal` min-width is slightly updated to perfectly fit into content area of `Content Wrapper` at 320px viewport width
171
+
172
+ #### Added
173
+
174
+ - Validation of properties for all components
175
+ - `Text Field Wrapper` with `input type="search"` is clearable via Escape key and custom clear button across browsers
176
+ - `Text Field Wrapper` with `input type="search"` shows a "Locate me" button when `actionIcon="locate"` is set, emits
177
+ the `action` event on click and can be put into a loading state via `actionLoading="true"`
178
+
179
+ ### [2.14.0] - 2022-07-11
180
+
181
+ ### [2.14.0-rc.1] - 2022-07-11
182
+
183
+ ### [2.14.0-rc.0] - 2022-07-11
184
+
185
+ #### Added
186
+
187
+ - `getBrowserSupportFallbackScript()` partial supporting `cdn` and `format` options as replacement for
188
+ `includeOverlay()` of `@porsche-design-system/browser-notification` npm package
189
+ - `getCookiesFallbackScript()` partial supporting `cdn` and `format` options as replacement for `includeCookieOverlay()`
190
+ of `@porsche-design-system/browser-notification` npm package
191
+
192
+ #### Changed
193
+
194
+ - `getMetaTagsAndIconLinks()` partial to return `theme-color` meta tags with `prefers-color-scheme: {light|dark}` media
195
+ query
196
+
197
+ ### [2.13.0] - 2022-06-23
198
+
199
+ ### [2.13.0-rc.5] - 2022-06-23
200
+
201
+ #### Fixed
202
+
203
+ - `Stepper Horizontal Item` `state` validation
204
+ - `Button` and `Link` with `theme="dark" variant="tertiary"` and `Tag Dismissible` bug on Safari < v15.5 where wrong
205
+ colors on hover were shown
206
+
207
+ ### [2.13.0-rc.4] - 2022-06-22
208
+
209
+ #### Added
210
+
211
+ - `Stepper Horizontal`
212
+
213
+ ### [2.13.0-rc.3] - 2022-06-22
214
+
215
+ #### Added
216
+
217
+ - `Segmented Control`
218
+
219
+ ### [2.13.0-rc.2] - 2022-06-21
220
+
221
+ ### [2.13.0-rc.1] - 2022-06-21
222
+
223
+ ### [2.13.0-rc.0] - 2022-06-21
224
+
225
+ #### Changed
226
+
227
+ - `Button`, `Button Pure` and `Switch` apply `aria-disabled="true"` instead of `disabled` attribute to native button
228
+ internally in case `disabled` and/or `loading` property is set
229
+
230
+ ### [2.12.1] - 2022-05-25
231
+
232
+ ### [2.12.1-rc.0] - 2022-05-25
233
+
234
+ #### Fixed
235
+
236
+ - Issue with `JssStyle` typing import
237
+
238
+ ### [2.12.0] - 2022-05-19
239
+
240
+ #### Changed
241
+
242
+ - npm package is prepared for public release on [npmjs.org](https://npmjs.com)
243
+
244
+ ### [2.12.0-rc.2] - 2022-05-12
245
+
246
+ ### [2.12.0-rc.1] - 2022-05-11
247
+
248
+ ### [2.12.0-rc.0] - 2022-05-04
249
+
250
+ #### Added
251
+
252
+ - `Table Head Cell` now has a `multiline` property
253
+
254
+ #### Changed
255
+
256
+ - `Headline` has no `hypens` / `overflow-wrap` style by default
257
+ - Partials now throw an exception if they are executed in browser
258
+
259
+ #### Fixed
260
+
261
+ - Exception in `Headline`, `Select Wrapper`, `Text` and `Text List` when changing `theme` prop from `dark` to `light`
262
+ - `getInitialStyles()` partial now returns `.hydrated` styles, too
263
+
264
+ ### [2.11.0-skeletons] - 2022-04-21
265
+
266
+ ### [2.11.0] - 2022-04-21
267
+
268
+ ### [2.11.0-rc.0] - 2022-04-20
269
+
270
+ #### Added
271
+
272
+ - `Tag`
273
+ - `Tag Dismissible`
274
+
275
+ ### [2.10.0-skeletons] - 2022-04-13
276
+
277
+ ### [2.10.0] - 2022-04-13
278
+
279
+ ### [2.9.3-rc.1] - 2022-04-06
280
+
281
+ #### Added
282
+
283
+ - `Text Field Wrapper` now has a `showCharacterCount` property which can be used to hide the character count when a
284
+ `maxLength` attribute is set on the wrapped `input`.
285
+ - `Textarea Wrapper` now has a `showCharacterCount` property which can be used to hide the character count when a
286
+ `maxLength` attribute is set on the wrapped `textarea`.
287
+
288
+ ### [2.9.3-rc.0-skeletons] - 2022-03-29
289
+
290
+ ### [2.9.3-rc.0] - 2022-03-28
291
+
292
+ #### Added
293
+
294
+ - `Text Field Wrapper` supports `unit` property on `input type="text"`
295
+ - `Marque` optional configurable clickable/focusable area by defining padding on host element
296
+
297
+ #### Fixed
298
+
299
+ - `Tabs Item` improved accessibility
300
+ - Angular: circular dependency in development mode in `2.9.2-skeletons`
301
+
302
+ ### [2.9.2-skeletons] - 2022-03-24
303
+
304
+ #### Added
305
+
306
+ - **[EXPERIMENTAL]** `getInitialStyles` partial now accepts a `skeletonTagNames` array of component names that will
307
+ initially have skeleton styles while the Porsche Design System is loading
308
+ - **[EXPERIMENTAL]** `Button`, `Button Pure`, `Checkbox Wrapper`, `Fieldset Wrapper`, `Link`, `Link Pure`,
309
+ `Link Social`, `Radio Button Wrapper`, `Select Wrapper`, `Text Field Wrapper`, `Textarea Wrapper` can now have initial
310
+ skeleton styles when passed as `skeletonTagNames` to the `getInitialStyles` partial
311
+
312
+ ### [2.9.2] - 2022-03-24
313
+
314
+ ### [2.9.2-rc.1] - 2022-03-23
315
+
316
+ #### Fixed
317
+
318
+ - Bug caused by Chrome where hover styles of `Link Pure` are not displayed correctly
319
+
320
+ ### [2.9.2-rc.0] - 2022-03-22
321
+
322
+ #### Added
323
+
324
+ - Normalized font behavior (`hyphen`, `overflow-wrap` and `text-size-adjust`) across components
325
+
326
+ #### Fixed
327
+
328
+ - `Modal` scrolling and pinch to zoom on iOS
329
+ - `Modal` initial position if scrollable
330
+ - `Table Head Cell` sort icon `asc` + `desc`
331
+
332
+ ### [2.9.1] - 2022-03-10
333
+
334
+ ### [2.9.1-rc.0] - 2022-03-09
335
+
336
+ #### Added
337
+
338
+ - Styles for slotted `<button>` in `Text`
339
+
340
+ #### Changed
341
+
342
+ - `Modal` heading and aria validation happens only when open
343
+
344
+ #### Fixed
345
+
346
+ - React: bundling format of partials
347
+
348
+ ### [2.9.0] - 2022-02-28
349
+
350
+ ### [2.9.0-rc.1] - 2022-02-25
351
+
352
+ #### Fixed
353
+
354
+ - `Modal` focus trap respecting elements in shadow DOM and dynamically added/removed elements on first level
355
+ - `Tabs Item` focus outline on click in Safari
356
+ - Error while using partials in Vanilla JS and Angular
357
+
358
+ ### [2.9.0-rc.0] - 2022-02-16
359
+
360
+ #### Added
361
+
362
+ - `getFontFaceStylesheet` returns additional `<link>` tags with `rel="preconnect"` and `rel="dns-prefetch"`
363
+ - Option `format` to partials `getFontFaceStylesheet`, `getComponentChunkLinks()`, `getFontLinks()`, `getIconLinks()`,
364
+ `getInitialStyles()`, `getLoaderScript()` and `getMetaTagsAndIconLinks()`
365
+
366
+ #### Deprecated
367
+
368
+ - The option `withoutTags` of partials `getFontFaceStylesheet`, `getComponentChunkLinks()`, `getFontLinks()`,
369
+ `getIconLinks()`, `getInitialStyles()`, `getLoaderScript()` and `getMetaTagsAndIconLinks()` is deprecated and will be
370
+ removed in `v3.0.0`. Please use `format: 'jsx'` instead.
371
+
372
+ ```diff
373
+ - <link rel="stylesheet" href={getFontFaceStylesheet({ withoutTags: true })} crossOrigin="true" />
374
+ + {getFontFaceStylesheet({ format: 'jsx' })}
375
+ ```
376
+
377
+ ### [2.9.0-beta.1] - 2022-01-27
378
+
379
+ #### Added
380
+
381
+ - `:focus-visible` content of selected Tab in `Tabs` component gets focus styling
382
+ - Improved accessibility of `Text Field Wrapper` and `Textarea Wrapper` when `maxlength` attribute is set
383
+ - `Modal` aria property
384
+ - `Modal` class for slotted elements to make content full-width
385
+
386
+ #### Changed
387
+
388
+ - `Button Pure` and `Link Pure` removed `position: relative` imposition, make sure to **not** override it with
389
+ `position: static`
390
+
391
+ #### Fixed
392
+
393
+ - `Modal` close button styles when no heading is passed
394
+
395
+ ### [2.9.0-beta.0] - 2022-01-18
396
+
397
+ #### Added
398
+
399
+ - React: `getByRoleShadowed`, `getByLabelTextShadowed` and `getByTextShadowed` utilities which uses
400
+ `@testing-library/dom` queries internally to support Shadow DOM
401
+
402
+ #### Fixed
403
+
404
+ - React: `UnhandledPromiseRejectionWarning` when using `skipPorscheDesignSystemCDNRequestsDuringTests()`
405
+
406
+ ### [2.8.0] - 2022-01-17
407
+
408
+ #### Fixed
409
+
410
+ - Accessibility issue of `Icon` component in Windows High Contrast Mode in Chromium Browser
411
+
412
+ ### [2.8.0-rc.0] - 2022-01-14
413
+
414
+ #### Added
415
+
416
+ - Support for `tabindex` attribute on `Button`, `Button Pure`, `Switch`, `Link`, `Link Pure` and `Link Social`
417
+
418
+ #### Changed
419
+
420
+ - `:focus-visible` style matches outline color of `Button` while hovered
421
+
422
+ #### Deprecated
423
+
424
+ - The `tabbable` property of `Button`, `Button Pure` and `Switch` is deprecated and will be removed in `v3.0.0`. Please
425
+ use `tabindex` instead.
426
+
427
+ ```diff
428
+ - <p-button tabbable="false">Some button</p-button>
429
+ + <p-button tabindex="-1">Some button</p-button>
430
+ ```
431
+
432
+ ### [2.8.0-beta.3] - 2021-12-22
433
+
434
+ #### Added
435
+
436
+ **Disclaimer:** The provided themes `light-electric` and `dark-electric` are just a proof of concept, it's **not**
437
+ accessible regarding its color contrast and might even be removed in an upcoming major release again.
438
+
439
+ - `light-electric` theme for `Switch`
440
+ - `dark-electric` theme for `Button Pure` and `Link Pure`
441
+ - Character counter to `Text Field Wrapper` and `Textarea Wrapper` if `maxlength` is present on `input type="text"` and
442
+ `textarea`
443
+
444
+ #### Changed
445
+
446
+ - `:focus-visible` style matches outline color of `Switch` while hovered
447
+
448
+ #### Fixed
449
+
450
+ - Box model of `Button Pure`
451
+
452
+ ### [2.8.0-beta.2] - 2021-12-22
453
+
454
+ #### Fixed
455
+
456
+ - `Content Wrapper` regression for `!important` style
457
+
458
+ #### Added
459
+
460
+ - Usage validation for `Link`, `Link Pure` and `Link Social`
461
+
462
+ ### [2.8.0-beta.1] - 2021-12-16
463
+
464
+ #### Fixed
465
+
466
+ - `Select Wrapper` validation of select element
467
+
468
+ ### [2.8.0-beta.0] - 2021-12-15
469
+
470
+ #### Changed
471
+
472
+ - Angular: Increased peer dependency to `>=12.0.0 <14.0.0`
473
+
474
+ ### [2.7.0] - 2021-12-14
475
+
476
+ ### [2.7.0-rc.0] - 2021-12-14
477
+
478
+ #### Removed
479
+
480
+ - `offset-bottom` prop of `Toast` (use `--p-toast-position-bottom` CSS variable instead)
481
+
482
+ ### [2.7.0-beta.6] - 2021-12-08
483
+
484
+ #### Added
485
+
486
+ - `Popover`
487
+
488
+ ### [2.7.0-beta.5] - 2021-12-07
489
+
490
+ #### Added
491
+
492
+ **Disclaimer:** The provided theme `light-electric` is just a proof of concept, it's **not** accessible regarding its
493
+ color contrast and might even be removed in an upcoming major release again.
494
+
495
+ - `light-electric` theme for `Accordion`, `Link`, `Link Pure`, `Button`, `Button Pure`, `Tabs`, `Tabs Bar`
496
+
497
+ ### [2.7.0-beta.4] - 2021-12-02
498
+
499
+ ### [2.7.0-beta.3] - 2021-11-30
500
+
501
+ #### Added
502
+
503
+ - `Accordion` uses `MutationObserver` fallback when no `ResizeObserver` is available in older browsers
504
+
505
+ #### Fixed
506
+
507
+ - `Link` and `Link Social` not adapting slotted anchor to the width of the element
508
+
509
+ ### [2.7.0-beta.2] - 2021-11-24
510
+
511
+ #### Added
512
+
513
+ - `Toast`
514
+
515
+ #### Fixed
516
+
517
+ - `Banner` animations respect offset correctly
518
+
519
+ ### [2.7.0-beta.1] - 2021-11-16
520
+
521
+ #### Fixed
522
+
523
+ - `Headline` applies `align` and `ellipsis` prop correctly
524
+
525
+ ### [2.7.0-beta.0] - 2021-11-11
526
+
527
+ #### Added
528
+
529
+ - New `aria` property for `ARIA` attribute handling for: `Button`, `Button Pure`, `Icon`, `Link`, `Link Pure`, `Marque`,
530
+ `Spinner`
531
+
532
+ #### Fixed
533
+
534
+ - React: warnings about `useLayoutEffect` in SSR context
535
+
536
+ ### [2.6.1] - 2021-11-05
537
+
538
+ #### Fixed
539
+
540
+ - Prevent breaking entire Porsche Design System due to lacking support of `ResizeObserver`, however `Accordion` still
541
+ requires it
542
+
543
+ ### [2.6.0] - 2021-11-04
544
+
545
+ #### Added
546
+
547
+ - `unit` and `unitPosition` properties to `Text Field Wrapper`
548
+
549
+ ### [2.6.0-beta.0] - 2021-10-29
550
+
551
+ #### Changed
552
+
553
+ - Use `Heiti SC` (pre-installed on iOS/macOS) and `SimHei` (pre-installed on Windows) as Chinese fallback font
554
+
555
+ #### Added
556
+
557
+ - `Marque` uses `webp` images for browsers that support it
558
+ - `Inline Notification`
559
+ - `Icon` now supports `success` for `name` property
560
+
561
+ #### Fixed
562
+
563
+ - Colors of `Banner` for dark theme
564
+ - Replaced CSS `inset` property with `top`, `left`, `right` and `bottom` for browser compatibility
565
+ - Opening and closing transition of `Modal`
566
+
567
+ ### [2.5.1-beta.0] - 2021-10-11
568
+
569
+ #### Fixed
570
+
571
+ - Possible exceptions when components get unmounted directly
572
+
573
+ ### [2.5.0] - 2021-10-04
574
+
575
+ #### Added
576
+
577
+ - `SimHei` and `黑体` as fallback for all components' `font-family`
578
+
579
+ ### [2.5.0-beta.1] - 2021-09-28
580
+
581
+ #### Changed
582
+
583
+ - React: improved render behavior of components
584
+
585
+ ### [2.5.0-beta.0] - 2021-09-22
586
+
587
+ #### Added
588
+
589
+ - React: utility function `skipPorscheDesignSystemCDNRequestsDuringTests`
590
+
591
+ ### [2.4.0] - 2021-09-21
592
+
593
+ ### [2.4.0-beta.2] - 2021-09-21
594
+
595
+ #### Added
596
+
597
+ - `Link Social` and `Icon` now support `kakaotalk`, `naver`, `reddit` and `tiktok`
598
+ - JSS caching mechanism to improve style performance
599
+
600
+ #### Changed
601
+
602
+ - Alignment of `linkedin` icon
603
+ - Improved accessibility of `Select Wrapper`
604
+ - `Icon` loading behaviour to non-blocking, components using the `Icon` will no longer wait for it to load
605
+ - Validation messages of `Fieldset Wrapper` have now an additional icon representing the validation state
606
+
607
+ #### Fixed
608
+
609
+ - Box model of `Link Pure`
610
+ - Focus of `Link Pure` with slotted anchor and hidden label
611
+ - Focus cycling of `Modal` without focusable children
612
+ - Suppress CORS error
613
+
614
+ ### [2.4.0-beta.1] - 2021-08-26
615
+
616
+ #### Added
617
+
618
+ - `active` property to `Button Pure`
619
+
620
+ ### [2.4.0-beta.0] - 2021-08-26
621
+
622
+ #### Added
623
+
624
+ - `icon` property of `Button Pure` and `Link Pure` was extended by `none` value
625
+ - `alignLabel` and `stretch` property to `Button Pure` and `Link Pure`
626
+
627
+ #### Changed
628
+
629
+ - Improved `:focus-visible` and `:hover:focus-visible` colors for `Link Social` and `Link`
630
+ - Improved slotted `<a>` coloring in dark theme for `Link Social` and `Link`
631
+ - Validation messages of `Checkbox Wrapper`, `Radio Button Wrapper`, `Select Wrapper`, `Textarea Wrapper` and
632
+ `Text Field Wrapper` have now an additional icon representing the validation state
633
+ - `Modal` backdrop behavior to close modal on mouse-down
634
+
635
+ #### Fixed
636
+
637
+ - Slotted `<a>` coloring in dark theme for `Text`, `Headline`, `Text List`, `Banner`, `Select Wrapper` and `Link Pure`
638
+ - Wrong background color of scrollable `Modal`'s backdrop in Safari
639
+
640
+ ### [2.3.0] - 2021-07-28
641
+
642
+ ### [2.3.0-beta.3] - 2021-07-28
643
+
644
+ #### Changed
645
+
646
+ - `Accordion` reduce paddings, vertically align carets to the first heading row, adjust border color and hover styles
647
+
648
+ #### Fixed
649
+
650
+ - `Text Field Wrapper` accessibility of type password and search
651
+
652
+ ### [2.3.0-beta.2] - 2021-07-15
653
+
654
+ #### Added
655
+
656
+ - `Checkbox Wrapper`, `Radio Button Wrapper`, `Select Wrapper`, `Textarea Wrapper` and `Text Field Wrapper` now reflect
657
+ changes of the `required` attribute on their child component
658
+ - `multiline` property to `Table Cell`
659
+ - Partial function `getLoaderScript()` to initialize Porsche Design System as early as possible
660
+
661
+ #### Fixed
662
+
663
+ - `Table Head Cell` uses semi bold instead of bold as font weight
664
+ - Transition of `Modal`
665
+
666
+ ### [2.3.0-beta.1] - 2021-07-08
667
+
668
+ #### Added
669
+
670
+ - `Accordion`
671
+
672
+ #### Changed
673
+
674
+ - Removed initial delay of `Banner`
675
+
676
+ ### [2.3.0-beta.0] - 2021-07-01
677
+
678
+ #### Added
679
+
680
+ - `Table`
681
+ - Angular: export types from package root
682
+ - Accessibility icon
683
+
684
+ #### Changed
685
+
686
+ - `Button`, `Button Pure` and `Switch` are now focusable while in `loading` state
687
+ - `Text` and `Headline` inherits white-space CSS property
688
+ - React: sync component props via property instead of attribute
689
+
690
+ #### Fixed
691
+
692
+ - Angular: support `"strictTemplates": true` option in `tsconfig.json`
693
+ - Use correct icon for `arrow-last` and `arrow-first` in `Icon`, `Button` and `Link` components
694
+
695
+ ### [2.2.1] - 2021-06-08
696
+
697
+ #### Changed
698
+
699
+ - Optimize vertical alignment of `Modal`
700
+
701
+ #### Fixed
702
+
703
+ - URL in inject global style warning
704
+
705
+ ### [2.2.1-beta.1] - 2021-06-02
706
+
707
+ #### Fixed
708
+
709
+ - Margin of `Tabs Bar` within `Tabs` for Firefox and Safari
710
+ - SVG of `Icon` is not removed after prop change, e.g. on color change
711
+ - Fullscreen behavior of `Modal` on screens larger than 1760px
712
+
713
+ ### [2.2.0] - 2021-05-19
714
+
715
+ #### Fixed
716
+
717
+ - `Text` inside `Button` now has the proper size on iOS Safari when changing to and from landscape mode
718
+ - `Banner` can now be re-opened after closing
719
+ - Closing one `Banner` will not close other `Banners` on the site
720
+
721
+ ### [2.2.0-beta.2] - 2021-05-12
722
+
723
+ #### Fixed
724
+
725
+ - `Select Wrapper` value changes are now reflected correctly
726
+ - `Select Wrapper` dark theme background color if used with `filter` prop
727
+
728
+ ### [2.2.0-beta.1] - 2021-05-05
729
+
730
+ #### Added
731
+
732
+ - Partial function `getIconLinks()` to preload Porsche Design System Icons
733
+
734
+ #### Fixed
735
+
736
+ - `Text Field Wrapper` spacing in Safari
737
+
738
+ ### [2.2.0-beta.0] - 2021-05-05
739
+
740
+ #### Added
741
+
742
+ - Partial function `getMetaTagsAndIconLinks()` to simplify cross device fav and meta icons
743
+
744
+ ### [2.1.0] - 2021-05-03
745
+
746
+ ### [2.1.0-beta.0] - 2021-05-03
747
+
748
+ #### Added
749
+
750
+ - `Switch`
751
+
752
+ #### Changed
753
+
754
+ - `Text` automatically breaks words/strings into new line being too long to fit inside their container
755
+ - `Headline` automatically breaks words/strings into new line being too long to fit inside their container
756
+ - Extended `Fieldset Wrapper` with `labelSize`, `required`, `state` and `message` properties. If the `Fieldset Wrapper`
757
+ is set to required only the label of the **Fieldset Wrapper** gets an asterisk. It is removed from all wrapped child
758
+ components, as long as they are Porsche Design System form elements.
759
+
760
+ ### [2.0.3] - 2021-04-28
761
+
762
+ ### [2.0.3-beta] - 2021-04-28
763
+
764
+ #### Fixed
765
+
766
+ - Angular: Events firing twice in `Pagination`, `Modal`, `Tabs`, `Tabs Bar` and `Banner` component
767
+
768
+ ### [2.0.2] - 2021-04-21
769
+
770
+ ### [2.0.2-beta.0] - 2021-04-20
771
+
772
+ #### Fixed
773
+
774
+ - TypeScript build errors due to duplicate declarations in `types.d.ts`
775
+
776
+ ### [2.0.1] - 2021-04-16
777
+
778
+ #### Fixed
779
+
780
+ - Visual appearance of `Checkbox Wrapper` in iOS Safari
781
+ - A bug where `Text Field Wrapper` would throw an error when reattaching to DOM too quickly
782
+ - Visual bug in Firefox when zooming out `Text Field Wrapper`, `Checkbox Wrapper` and `Textarea Wrapper`
783
+ - Angular: Streamline component styles in dark theme
784
+
785
+ #### Changed
786
+
787
+ - Aligned focus states of `Checkbox Wrapper` and `Radio Button Wrapper` across browsers
788
+
789
+ ### [2.0.0] - 2021-04-13
790
+
791
+ In keeping with [Semver](https://semver.org/), Porsche Design System v2.0.0 was released due to changes in the API,
792
+ fundamental changes in loading behavior and others. With our new major version `v2.0.0` there are some important changes
793
+ that you should watch out for. To make the migration from `v1.5.x` to our current `v2.0.0` easier, we offer a few
794
+ guidelines.
795
+
796
+ ## General changes / improvements:
797
+
798
+ #### All components, icons, fonts, styles and marque of the Porsche Design System are loaded versioned and chunked from a central CDN
799
+
800
+ This way all web based digital Porsche products share and use the cached and versioned assets regardless of the JS
801
+ framework used to improve loading performance across the Porsche group. Only a tiny (1.4kb sized) Porsche Design System
802
+ loader script gets bundled into your application code. Everything else gets loaded versioned, cached and chunked from a
803
+ central CDN ([read more](https://designsystem.porsche.com/latest/performance/cdn)). However, this also means that you
804
+ will need an **Internet connection** to render the components in a browser (possibly relevant for development stage or
805
+ intranet applications).
806
+
807
+ #### Enabling Micro Frontend Architecture
808
+
809
+ In case of a micro-frontend architecture, multiple instances and versions of the Porsche Design System can be combined
810
+ in a final application by configurable prefixing technique of the Porsche Design System components during runtime.
811
+ Please refer to our framework specific guidelines
812
+ [Vanilla JS](https://designsystem.porsche.com/latest/start-coding/vanilla-js),
813
+ [Angular](https://designsystem.porsche.com/latest/start-coding/angular) and
814
+ [React](https://designsystem.porsche.com/latest/start-coding/react).
815
+
816
+ #### Prevent Flash of Unstyled Content (FOUC) and Flash of Unstyled Text (FOUT)
817
+
818
+ To prevent FOUC/FOUT, the Porsche Design System offers various partials as part of the
819
+ `@porsche-design-system/components-{js|angular|react}` package to ensure all necessary Porsche Design System fonts and
820
+ components are fully loaded. If you've used the `@porsche-design-system/partials` package previously, stop using it and
821
+ replace the integration with the partials provided by `@porsche-design-system/components-{js|angular|react}` package.
822
+ Have a look at our [FOUC/FOUT guidelines](https://designsystem.porsche.com/latest/performance/loading-behaviour).
823
+
824
+ ```diff
825
+ - <%= require('@porsche-design-system/partials').getPorscheDesignSystemCoreStyles() %>
826
+ + <%= require('@porsche-design-system/components-{js|angular|react}/partials').getInitialStyles() %>
827
+
828
+ - <%= require('@porsche-design-system/partials').getFontFaceCSS() %>
829
+ + <%= require('@porsche-design-system/components-{js|angular|react}/partials').getFontFaceStylesheet() %>
830
+
831
+ - <link rel="preload" href="path/to/webfont/nameOfWebFontFile" as="font" type="font/woff2" crossorigin />
832
+ + <%= require('@porsche-design-system/components-{js|angular|react}/partials').getFontLinks({ weights: ['regular', 'semi-bold'] }) %>
833
+ ```
834
+
835
+ #### Added support for China CDN
836
+
837
+ Our CDN is configured to forward requests to Chinese CDN automatically when necessary. So you're good to go without any
838
+ configuration or multiple region specific builds of your application. However, if you are aiming for the maximum
839
+ possible performance in China, you can configure which CDN the Porsche Design System must use. Please follow our
840
+ [CDN guidelines](https://designsystem.porsche.com/latest/performance/cdn) for more information.
841
+
842
+ #### New/optimized components
843
+
844
+ - **Tabs**
845
+ - **Tabs Bar**
846
+ - **Banner**
847
+ - **Modal**
848
+ - Headline
849
+ - Select
850
+ - Pagination
851
+ - Button
852
+ - Button Pure
853
+ - Link
854
+ - Link Pure
855
+ - Spinner
856
+ - Checkbox
857
+ - Radio Button
858
+
859
+ #### Improved TypeScript support for Angular and React
860
+
861
+ To ensure the best possible typing support, we have refactored our Angular and React wrappers which integrate the native
862
+ web components of the Porsche Design System.
863
+
864
+ #### componentsReady() works reliable
865
+
866
+ Because the Porsche Design System components get loaded async at the time they are needed, it might be relevant within
867
+ your application or test automation to know when those have been initialized. Therefore, we provide in all three
868
+ `@porsche-design-system/components-{js|angular|react}')` packages a reliable helper function `componentsReady()`.
869
+ [Read more about it](https://designsystem.porsche.com/latest/helpers/components-ready).
870
+
871
+ #### Removed "blur on focus"
872
+
873
+ Now focus styling is only applied when you navigate through keyboard and ignored by mouse interaction for browsers
874
+ supporting `:focus-visible` otherwise it will fallback to `:focus` CSS implementation.
875
+
876
+ #### Changed focus styling for a better compromise between accessibility and visual appearance
877
+
878
+ Color and outline of general focus styling has changed to `currentColor` for light/dark theme with an outline of 1px
879
+ width/offset. If you have custom components build with the usage of our `@porsche-design-system/utilities` package then
880
+ update it to the latest version (we also provide a focus
881
+ [SCSS mixin](https://designsystem.porsche.com/latest/utilities/scss/functions) and
882
+ [JS function](https://designsystem.porsche.com/latest/utilities/js/functions)).
883
+
884
+ #### Improved geometry of Porsche Next font
885
+
886
+ For better alignment and readability we've changed the geometry of the Porsche Next font which results in a visual
887
+ change of font size and spacing.
888
+
889
+ #### Dropped support for IE11 and EdgeHTML according to Porsche's official browser strategy 2021
890
+
891
+ If you still need to support these browsers, you have to stick to `v1.5.x`. We offer a Browser Notification package
892
+ `@porsche-design-system/browser-notification` to alert users that these browsers are no longer supported. It supports a
893
+ blocking layer (to be used with Porsche Design System `v2.x`), or a dismissible banner (to be used with Porsche Design
894
+ System `v1.x`). Please refer to our
895
+ [Browser compatibility guidelines](https://designsystem.porsche.com/latest/help/browser-compatibility).
896
+
897
+ #### Changed default type of Button and Button Pure
898
+
899
+ To be in sync with native `<button>` behavior we've changed the default `type` of **Button** and **Button Pure**
900
+ component. Those components will render a button within their Shadow DOM as `<button type="submit">` ( previously
901
+ `<button type="button">`).
902
+
903
+ - `submit`: The button submits the form data to the server. This is the default if the attribute is not specified for
904
+ buttons associated with a `<form>`, or if the attribute is an empty or invalid value.
905
+ - `button`: The button has no default behavior, and does nothing when pressed by default. It can have client-side
906
+ scripts listen to the element's events, which are triggered when the events occur.
907
+
908
+ #### Changed support for wrapped links around Link, Link Pure and Link Social component
909
+
910
+ Due to the support for setting links (`<a href="#">`) in our **Link**, **Link Pure** and **Link Social** components as
911
+ child, we've removed support for styling the anchor tag (`<a>`) when it surrounds the component. So we recommend
912
+ changing the position of the `<a>` tag from wrapping the component to a direct slot (child) of it.
913
+
914
+ ```diff
915
+ - <a href="#"><p-link>Some label</p-link></a>
916
+ + <p-link><a href="#">Some label</a></p-link>
917
+
918
+ - <a href="#"><p-link-pure>Some label</p-link-pure></a>
919
+ + <p-link-pure><a href="#">Some label</a></p-link-pure>
920
+
921
+ - <a href="#"><p-link-social>Some label</p-link-social></a>
922
+ + <p-link-social><a href="#">Some label</a></p-link-social>
923
+ ```
924
+
925
+ #### Automatic \* asterisk symbol to form field labels
926
+
927
+ We added an automatic generated _ asterisk symbol to form field labels which have the required attribute. This might
928
+ lead to a doubled _ symbol if you set one by yourself.
929
+
930
+ ```diff
931
+ - <p-text-field-wrapper label="Some label *"><input type="text" name="some-name" required /></p-text-field-wrapper>
932
+ + <p-text-field-wrapper label="Some label"><input type="text" name="some-name" required /></p-text-field-wrapper>
933
+
934
+ - <p-checkbox-wrapper label="Some label *"><input type="checkbox" name="some-name" required /></p-checkbox-wrapper>
935
+ + <p-checkbox-wrapper label="Some label"><input type="checkbox" name="some-name" required /></p-checkbox-wrapper>
936
+
937
+ - <p-radio-button-wrapper label="Some label *"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
938
+ + <p-radio-button-wrapper label="Some label"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
939
+
940
+ - <p-radio-button-wrapper label="Some label *"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
941
+ + <p-radio-button-wrapper label="Some label"><input type="radio" name="some-name" required /></p-radio-button-wrapper>
942
+
943
+ - <p-textarea-wrapper label="Some label *"><textarea name="some-name" required></textarea></p-textarea-wrapper>
944
+ + <p-textarea-wrapper label="Some label"><textarea name="some-name" required></textarea></p-textarea-wrapper>
945
+
946
+ - <p-select-wrapper label="Some label *"><select name="some-name" required><option>A</option></select></p-select-wrapper>
947
+ + <p-select-wrapper label="Some label"><select name="some-name" required><option>A</option></select></p-select-wrapper>
948
+ ```
949
+
950
+ #### Shadow DOM
951
+
952
+ `Flex`, `Flex Item`, `Grid` and `Grid Item` now use Shadow DOM, thus you are not able to overwrite styles defined by
953
+ these components any longer.
954
+
955
+ ---
956
+
957
+ ## Angular
958
+
959
+ #### Integration of Angular components
960
+
961
+ In the past it was possible to provide a token called `PREVENT_WEB_COMPONENTS_REGISTRATION` which prevented the
962
+ registration of the Porsche Design System components and loading of polyfills. Due to the fact that we no longer provide
963
+ / need poly filling, we have completely removed the token. For advanced usage please
964
+ [read further](https://designsystem.porsche.com/latest/start-coding/angular).
965
+
966
+ ---
967
+
968
+ ## React
969
+
970
+ #### Integration of React components
971
+
972
+ In the past `@porsche-design-system/components-react` components have initialized the **Porsche Design System Loader**
973
+ automatically as soon as a component was imported. With `v2.x` you have to import the `PorscheDesignSystemProvider` once
974
+ in your `index.tsx` which then initializes the **Porsche Design System Loader**, e.g. like:
975
+
976
+ ```diff
977
+ // index.tsx
978
+
979
+ import ReactDOM from 'react-dom';
980
+ import { PorscheDesignSystemProvider } from '@porsche-design-system/components-react';
981
+ import { App } from './App';
982
+
983
+ ReactDOM.render(
984
+ <React.StrictMode>
985
+ + <PorscheDesignSystemProvider>
986
+ <App />
987
+ + </PorscheDesignSystemProvider>
988
+ </React.StrictMode>,
989
+ document.getElementById('root')
990
+ );
991
+ ```
992
+
993
+ For advanced usage please [read further](https://designsystem.porsche.com/latest/start-coding/react).
994
+
995
+ #### Jsdom Polyfill for React / Jest / jsdom test automation
996
+
997
+ We removed test mocks for React / Jest / jsdom as Shadow DOM is supported since jsdom v12.2.0. Instead, we provide a
998
+ Jsdom Polyfill (exclusivly for `@porsche-design-system/components-react` package) fixing missing implementation of jsdom
999
+ which the Porsche Design System relies on. **Note:** If your test includes Porsche Design System components, make sure
1000
+ to wrap the component you want to test with a PorscheDesignSystemProvider in order to avoid exceptions. For more
1001
+ information please [read further](https://designsystem.porsche.com/latest/start-coding/react).
1002
+
1003
+ ---
1004
+
1005
+ ## Vanilla JS
1006
+
1007
+ #### Integration of Vanilla JS components
1008
+
1009
+ With `v1.x` of the Porsche Design System you've had to copy all needed JS files of
1010
+ `@porsche-design-system/components-js` into your target directory and include the ES5 and ESM loader snippet. Now you
1011
+ only need to copy one `index.js` file and initialize the Porsche Design System like in the example below:
1012
+
1013
+ ```diff
1014
+ <!DOCTYPE html>
1015
+ <html lang="en">
1016
+ <head>
1017
+ <meta charset="utf-8">
1018
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
1019
+ <title>Porsche Design System</title>
1020
+ - <script nomodule src="PATH/TO/PACKAGE/@porsche-design-system/components-js/dist/porsche-design-system/porsche-design-system.js"></script>
1021
+ - <script type="module" src="PATH/TO/PACKAGE/@porsche-design-system/components-js/dist/porsche-design-system/porsche-design-system.esm.js"></script>
1022
+ + <script src="PATH/TO/PACKAGE/@porsche-design-system/components-js/index.js"></script>
1023
+ </head>
1024
+ <body>
1025
+ + <script type="text/javascript">
1026
+ + porscheDesignSystem.load();
1027
+ + </script>
1028
+ <p-headline variant="headline-1">Some text</p-headline>
1029
+ </body>
1030
+ </html>
1031
+ ```
1032
+
1033
+ For advanced usage please [read further](https://designsystem.porsche.com/latest/start-coding/vanilla-js).
1034
+
1035
+ ---
1036
+
1037
+ ### [2.0.0-rc.10] - 2021-04-12
1038
+
1039
+ #### Changed
1040
+
1041
+ - `Tabs` and `Tabs Bar` now respect dynamic additions / removals of `p-tabs-item`, `a` and `button` elements. Make sure
1042
+ to update the `activeTabIndex` when mutating elements
1043
+ - Improved performance of `Text`, `Button Pure` and `Link Pure` when `size` is not `inherit`
1044
+
1045
+ #### Added
1046
+
1047
+ - `Grid` now has a `wrap` and `gutter` property
1048
+ - Components (`Grid Item`, `Flex Item`, `Tabs Item` and `Text List Item`) that require a specific parent (`Grid`,
1049
+ `Flex`, `Tabs` and `Text List`) will now throw an error if used without that parent
1050
+
1051
+ #### Fixed
1052
+
1053
+ - Visual appearance of `Checkbox Wrapper` and `Radio Button Wrapper` reflect the state of the wrapped `input` element
1054
+
1055
+ ### [2.0.0-rc.9] - 2021-03-26
1056
+
1057
+ #### Added
1058
+
1059
+ - `Button Group` component
1060
+ - Fullscreen property for `Modal` on mobile
1061
+
1062
+ #### Changed
1063
+
1064
+ - Spacings, heading and sizes of `Modal`
1065
+
1066
+ #### Fixed
1067
+
1068
+ - Prevent duplicate loading of `porsche-design-system.v2.x.HASH.js` chunk when using `getComponentChunkLinks()` partial
1069
+
1070
+ ### [2.0.0-rc.8] - 2021-03-17
1071
+
1072
+ #### Added
1073
+
1074
+ - Support for full height `Content Wrapper` with flex
1075
+ - `Tabs Bar` now supports `undefined` as `activeTabIndex`
1076
+
1077
+ #### Changed
1078
+
1079
+ - `Tabs Bar` has a new default `activeTabIndex`, which is `undefined`
1080
+ - `Tabs Bar` does not work by itself anymore. The `activeTabIndex` needs to be controlled from the outside
1081
+ ([read more](https://designsystem.porsche.com/latest/components/tabs-bar/examples))
1082
+ - Background Color of `Select Wrapper` in `dark` theme to meet accessibility criteria
1083
+
1084
+ ### [2.0.0-rc.7] - 2021-03-15
1085
+
1086
+ #### Fixed
1087
+
1088
+ - Make shadowed `Flex` and `Grid` work in Firefox + Safari
1089
+
1090
+ ### [2.0.0-rc.6] - 2021-03-11
1091
+
1092
+ #### Changed
1093
+
1094
+ - Make `Grid` and `Grid Item` use Shadow DOM
1095
+ - Make `Flex` and `Flex Item` use Shadow DOM
1096
+
1097
+ ### [2.0.0-rc.5] - 2021-03-09
1098
+
1099
+ #### Added
1100
+
1101
+ - Configurable background color of `Content Wrapper`
1102
+ - `italic` font-style in `Text` is now overridden with `normal`
1103
+
1104
+ #### Fixed
1105
+
1106
+ - Usage of `Select Wrapper` within custom elements
1107
+ - A bug that caused `Spinner` to be displayed in a wrong size
1108
+
1109
+ ### [2.0.0-rc.4] - 2021-03-01
1110
+
1111
+ #### Changed
1112
+
1113
+ - Filter of `Select Wrapper` supports substring search
1114
+
1115
+ #### Fixed
1116
+
1117
+ - Build error in SSR
1118
+
1119
+ ### [2.0.0-rc.3] - 2021-02-17
1120
+
1121
+ #### Added
1122
+
1123
+ - React: utility function `skipCheckForPorscheDesignSystemProviderDuringTests`
1124
+ - React: tree shaking for component wrappers
1125
+
1126
+ #### Fixed
1127
+
1128
+ - Angular: error in `Checkbox Wrapper`, `Radio Button Wrapper` and `Text Field Wrapper` when `input[type]` is bound
1129
+
1130
+ ### [2.0.0-rc.2] - 2021-02-12
1131
+
1132
+ #### Added
1133
+
1134
+ - Validate usage of `Checkbox Wrapper`, `Radio Button Wrapper`, `Select Wrapper`, `Text Field Wrapper` and
1135
+ `Textarea Wrapper`
1136
+
1137
+ ### [2.0.0-rc.1] - 2021-02-04
1138
+
1139
+ #### Added
1140
+
1141
+ - Partial function `getComponentChunkLinks()` to preload Porsche Design System Components
1142
+
1143
+ #### Changed
1144
+
1145
+ - Added a space before asterisk (`*`) when `input`, `textarea` or `select` have `required` attribute within form wrapper
1146
+ components
1147
+ - Renamed partial `getFontLinks()` option from `weight` to `weights`
1148
+
1149
+ #### Fixed
1150
+
1151
+ - A bug in `Tabs Bar` where the nextButton was mistakenly rendered.
1152
+ - A bug where `Icon` was not rendered when using `lazy` property.
1153
+ - A bug in `Text Field Wrapper` with input type password where characters would overlap the icon.
1154
+
1155
+ ### [2.0.0-rc.0] - 2021-01-29
1156
+
1157
+ #### Added
1158
+
1159
+ - Link support for `Marque`
1160
+ - Sizing options `'responsive' | 'small' | 'medium'` for `Marque`
1161
+
1162
+ #### Changed
1163
+
1164
+ - Angular: added static `load()` function `PorscheDesignSystemModule` for custom prefix
1165
+ - Hide up/down spin button when using **Text Field** with `type="number"` in Firefox
1166
+
1167
+ #### Fixed
1168
+
1169
+ - Angular: typings
1170
+ - React: correct handling of `ref` property
1171
+ - Unhandled exception in `Select Wrapper` if `selected` and `disabled` attributes are set on the same option
1172
+ - A bug in `Tabs Bar` where scrolling was broken when a tab was selected
1173
+ - A bug in `Tabs Bar` where the `nextButton` was always rendered
1174
+
1175
+ ### [2.0.0-alpha.13] - 2021-01-26
1176
+
1177
+ #### Added
1178
+
1179
+ - Partial function `getFontLinks()` to prevent **Flash of Unstyled Text** (FOUT)
1180
+
1181
+ #### Fixed
1182
+
1183
+ - React: correct handling of `className` property
1184
+
1185
+ ### [2.0.0-alpha.12] - 2021-01-20
1186
+
1187
+ #### Added
1188
+
1189
+ - Partial function `getInitialStyles()` to prevent **Flash of Unstyled Content** (FOUC)
1190
+ - Partial function `getFontFaceStylesheet()` to prevent **Flash of Unstyled Text** (FOUT)
1191
+
1192
+ #### Changed
1193
+
1194
+ - React: `PorscheDesignSystemProvider` needs to wrap application
1195
+ - React: component props have to be camelCase
1196
+ - React: `PorscheDesignSystemProvider` is needed while testing components
1197
+
1198
+ #### Fixed
1199
+
1200
+ - React: typings
1201
+ - React: support of objects for property values
1202
+
1203
+ #### Removed
1204
+
1205
+ - React: `getPrefixedComponents`, prefixing is handled by `PorscheDesignSystemProvider`
1206
+
1207
+ ### [2.0.0-alpha.11] - 2021-01-08
1208
+
1209
+ #### Changed
1210
+
1211
+ - Precision of relative line height
1212
+ - Changed color of `neutral contrast low`
1213
+
1214
+ ### [2.0.0-alpha.10] - 2020-12-14
1215
+
1216
+ #### Added
1217
+
1218
+ - `native` property to `Select Wrapper` to force rendering of native Browser select dropdown
1219
+ - Extended flexibility of `Headline`
1220
+
1221
+ #### Changed
1222
+
1223
+ - Some styling improvements of `Select Wrapper`
1224
+
1225
+ #### Fixed
1226
+
1227
+ - Jsdom Polyfill `fetch` error
1228
+
1229
+ ### [2.0.0-alpha.9] - 2020-12-09
1230
+
1231
+ ### Fixed
1232
+
1233
+ - Improved reliability of `componentsReady()`
1234
+
1235
+ #### Changed
1236
+
1237
+ - Jsdom Polyfill `console.warn` behaviour
1238
+
1239
+ ### [2.0.0-alpha.8] - 2020-12-03
1240
+
1241
+ ### Fixed
1242
+
1243
+ - A bug where `Modal` did not remove `overflow=hidden` on document body.
1244
+
1245
+ ### [2.0.0-alpha.7] - 2020-11-26
1246
+
1247
+ #### Added
1248
+
1249
+ - Jsdom Polyfill
1250
+
1251
+ #### Removed
1252
+
1253
+ - Jsdom Mocks
1254
+ - Global "blur on focus" script
1255
+
1256
+ #### Changed
1257
+
1258
+ - Default dropdown direction of `SelectWrapper` from `down` to `auto`
1259
+ - Made API of `Tabs` consistent with `Tabs Bar`
1260
+ - Removed transition for focus styling
1261
+ - Use `:focus-visible` as default and `:focus` as fallback for focusable elements
1262
+
1263
+ #### Fixed
1264
+
1265
+ - The Selected element of `SelectWrapper` dropdown keeps now in sync with native selection if changed programmatically
1266
+ - Invalid search results get cleared if `SelectWrapper` becomes focus state
1267
+ - Some bugs in `TabsBar`
1268
+ - Minification of dynamic slotted content styles
1269
+ - An issue where `Pagination` throws console errors if disconnected from dom.
1270
+
1271
+ ### [2.0.0-alpha.6] - 2020-10-28
1272
+
1273
+ #### Changed
1274
+
1275
+ - default `type` of `Button` and `Button Pure` to `submit`
1276
+
1277
+ #### Fixed
1278
+
1279
+ - Typings
1280
+
1281
+ ### [2.0.0-alpha.5] - 2020-10-26
1282
+
1283
+ #### Added
1284
+
1285
+ - `Modal` component
1286
+
1287
+ #### Fixed
1288
+
1289
+ - Typing for `pageChange` event of `Pagination` component
1290
+ - Typings
1291
+
1292
+ #### Changed
1293
+
1294
+ - Focus styling
1295
+
1296
+ ### [2.0.0-alpha.4] - 2020-10-14
1297
+
1298
+ #### Added
1299
+
1300
+ - Custom filter to `Select Wrapper` component
1301
+ - DropDown direction property to `Select Wrapper` component
1302
+ - Display `*` after label when `input`, `textarea` or `select` have `required` attribute within form wrapper components
1303
+ - `Tabs` component
1304
+ - `Tabs Bar` component
1305
+ - `Banner` component
1306
+
1307
+ #### Removed
1308
+
1309
+ - Default `position: relative;` style of `Link Pure` and `Button Pure`
1310
+
1311
+ #### Fixed
1312
+
1313
+ - `Spinner` zooming bug on Safari
1314
+
1315
+ ### [2.0.0-alpha.3] - 2020-09-11
1316
+
1317
+ #### Added
1318
+
1319
+ - Support to load assets from China CDN directly via browser flag: `PORSCHE_DESIGN_SYSTEM_CDN = 'cn';`
1320
+
1321
+ #### Removed
1322
+
1323
+ - Support for `<a>` wrapped `Link` and `Link Pure`
1324
+
1325
+ ### [2.0.0-alpha.2] - 2020-08-20
1326
+
1327
+ ### [2.0.0-alpha.1] - 2020-08-17
1328
+
1329
+ #### Changed
1330
+
1331
+ - Removed classnames dependency
1332
+ - Stencil Core `taskQueue` from `congestionAsync` to `async` for more performant component rendering
1333
+
1334
+ #### Fixed
1335
+
1336
+ - Focus input on label click of `Checkbox Wrapper` and `Radio Button Wrapper`
1337
+
1338
+ ### [1.5.6] - 2020-10-15
1339
+
1340
+ ### [1.5.6-rc.0] - 2020-10-13
1341
+
1342
+ ### Fixed
1343
+
1344
+ - `Spinner` zooming bug on Safari
1345
+
1346
+ ### [1.5.5] - 2020-09-11
1347
+
1348
+ ### [1.5.5-rc.0] - 2020-09-07
1349
+
1350
+ ### Changed
1351
+
1352
+ - Deprecated stencil lifecycle-method `componentDidUnload` to `disconnectedCallback` to fix "`selectObserver` is
1353
+ undefined" bug in `Select Wrapper` and `Pagination`
1354
+
1355
+ ### [1.5.4] - 2020-08-25
1356
+
1357
+ ### [1.5.4-rc.0] - 2020-08-17
1358
+
1359
+ #### Changed
1360
+
1361
+ - Removed classnames dependency
1362
+ - Stencil Core `taskQueue` from `congestionAsync` to `async` for more performant component rendering
1363
+
1364
+ #### Fixed
1365
+
1366
+ - Focus input on label click of `Checkbox Wrapper` and `Radio Button Wrapper`
1367
+ - Fix typings for `orientation` of `Divider` component
1368
+
1369
+ ### [2.0.0-alpha.0] - 2020-08-06
1370
+
1371
+ #### Added
1372
+
1373
+ - **Experimental:** Optional web component scoping mechanism during runtime to enable micro service architecture
1374
+
1375
+ #### Changed
1376
+
1377
+ - Web components get lazy loaded from central CDN to improve caching strategy across Porsche's digital eco system
1378
+
1379
+ #### Removed
1380
+
1381
+ - Stop browser support for **IE11** and **EdgeHTML**
1382
+
1383
+ #### Fixed
1384
+
1385
+ - Mix of `Optgroups` and `Options` on same level in `Select Wrapper` component
1386
+ - Fix typings for `orientation` of `Divider` component
1387
+
1388
+ ### [1.5.3] - 2020-08-10
1389
+
1390
+ ### [1.5.3-rc.0] - 2020-08-10
1391
+
1392
+ #### Fixed
1393
+
1394
+ - Mix of `Optgroups` and `Options` on same level in `Select Wrapper` component
1395
+
1396
+ ### [1.5.2] - 2020-07-22
1397
+
1398
+ #### Fixed
1399
+
1400
+ - Dispatch change event in `Select Wrapper`
1401
+ - Stencil react-output-target SSR Bug
1402
+
1403
+ ### [1.5.1] - 2020-07-20
1404
+
1405
+ #### Fixed
1406
+
1407
+ - SVGO settings for icons
1408
+ - Angular bug which causes `ngcc` to fail
1409
+
1410
+ ### [1.5.0] - 2020-07-16
1411
+
1412
+ #### Added
1413
+
1414
+ - Icons (active-cabin-ventilation, battery-full, bell, bookmark, car-battery, charging-active, charging-state, climate,
1415
+ climate-control, garage, horn, key, map, parking-brake, parking-light, preheating, send, shopping-bag, sidelights,
1416
+ user-manual, wrenches)
1417
+
1418
+ #### Changed
1419
+
1420
+ - Icons (arrow-first, arrow-last, battery-empty, car, card, charging-station, question)
1421
+
1422
+ #### Fixed
1423
+
1424
+ - Porsche Marque images
1425
+
1426
+ ### [1.5.0-rc.2] - 2020-07-06
1427
+
1428
+ ### [1.5.0-rc.1] - 2020-07-06
1429
+
1430
+ #### Added
1431
+
1432
+ - **Notification Neutral** color to `color` property of `p-text` and `p-icon`
1433
+
1434
+ ### [1.5.0-rc.0] - 2020-06-25
1435
+
1436
+ #### Added
1437
+
1438
+ - `Fieldset Wrapper` component
1439
+ - Improved SEO of `p-headline` and `p-text`: Added possibility to write semantic HTML tags (e.g. `<h1>-<h6>` or `<p>`,
1440
+ `<blockquote>`, etc.) directly as slotted content.
1441
+ - Possibility to include anchor tags directly as slots of `Link`, `Link Pure` and `Link Social`
1442
+ - `Text` new `weight` property `semibold`
1443
+ - `Button Pure` label with subline pattern as slot
1444
+ - `Link Pure` label with subline pattern as slot
1445
+
1446
+ #### Changed
1447
+
1448
+ - `Select Wrapper` is now ready for the catwalk. It is dressed now with a custom drop down list box and gets naked by
1449
+ default on touch devices.
1450
+
1451
+ #### Fixed
1452
+
1453
+ - Minor accessibility improvements of `icons` and `Text Field`
1454
+ - Remove native number spinner buttons of `Text Field` with type text for Firefox
1455
+ - An issue with `Button` and `Button Pure` and their `disabled` attribute
1456
+
1457
+ ### [1.4.0] - 2020-05-14
1458
+
1459
+ ### [1.4.0-rc.3] - 2020-05-08
1460
+
1461
+ #### Added
1462
+
1463
+ - `Text List`
1464
+
1465
+ #### Changed
1466
+
1467
+ - Improve caching strategy for fonts by content-based hash
1468
+ - Improve caching strategy for marque by content-based hash
1469
+ - Dimensions and sharpness of marque
1470
+ - Props for `Content Wrapper`
1471
+
1472
+ ### [1.4.0-rc.2] - 2020-05-06
1473
+
1474
+ #### Added
1475
+
1476
+ - `Content Wrapper`
1477
+ - Description property to `p-text-field-wrapper`, `p-textarea-wrapper` and `p-select-wrapper`
1478
+ - `Link Social`
1479
+
1480
+ #### Changed
1481
+
1482
+ - Improve accessibility of error and success states of form elements
1483
+ - Aria-invalid attribute of form elements if they are in error state is now managed by component
1484
+ - Rename icon name `configure` to `configurate` (prevents breaking change compared to stable v1.3.0)
1485
+ - Improve `p-icon` loading behavior
1486
+
1487
+ #### Fixed
1488
+
1489
+ - Display of wrong icons
1490
+
1491
+ #### Removed
1492
+
1493
+ - `safe-zone` property of `p-grid` (`Content Wrapper` should be used instead)
1494
+
1495
+ ### [1.4.0-rc.1] - 2020-04-27
1496
+
1497
+ #### Added
1498
+
1499
+ - Add `safe-zone` property to `p-grid` for outer grid margin, max-width and centering
1500
+ - Submit button with search icon to `p-textfield-wrapper` type search
1501
+
1502
+ #### Changed
1503
+
1504
+ - Background color of readonly state in components `p-textfield-wrapper` and `p-textarea-wrapper`
1505
+ - Visual appearance of icons
1506
+ - Improve caching strategy for icons by content-based hash
1507
+ - Cursor of Radio, Checkbox and Select
1508
+ - Fixed naming of Mock from `p-textfield-wrapper` to `p-text-field-wrapper`
1509
+
1510
+ #### Fixed
1511
+
1512
+ - Icon loading mechanism
1513
+
1514
+ ### [1.4.0-rc.0] - 2020-04-09
1515
+
1516
+ #### Added
1517
+
1518
+ - SSR support
1519
+
1520
+ ### [1.3.0] - 2020-04-08
1521
+
1522
+ #### Added
1523
+
1524
+ - New headline size `headline-5` to `p-headline`
1525
+ - Test Mocks
1526
+
1527
+ #### Fixed
1528
+
1529
+ - Text styling of Select component on focus in IE11 and Chrome on Windows 10
1530
+
1531
+ ### [1.3.0-rc.0] - 2020-04-03
1532
+
1533
+ #### Fixed
1534
+
1535
+ - Improve form elements
1536
+
1537
+ ### [1.2.0] - 2020-03-25
1538
+
1539
+ #### Added
1540
+
1541
+ - `Divider`
1542
+ - Hover state for form elements
1543
+
1544
+ #### Fixed
1545
+
1546
+ - Support label text of form elements for Screen readers
1547
+
1548
+ ### [1.1.2] - 2020-03-17
1549
+
1550
+ #### Changed
1551
+
1552
+ - Notification colors
1553
+
1554
+ ### [1.1.1] - 2020-03-13
1555
+
1556
+ #### Changed
1557
+
1558
+ - Icon of `Checkbox` indeterminate state
1559
+
1560
+ ### [1.1.0] - 2020-03-11
1561
+
1562
+ #### Fixed
1563
+
1564
+ - Minor improvements
1565
+
1566
+ ### [1.1.0-rc.0] - 2020-03-02
1567
+
1568
+ #### Added
1569
+
1570
+ - `Select Wrapper`
1571
+ - `Checkbox Wrapper`
1572
+ - `Radio Button Wrapper`
1573
+ - `Textarea Wrapper`
1574
+
1575
+ #### Fixed
1576
+
1577
+ - `Text Field Wrapper` toggle password visibility
1578
+
1579
+ ### [1.0.3] - 2020-02-13
1580
+
1581
+ #### Fixed
1582
+
1583
+ - JS framework compatibility
1584
+
1585
+ ### [1.1.0-0] - 2020-02-06
1586
+
1587
+ #### Added
1588
+
1589
+ - `Text Field Wrapper`
1590
+
1591
+ #### Changed
1592
+
1593
+ - Add proper cursor for disabled state for `Button` and `Button Pure`
1594
+
1595
+ ### [1.0.2] - 2020-02-04
1596
+
1597
+ #### Fixed
1598
+
1599
+ - Inheritable styling of slotted content
1600
+
1601
+ ### [1.0.1] - 2020-01-30
1602
+
1603
+ #### Added
1604
+
1605
+ - Clickable area of `Link Pure` and `Button Pure` is optionally configurable by defining padding on host element
1606
+
1607
+ ### [1.0.0] - 2020-01-28
1608
+
1609
+ #### Added
1610
+
1611
+ - Cursor pointer on hover for `Button` and `Button Pure`
1612
+ - Line-height gets calculated based on Porsche type-scaling formula automatically for `Text`, `Link Pure` and
1613
+ `Button Pure`
1614
+ - Test helper function `componentsReady()` which indicates when lazy loaded components fully have loaded
1615
+
1616
+ #### Changed
1617
+
1618
+ - Update CDN asset paths
1619
+ - Improve font-weight definitions
1620
+ - Rename and optimize neutral colors for `Icon` and `Text`
1621
+
1622
+ ### [1.0.0-rc.1] - 2019-12-13
1623
+
1624
+ #### Added
1625
+
1626
+ - `Headline`
1627
+ - `Text`
1628
+ - `Marque`
1629
+ - `Button`
1630
+ - `Button Pure`
1631
+ - `Spinner`
1632
+ - `Icon`
1633
+ - `Flex`
1634
+ - `Grid`
1635
+ - `Link`
1636
+ - `Link Pure`
1637
+ - `Pagination`
1638
+ - "Blur on focus"