@porsche-design-system/components-react 3.29.0 → 3.30.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 (25) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/cjs/lib/components/checkbox.wrapper.cjs +2 -1
  3. package/cjs/lib/components/pin-code.wrapper.cjs +3 -3
  4. package/esm/lib/components/checkbox.wrapper.d.ts +15 -5
  5. package/esm/lib/components/checkbox.wrapper.mjs +2 -1
  6. package/esm/lib/components/pin-code.wrapper.d.ts +8 -0
  7. package/esm/lib/components/pin-code.wrapper.mjs +3 -3
  8. package/esm/lib/types.d.ts +29 -0
  9. package/package.json +2 -2
  10. package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +58 -43
  11. package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +2 -2
  12. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox.wrapper.cjs +2 -1
  13. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/pin-code.wrapper.cjs +4 -4
  14. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.cjs +4 -0
  15. package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.cjs +1 -1
  16. package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +58 -43
  17. package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +2 -2
  18. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox.wrapper.mjs +2 -1
  19. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/pin-code.wrapper.mjs +4 -4
  20. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.mjs +4 -0
  21. package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.mjs +1 -1
  22. package/ssr/esm/lib/components/checkbox.wrapper.d.ts +15 -5
  23. package/ssr/esm/lib/components/pin-code.wrapper.d.ts +8 -0
  24. package/ssr/esm/lib/dsr-components/checkbox.d.ts +4 -0
  25. package/ssr/esm/lib/types.d.ts +29 -0
@@ -7,21 +7,21 @@ var hooks = require('../../hooks.cjs');
7
7
  var utils = require('../../utils.cjs');
8
8
  var pinCode = require('../dsr-components/pin-code.cjs');
9
9
 
10
- const PPinCode = /*#__PURE__*/ react.forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
10
+ const PPinCode = /*#__PURE__*/ react.forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
11
11
  const elementRef = react.useRef(undefined);
12
12
  hooks.useEventCallback(elementRef, 'update', onUpdate);
13
13
  const WebComponentTag = hooks.usePrefix('p-pin-code');
14
- const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
14
+ const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || hooks.useTheme(), type, value];
15
15
  hooks.useBrowserLayoutEffect(() => {
16
16
  const { current } = elementRef;
17
- ['description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
17
+ ['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
18
18
  }, propsToSync);
19
19
  const props = {
20
20
  ...rest,
21
21
  // @ts-ignore
22
22
  ...(!process.browser
23
23
  ? {
24
- children: (jsxRuntime.jsx(pinCode.DSRPinCode, { description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || hooks.useTheme(), type, value, children })),
24
+ children: (jsxRuntime.jsx(pinCode.DSRPinCode, { compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || hooks.useTheme(), type, value, children })),
25
25
  }
26
26
  : {
27
27
  children,
@@ -20,6 +20,10 @@ class DSRCheckbox extends react.Component {
20
20
  host;
21
21
  // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
22
22
  // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
23
+ /**
24
+ * Emitted when checkbox checked property is changed.
25
+ * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
26
+ */
23
27
  internals;
24
28
  initialLoading = false;
25
29
  defaultChecked;
@@ -39,7 +39,7 @@ class DSRPinCode extends react.Component {
39
39
  // reset array of input elements
40
40
  this.inputElements = [];
41
41
  const currentInputId = 'current-input';
42
- const style = minifyCss.minifyCss(stylesEntry.getPinCodeCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.theme));
42
+ const style = minifyCss.minifyCss(stylesEntry.getPinCodeCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.compact, this.props.theme));
43
43
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [Array.from(new Array(this.props.length), (_, index) => (jsxRuntime.jsx("input", { name: this.props.name, form: this.props.form, ...(utilsEntry.isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${utilsEntry.labelId} ${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
44
44
  , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
45
45
  }
@@ -3882,7 +3882,7 @@ hasWindow &&
3882
3882
  const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
3883
3883
 
3884
3884
  // index.ts
3885
- var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
3885
+ var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
3886
3886
 
3887
3887
  const hasDocument = typeof document !== 'undefined';
3888
3888
 
@@ -4365,7 +4365,12 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
4365
4365
  return getCss({
4366
4366
  '@global': {
4367
4367
  ':host': {
4368
- display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
4368
+ display: 'flex',
4369
+ alignItems: 'stretch',
4370
+ // Safari workaround to scale the tile properly
4371
+ '@supports (-webkit-hyphens: auto)': {
4372
+ alignItems: 'baseline',
4373
+ },
4369
4374
  hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
4370
4375
  ...addImportantToEachRule({
4371
4376
  ...colorSchemeStyles,
@@ -4419,7 +4424,10 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
4419
4424
  })),
4420
4425
  cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
4421
4426
  width: '100%', // necessary in case tile content overflows in grid or flex context
4422
- height: '100%', // necessary in case tile content overflows in grid or flex context
4427
+ // Safari workaround to scale the tile properly
4428
+ '@supports (-webkit-hyphens: auto)': {
4429
+ height: '100%',
4430
+ },
4423
4431
  display: 'grid',
4424
4432
  gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
4425
4433
  ...(hasGradient &&
@@ -6037,7 +6045,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
6037
6045
  const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
6038
6046
  // Determines the scaling factor for the input-number size. In "compact" mode, it uses 0.5 to achieve a 36px input-number (compact size).
6039
6047
  // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputBaseScaling`.
6040
- const getScalingVar = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
6048
+ const getScalingVar$1 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
6041
6049
  /**
6042
6050
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
6043
6051
  */
@@ -6047,7 +6055,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
6047
6055
  */
6048
6056
  const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
6049
6057
  const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
6050
- const scalingVar = getScalingVar(compact);
6058
+ const scalingVar = getScalingVar$1(compact);
6051
6059
  const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
6052
6060
  const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
6053
6061
  const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
@@ -8245,7 +8253,12 @@ direction, hasDescription) => {
8245
8253
  return getCss({
8246
8254
  '@global': {
8247
8255
  ':host': {
8248
- display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
8256
+ display: 'flex',
8257
+ alignItems: 'stretch',
8258
+ // Safari workaround to scale the tile properly
8259
+ '@supports (-webkit-hyphens: auto)': {
8260
+ alignItems: 'baseline',
8261
+ },
8249
8262
  hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
8250
8263
  ...addImportantToEachRule({
8251
8264
  ...colorSchemeStyles,
@@ -8305,7 +8318,10 @@ direction, hasDescription) => {
8305
8318
  aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
8306
8319
  })),
8307
8320
  width: '100%', // necessary in case tile content overflows in grid or flex context
8308
- height: '100%', // necessary in case tile content overflows in grid or flex context
8321
+ // Safari workaround to scale the tile properly
8322
+ '@supports (-webkit-hyphens: auto)': {
8323
+ height: '100%',
8324
+ },
8309
8325
  display: 'grid',
8310
8326
  gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
8311
8327
  '&::after': {
@@ -8519,7 +8535,12 @@ background, align, compact, hasGradient, isDisabled) => {
8519
8535
  return getCss({
8520
8536
  '@global': {
8521
8537
  ':host': {
8522
- display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
8538
+ display: 'flex',
8539
+ alignItems: 'stretch',
8540
+ // Safari workaround to scale the tile properly
8541
+ '@supports (-webkit-hyphens: auto)': {
8542
+ alignItems: 'baseline',
8543
+ },
8523
8544
  hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
8524
8545
  ...addImportantToEachRule({
8525
8546
  ...colorSchemeStyles,
@@ -8572,7 +8593,10 @@ background, align, compact, hasGradient, isDisabled) => {
8572
8593
  aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
8573
8594
  })),
8574
8595
  width: '100%', // necessary in case tile content overflows in grid or flex context
8575
- height: '100%', // necessary in case tile content overflows in grid or flex context
8596
+ // Safari workaround to scale the tile properly
8597
+ '@supports (-webkit-hyphens: auto)': {
8598
+ height: '100%',
8599
+ },
8576
8600
  display: 'grid',
8577
8601
  gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
8578
8602
  ...(hasGradient &&
@@ -9151,41 +9175,29 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
9151
9175
  return [key, value];
9152
9176
  }));
9153
9177
 
9154
- const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, theme) => {
9155
- const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
9178
+ const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
9179
+ const getScalingVar = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
9180
+ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
9181
+ const scalingVar = getScalingVar(compact);
9182
+ const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
9183
+ const gap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
9184
+ const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
9185
+ // Min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
9186
+ const minWidth = `max(1rem, calc(${dimension} - ${borderWidthBase}*2 - ${paddingBlock}*2))`;
9156
9187
  const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
9157
- // TODO: move into getSlottedTextFieldTextareaSelectStyles()
9158
- padding: `${formElementPaddingVertical} ${spacingStaticXSmall}`,
9159
9188
  // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. textAlign=center|start
9160
9189
  textAlign: 'center',
9161
- // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. size=max|min
9162
- maxWidth: inputSize,
9163
- // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
9164
- minWidth: `calc(1rem + ${borderWidthBase}*2 + ${spacingStaticSmall}*2)`,
9165
- ...(length > 4 && {
9166
- [getMediaQueryMax('xs')]: {
9167
- // TODO: instead of having dedicated css rules depending on length we should try to implement a fluid one fits all solution
9168
- maxWidth: 'auto',
9169
- width: `calc((276px - (${spacingStaticSmall} * ${length - 1})) / ${length})`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
9170
- },
9171
- }),
9172
9190
  // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. isLoading
9173
9191
  ...(isLoading && {
9174
9192
  opacity: 0.2, // TODO: not in sync with e.g. checkbox/radio-button loading style
9175
9193
  cursor: 'not-allowed',
9176
9194
  }),
9177
- // since @playwright/test@1.40.1 this does not work anymore in Webkit browser engine for unknown reasons
9178
- /* ...Object.fromEntries(
9179
- Array.from(Array(length)).map((_, i) => {
9180
- return [`&:nth-of-type(${i + 1})`, { gridArea: `1/${i + 1}` }];
9181
- })
9182
- ),*/
9183
- '&:nth-of-type(1)': { gridArea: '1/1' },
9184
- '&:nth-of-type(2)': { gridArea: '1/2' },
9185
- '&:nth-of-type(3)': { gridArea: '1/3' },
9186
- '&:nth-of-type(4)': { gridArea: '1/4' },
9187
- '&:nth-of-type(5)': { gridArea: '1/5' },
9188
- '&:nth-of-type(6)': { gridArea: '1/6' },
9195
+ height: dimension,
9196
+ minWidth,
9197
+ maxWidth: dimension,
9198
+ width: 'auto',
9199
+ padding: paddingBlock,
9200
+ boxSizing: 'content-box',
9189
9201
  })));
9190
9202
  return getCss({
9191
9203
  '@global': {
@@ -9205,17 +9217,20 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, them
9205
9217
  gap: spacingStaticXSmall,
9206
9218
  },
9207
9219
  wrapper: {
9220
+ position: 'relative',
9208
9221
  display: 'grid',
9209
- gridTemplateColumns: `repeat(${length}, minmax(auto, 1fr))`,
9222
+ gridTemplateColumns: `repeat(${length}, 1fr)`,
9210
9223
  justifySelf: 'flex-start',
9211
- gap: spacingStaticSmall,
9224
+ gap,
9212
9225
  },
9213
9226
  ...(isLoading && {
9214
9227
  spinner: {
9215
- gridArea: '1/1/1/-1',
9216
- placeSelf: 'center',
9217
- width: inputSize,
9218
- height: inputSize,
9228
+ position: 'absolute',
9229
+ top: '50%',
9230
+ left: '50%',
9231
+ transform: 'translate(-50%, -50%)',
9232
+ width: dimension,
9233
+ height: dimension,
9219
9234
  pointerEvents: 'none',
9220
9235
  },
9221
9236
  }),
@@ -11522,4 +11537,4 @@ const getComponentCss = (size, theme) => {
11522
11537
  });
11523
11538
  };
11524
11539
 
11525
- export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1l as getAccordionCss, getComponentCss$1k as getBannerCss, getComponentCss$1g as getButtonCss, getComponentCss$1j as getButtonGroupCss, getComponentCss$1i as getButtonPureCss, getComponentCss$1h as getButtonTileCss, getComponentCss$1f as getCanvasCss, getComponentCss$1e as getCarouselCss, getComponentCss$1c as getCheckboxCss, getComponentCss$1d as getCheckboxWrapperCss, getComponentCss$1b as getContentWrapperCss, getComponentCss$1a as getCrestCss, getComponentCss$19 as getDisplayCss, getComponentCss$18 as getDividerCss, getComponentCss$17 as getDrilldownCss, getComponentCss$16 as getDrilldownItemCss, getComponentCss$15 as getDrilldownLinkCss, getComponentCss$13 as getFieldsetCss, getComponentCss$14 as getFieldsetWrapperCss, getComponentCss$12 as getFlagCss, getComponentCss$10 as getFlexCss, getComponentCss$11 as getFlexItemCss, getComponentCss$$ as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Z as getGridCss, getComponentCss$_ as getGridItemCss, getComponentCss$Y as getHeadingCss, getComponentCss$X as getHeadlineCss, getComponentCss$W as getIconCss, getComponentCss$V as getInlineNotificationCss, getComponentCss$U as getInputDateCss, getComponentCss$T as getInputEmailCss, getComponentCss$S as getInputNumberCss, getComponentCss$R as getInputPasswordCss, getComponentCss$Q as getInputSearchCss, getComponentCss$P as getInputTelCss, getComponentCss$O as getInputTextCss, getComponentCss$N as getInputTimeCss, getComponentCss$M as getInputUrlCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$C as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
11540
+ export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1l as getAccordionCss, getComponentCss$1k as getBannerCss, getComponentCss$1g as getButtonCss, getComponentCss$1j as getButtonGroupCss, getComponentCss$1i as getButtonPureCss, getComponentCss$1h as getButtonTileCss, getComponentCss$1f as getCanvasCss, getComponentCss$1e as getCarouselCss, getComponentCss$1c as getCheckboxCss, getComponentCss$1d as getCheckboxWrapperCss, getComponentCss$1b as getContentWrapperCss, getComponentCss$1a as getCrestCss, getComponentCss$19 as getDisplayCss, getComponentCss$18 as getDividerCss, getComponentCss$17 as getDrilldownCss, getComponentCss$16 as getDrilldownItemCss, getComponentCss$15 as getDrilldownLinkCss, getComponentCss$13 as getFieldsetCss, getComponentCss$14 as getFieldsetWrapperCss, getComponentCss$12 as getFlagCss, getComponentCss$10 as getFlexCss, getComponentCss$11 as getFlexItemCss, getComponentCss$$ as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Z as getGridCss, getComponentCss$_ as getGridItemCss, getComponentCss$Y as getHeadingCss, getComponentCss$X as getHeadlineCss, getComponentCss$W as getIconCss, getComponentCss$V as getInlineNotificationCss, getComponentCss$U as getInputDateCss, getComponentCss$T as getInputEmailCss, getComponentCss$S as getInputNumberCss, getComponentCss$R as getInputPasswordCss, getComponentCss$Q as getInputSearchCss, getComponentCss$P as getInputTelCss, getComponentCss$O as getInputTextCss, getComponentCss$N as getInputTimeCss, getComponentCss$M as getInputUrlCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$C as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, getScalingVar$1 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
@@ -3429,13 +3429,13 @@ var CRESTS_MANIFEST = { "porscheCrest": { "1x": { "png": "porsche-crest.d76137c@
3429
3429
  var FLAGS_MANIFEST = { "ae": "ae.070e003.svg", "am": "am.b228450.svg", "ar": "ar.d3ecad6.svg", "at": "at.19b8f3c.svg", "au": "au.9ccee18.svg", "az": "az.463b388.svg", "ba": "ba.57e215c.svg", "be": "be.6601715.svg", "bg": "bg.2a1ef06.svg", "bh": "bh.f6ce1b1.svg", "bn": "bn.5bb9faf.svg", "bo": "bo.2a95304.svg", "br": "br.071ef4a.svg", "by": "by.bbe68ec.svg", "ca": "ca.3524ab1.svg", "ch": "ch.1cc9a58.svg", "cl": "cl.7226017.svg", "cn": "cn.3e2e196.svg", "co": "co.40bd283.svg", "cr": "cr.d275fe4.svg", "cw": "cw.2a2e69b.svg", "cy": "cy.eecbae2.svg", "cz": "cz.84fcee1.svg", "de": "de.b575e11.svg", "dk": "dk.8faad28.svg", "do": "do.8cbff53.svg", "dz": "dz.92ac4dd.svg", "ec": "ec.8b790aa.svg", "ee": "ee.0d69319.svg", "eg": "eg.3d6e702.svg", "es": "es.8259527.svg", "fi": "fi.abcdec4.svg", "fr": "fr.e6f575e.svg", "gb": "gb.c8be57d.svg", "ge": "ge.1828ada.svg", "gh": "gh.dcc9966.svg", "gr": "gr.8d404a0.svg", "gt": "gt.d28dda2.svg", "hk": "hk.a791020.svg", "hn": "hn.61767b1.svg", "hr": "hr.09fd51c.svg", "ht": "ht.a0f15d3.svg", "hu": "hu.1e61356.svg", "id": "id.01c0ab3.svg", "ie": "ie.cec77fa.svg", "il": "il.add57d7.svg", "in": "in.15aa313.svg", "is": "is.2d193b5.svg", "it": "it.d26868c.svg", "jm": "jm.6266f91.svg", "jo": "jo.6759235.svg", "jp": "jp.32c39a2.svg", "ke": "ke.96a51ec.svg", "kh": "kh.ac03e8a.svg", "kr": "kr.f9b3228.svg", "kw": "kw.ecb70e0.svg", "kz": "kz.5f31a4b.svg", "lb": "lb.eed52fa.svg", "lk": "lk.1b44ee9.svg", "lt": "lt.5448f1b.svg", "lu": "lu.11992af.svg", "lv": "lv.c45d630.svg", "ma": "ma.37960b7.svg", "md": "md.7ed7b6b.svg", "mk": "mk.08eaad6.svg", "mn": "mn.fd0cde6.svg", "mo": "mo.a7e3c7c.svg", "mq": "mq.f55f7ca.svg", "mt": "mt.1ee108a.svg", "mu": "mu.f901db6.svg", "mx": "mx.c39bf62.svg", "my": "my.b7366cd.svg", "ng": "ng.d1ac1ea.svg", "nl": "nl.0569e12.svg", "no": "no.b4f2c38.svg", "nz": "nz.a70a24d.svg", "om": "om.d63d939.svg", "pa": "pa.f33ec1a.svg", "pe": "pe.2cacc5f.svg", "pf": "pf.50807f4.svg", "ph": "ph.1df49d2.svg", "pk": "pk.86b11da.svg", "pl": "pl.e0ef0ec.svg", "pr": "pr.79d60a1.svg", "pt": "pt.c903b10.svg", "py": "py.e39a820.svg", "qa": "qa.47e5e31.svg", "ro": "ro.9d14812.svg", "rs": "rs.7c7c211.svg", "ru": "ru.eb87254.svg", "sa": "sa.1a8f5b9.svg", "se": "se.f2705e2.svg", "sg": "sg.bca7a48.svg", "si": "si.c018e71.svg", "sk": "sk.d3177a9.svg", "sv": "sv.26aaba9.svg", "th": "th.1c48f08.svg", "tn": "tn.e119e22.svg", "tr": "tr.b4170f9.svg", "tt": "tt.7f3e1df.svg", "ua": "ua.73e5a3e.svg", "us": "us.10d7b02.svg", "uy": "uy.666b0bc.svg", "uz": "uz.8fa8ad3.svg", "ve": "ve.6cd1ec7.svg", "vn": "vn.3e0128f.svg", "za": "za.1bb0840.svg" };
3430
3430
 
3431
3431
  // index.ts
3432
- var ICONS_MANIFEST = { "360": "360.0600731.svg", "4-wheel-drive": "4-wheel-drive.9c218bf.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "aggregation": "aggregation.96f06e5.svg", "ai-spark": "ai-spark.a134e18.svg", "ai-spark-filled": "ai-spark-filled.2d5d971.svg", "arrow-compact-down": "arrow-compact-down.9b37afe.svg", "arrow-compact-left": "arrow-compact-left.7169de6.svg", "arrow-compact-right": "arrow-compact-right.cc2d1d2.svg", "arrow-compact-up": "arrow-compact-up.36724bb.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "arrows": "arrows.de040f9.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "battery-half": "battery-half.11f1ef8.svg", "battery-one-quarter": "battery-one-quarter.91235a0.svg", "battery-three-quarters": "battery-three-quarters.dcf768f.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "brain": "brain.838387a.svg", "broadcast": "broadcast.0ad5a15.svg", "cabriolet": "cabriolet.ab33aab.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-network": "charging-network.a40072f.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "cloud": "cloud.2c3959e.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "color-picker": "color-picker.598f402.svg", "compare": "compare.6578829.svg", "compass": "compass.f90f319.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "coupe": "coupe.7549e3e.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "cut": "cut.851e5c2.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "door": "door.61c32d6.svg", "download": "download.c06f455.svg", "drag": "drag.9e893fd.svg", "duration": "duration.94e5252.svg", "ear": "ear.27a802f.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error": "error.b8ae9ad.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "exclamation-filled": "exclamation-filled.9d09ed1.svg", "external": "external.fb677b9.svg", "fast-backward": "fast-backward.a71faae.svg", "fast-forward": "fast-forward.1e6fa9f.svg", "file-csv": "file-csv.4140e24.svg", "file-excel": "file-excel.56d577d.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flag": "flag.7af5baf.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "genuine-parts": "genuine-parts.6bfddde.svg", "geo-localization": "geo-localization.516d603.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "grip": "grip.5ec4289.svg", "group": "group.051436a.svg", "hand": "hand.4e85714.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.bf0eb24.svg", "highway-filled": "highway-filled.38e93fb.svg", "history": "history.f09645c.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "laptop": "laptop.c422480.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "limousine": "limousine.87799d5.svg", "linked": "linked.8f30cb5.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-carplay": "logo-apple-carplay.c872af9.svg", "logo-apple-music": "logo-apple-music.1395f37.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-kununu": "logo-kununu.79344ff.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-snapchat": "logo-snapchat.ef706a2.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "microphone": "microphone.8ecdce6.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "news": "news.5b604b0.svg", "north-arrow": "north-arrow.2da1dbe.svg", "oil-can": "oil-can.cb58fc7.svg", "online-search": "online-search.90e9ab1.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "paste": "paste.dd60261.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "pivot": "pivot.3ae18b8.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "price-tag": "price-tag.f0d3917.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "qr-off": "qr-off.64e21b9.svg", "question": "question.3402a63.svg", "question-filled": "question-filled.cf25dd5.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "radar": "radar.de5a6c1.svg", "radio": "radio.2b48e53.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "return": "return.46d30de.svg", "road": "road.bd3d4bc.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "seat": "seat.a3ebc40.svg", "send": "send.b32099c.svg", "service-technician": "service-technician.8749028.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "skip-backward": "skip-backward.cd25ac5.svg", "skip-forward": "skip-forward.001e97f.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stop": "stop.173b6ac.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "suv": "suv.33ac4aa.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "theme": "theme.08f6508.svg", "tire": "tire.e5c9372.svg", "trigger-finger": "trigger-finger.65aa6e2.svg", "truck": "truck.2c26c04.svg", "turismo": "turismo.a066b9f.svg", "unlinked": "unlinked.e9afe39.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weather": "weather.9c96bd7.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
3432
+ var ICONS_MANIFEST = { "360": "360.0600731.svg", "4-wheel-drive": "4-wheel-drive.9c218bf.svg", "accessibility": "accessibility.087d747.svg", "active-cabin-ventilation": "active-cabin-ventilation.b081399.svg", "add": "add.fac861a.svg", "adjust": "adjust.ca46bd4.svg", "aggregation": "aggregation.96f06e5.svg", "ai-3d-object": "ai-3d-object.7a85dd7.svg", "ai-code": "ai-code.9afafb7.svg", "ai-edit": "ai-edit.75a4765.svg", "ai-image": "ai-image.c786d48.svg", "ai-scale": "ai-scale.846fde0.svg", "ai-sound": "ai-sound.727ea7a.svg", "ai-spark": "ai-spark.a134e18.svg", "ai-spark-filled": "ai-spark-filled.2d5d971.svg", "ai-text": "ai-text.fc84e09.svg", "ai-video": "ai-video.759a7f2.svg", "arrow-compact-down": "arrow-compact-down.9b37afe.svg", "arrow-compact-left": "arrow-compact-left.7169de6.svg", "arrow-compact-right": "arrow-compact-right.cc2d1d2.svg", "arrow-compact-up": "arrow-compact-up.36724bb.svg", "arrow-double-down": "arrow-double-down.61ae4d7.svg", "arrow-double-left": "arrow-double-left.1b576eb.svg", "arrow-double-right": "arrow-double-right.dcfabff.svg", "arrow-double-up": "arrow-double-up.fb73db5.svg", "arrow-down": "arrow-down.49c6983.svg", "arrow-first": "arrow-first.beb7d9f.svg", "arrow-head-down": "arrow-head-down.1e3cbb8.svg", "arrow-head-left": "arrow-head-left.cf1395d.svg", "arrow-head-right": "arrow-head-right.304b330.svg", "arrow-head-up": "arrow-head-up.6d3fd23.svg", "arrow-last": "arrow-last.cc24903.svg", "arrow-left": "arrow-left.e03c25b.svg", "arrow-right": "arrow-right.872716b.svg", "arrow-up": "arrow-up.9d294d1.svg", "arrows": "arrows.de040f9.svg", "attachment": "attachment.8f3dd0a.svg", "augmented-reality": "augmented-reality.8b6ce95.svg", "battery-empty": "battery-empty.38b4b15.svg", "battery-empty-co2": "battery-empty-co2.c4cabef.svg", "battery-empty-fuel": "battery-empty-fuel.e833e13.svg", "battery-full": "battery-full.03de75d.svg", "battery-half": "battery-half.11f1ef8.svg", "battery-one-quarter": "battery-one-quarter.91235a0.svg", "battery-three-quarters": "battery-three-quarters.dcf768f.svg", "bell": "bell.1eab3a2.svg", "bookmark": "bookmark.9d6982f.svg", "bookmark-filled": "bookmark-filled.327ac78.svg", "brain": "brain.838387a.svg", "broadcast": "broadcast.0ad5a15.svg", "cabriolet": "cabriolet.ab33aab.svg", "calculator": "calculator.a323a2d.svg", "calendar": "calendar.70a6a12.svg", "camera": "camera.e5e95b9.svg", "car": "car.35229c9.svg", "car-battery": "car-battery.895510f.svg", "card": "card.f284448.svg", "charging-active": "charging-active.c3aa214.svg", "charging-network": "charging-network.a40072f.svg", "charging-state": "charging-state.f56d8df.svg", "charging-station": "charging-station.5ff1ed4.svg", "chart": "chart.c8c32d2.svg", "chat": "chat.7945544.svg", "check": "check.8ba06be.svg", "city": "city.5ae672c.svg", "climate": "climate.a9d5818.svg", "climate-control": "climate-control.ce31939.svg", "clock": "clock.c88a1ef.svg", "close": "close.eec3c5d.svg", "closed-caption": "closed-caption.ceaf6cb.svg", "cloud": "cloud.2c3959e.svg", "co2-class": "co2-class.fc49211.svg", "co2-emission": "co2-emission.c42e7f8.svg", "color-picker": "color-picker.598f402.svg", "compare": "compare.6578829.svg", "compass": "compass.f90f319.svg", "configurate": "configurate.5311c8d.svg", "copy": "copy.0fcd086.svg", "country-road": "country-road.d2bbc5a.svg", "coupe": "coupe.7549e3e.svg", "cubic-capacity": "cubic-capacity.7b0b8c8.svg", "cut": "cut.851e5c2.svg", "delete": "delete.5a8c8ca.svg", "disable": "disable.5918c32.svg", "dislike": "dislike.51614b0.svg", "dislike-filled": "dislike-filled.e1a8c4d.svg", "document": "document.df36b6c.svg", "door": "door.61c32d6.svg", "download": "download.c06f455.svg", "drag": "drag.9e893fd.svg", "duration": "duration.94e5252.svg", "ear": "ear.27a802f.svg", "edit": "edit.330f321.svg", "email": "email.f2530de.svg", "error": "error.b8ae9ad.svg", "error-filled": "error-filled.a4d06ed.svg", "exclamation": "exclamation.46cd17b.svg", "exclamation-filled": "exclamation-filled.9d09ed1.svg", "external": "external.fb677b9.svg", "fast-backward": "fast-backward.a71faae.svg", "fast-forward": "fast-forward.1e6fa9f.svg", "file-csv": "file-csv.4140e24.svg", "file-excel": "file-excel.56d577d.svg", "filter": "filter.610f808.svg", "fingerprint": "fingerprint.6a85170.svg", "flag": "flag.7af5baf.svg", "flash": "flash.88a2ada.svg", "fuel-station": "fuel-station.f7bdf51.svg", "garage": "garage.5014e8d.svg", "genuine-parts": "genuine-parts.6bfddde.svg", "geo-localization": "geo-localization.516d603.svg", "gift": "gift.7beb1eb.svg", "globe": "globe.56cc8fc.svg", "grid": "grid.06bc31a.svg", "grip": "grip.5ec4289.svg", "group": "group.051436a.svg", "hand": "hand.4e85714.svg", "heart": "heart.9a5962e.svg", "heart-filled": "heart-filled.dd7decf.svg", "highway": "highway.bf0eb24.svg", "highway-filled": "highway-filled.38e93fb.svg", "history": "history.f09645c.svg", "home": "home.7b1d1da.svg", "horn": "horn.bf47b1a.svg", "image": "image.b2614f0.svg", "increase": "increase.700012f.svg", "information": "information.da41162.svg", "information-filled": "information-filled.8f08911.svg", "key": "key.ee5d89b.svg", "laptop": "laptop.c422480.svg", "leaf": "leaf.92ca6a6.svg", "leather": "leather.1d2769a.svg", "light": "light.f0eb8e4.svg", "like": "like.a7468cd.svg", "like-filled": "like-filled.a0126c1.svg", "limousine": "limousine.87799d5.svg", "linked": "linked.8f30cb5.svg", "list": "list.411dd00.svg", "locate": "locate.6554f9e.svg", "lock": "lock.243281a.svg", "lock-open": "lock-open.95803d2.svg", "logo-apple-carplay": "logo-apple-carplay.c872af9.svg", "logo-apple-music": "logo-apple-music.1395f37.svg", "logo-apple-podcast": "logo-apple-podcast.09be038.svg", "logo-baidu": "logo-baidu.9e89c7d.svg", "logo-delicious": "logo-delicious.e83f574.svg", "logo-digg": "logo-digg.f096670.svg", "logo-facebook": "logo-facebook.74abe88.svg", "logo-foursquare": "logo-foursquare.d638fd8.svg", "logo-gmail": "logo-gmail.5f96ee2.svg", "logo-google": "logo-google.1dee423.svg", "logo-hatena": "logo-hatena.da509f0.svg", "logo-instagram": "logo-instagram.b916daa.svg", "logo-kaixin": "logo-kaixin.b1211a2.svg", "logo-kakaotalk": "logo-kakaotalk.38f5396.svg", "logo-kununu": "logo-kununu.79344ff.svg", "logo-linkedin": "logo-linkedin.b72559f.svg", "logo-naver": "logo-naver.75588fe.svg", "logo-pinterest": "logo-pinterest.e8f6963.svg", "logo-qq": "logo-qq.6d9b6d9.svg", "logo-qq-share": "logo-qq-share.ee864d9.svg", "logo-reddit": "logo-reddit.da13e44.svg", "logo-skyrock": "logo-skyrock.eb2f28d.svg", "logo-snapchat": "logo-snapchat.ef706a2.svg", "logo-sohu": "logo-sohu.a30c66b.svg", "logo-spotify": "logo-spotify.2ec4b2d.svg", "logo-tecent": "logo-tecent.d119e85.svg", "logo-telegram": "logo-telegram.d151481.svg", "logo-tiktok": "logo-tiktok.2f3a465.svg", "logo-tumblr": "logo-tumblr.c689f44.svg", "logo-twitter": "logo-twitter.5f2490a.svg", "logo-viber": "logo-viber.198bd43.svg", "logo-vk": "logo-vk.37b94e0.svg", "logo-wechat": "logo-wechat.83b2b98.svg", "logo-weibo": "logo-weibo.c8dacee.svg", "logo-whatsapp": "logo-whatsapp.add9a6d.svg", "logo-x": "logo-x.5f2490a.svg", "logo-xing": "logo-xing.3a8df0f.svg", "logo-yahoo": "logo-yahoo.8cbd0ba.svg", "logo-youku": "logo-youku.fe988d0.svg", "logo-youtube": "logo-youtube.da3798f.svg", "logout": "logout.7ec7451.svg", "map": "map.c16f618.svg", "menu-dots-horizontal": "menu-dots-horizontal.788f7fa.svg", "menu-dots-vertical": "menu-dots-vertical.4970a65.svg", "menu-lines": "menu-lines.e332216.svg", "microphone": "microphone.8ecdce6.svg", "minus": "minus.f6d964c.svg", "mobile": "mobile.7f35446.svg", "moon": "moon.5b73246.svg", "new-chat": "new-chat.95ffd2e.svg", "news": "news.5b604b0.svg", "north-arrow": "north-arrow.2da1dbe.svg", "oil-can": "oil-can.cb58fc7.svg", "online-search": "online-search.90e9ab1.svg", "parking-brake": "parking-brake.45704bd.svg", "parking-light": "parking-light.c49a231.svg", "paste": "paste.dd60261.svg", "pause": "pause.e41b935.svg", "phone": "phone.f4f774b.svg", "pin": "pin.3417cec.svg", "pin-filled": "pin-filled.7b8e9ba.svg", "pivot": "pivot.3ae18b8.svg", "play": "play.24226d4.svg", "plug": "plug.c159935.svg", "plus": "plus.319993e.svg", "preheating": "preheating.e2a796f.svg", "price-tag": "price-tag.f0d3917.svg", "printer": "printer.f59b0ee.svg", "purchase": "purchase.9cd6d65.svg", "push-pin": "push-pin.89e4ead.svg", "push-pin-off": "push-pin-off.ba99213.svg", "qr": "qr.87a49a3.svg", "qr-off": "qr-off.64e21b9.svg", "question": "question.3402a63.svg", "question-filled": "question-filled.cf25dd5.svg", "racing-flag": "racing-flag.b7ddcc8.svg", "radar": "radar.de5a6c1.svg", "radio": "radio.2b48e53.svg", "refresh": "refresh.41fd868.svg", "replay": "replay.55a99f2.svg", "reset": "reset.e53d52f.svg", "return": "return.46d30de.svg", "road": "road.bd3d4bc.svg", "roof-closed": "roof-closed.018d021.svg", "roof-open": "roof-open.51c8ee6.svg", "route": "route.f4fbbb4.svg", "rss": "rss.0e77baf.svg", "save": "save.6171ff5.svg", "screen": "screen.420be15.svg", "search": "search.3f0f1ce.svg", "seat": "seat.a3ebc40.svg", "send": "send.b32099c.svg", "service-technician": "service-technician.8749028.svg", "share": "share.a0b30da.svg", "shopping-bag": "shopping-bag.3f91a9b.svg", "shopping-bag-filled": "shopping-bag-filled.abf6c98.svg", "shopping-cart": "shopping-cart.370e224.svg", "shopping-cart-filled": "shopping-cart-filled.e0c3a65.svg", "sidebar": "sidebar.8e43896.svg", "sidelights": "sidelights.65c9dd9.svg", "skip-backward": "skip-backward.cd25ac5.svg", "skip-forward": "skip-forward.001e97f.svg", "snowflake": "snowflake.83907b3.svg", "sort": "sort.92b50bd.svg", "stack": "stack.804af93.svg", "star": "star.4c5bb15.svg", "star-filled": "star-filled.84ef2f6.svg", "steering-wheel": "steering-wheel.4dea19e.svg", "stop": "stop.173b6ac.svg", "stopwatch": "stopwatch.0e048a4.svg", "subtract": "subtract.57eed1d.svg", "success": "success.b16d4c1.svg", "success-filled": "success-filled.1832d98.svg", "sun": "sun.4301cbd.svg", "suv": "suv.33ac4aa.svg", "switch": "switch.66f74c4.svg", "tablet": "tablet.07341ac.svg", "tachometer": "tachometer.3a2fc3c.svg", "theme": "theme.08f6508.svg", "tire": "tire.e5c9372.svg", "trigger-finger": "trigger-finger.65aa6e2.svg", "truck": "truck.2c26c04.svg", "turismo": "turismo.a066b9f.svg", "unlinked": "unlinked.e9afe39.svg", "upload": "upload.d1f5a2a.svg", "user": "user.c18dabe.svg", "user-filled": "user-filled.2ea646d.svg", "user-group": "user-group.79cdf86.svg", "user-manual": "user-manual.470e243.svg", "video": "video.7590689.svg", "view": "view.5b4d7f6.svg", "view-off": "view-off.a4ede54.svg", "volume-off": "volume-off.bcd49e7.svg", "volume-up": "volume-up.2084f60.svg", "warning": "warning.59927e6.svg", "warning-filled": "warning-filled.1f6fe21.svg", "weather": "weather.9c96bd7.svg", "weight": "weight.b57a60d.svg", "wifi": "wifi.e2a8d9c.svg", "work": "work.9dd71a4.svg", "wrench": "wrench.09a2a67.svg", "wrenches": "wrenches.d2ed45d.svg", "zoom-in": "zoom-in.ff299b8.svg", "zoom-out": "zoom-out.ebb6246.svg" };
3433
3433
 
3434
3434
  // index.ts
3435
3435
  var MARQUES_MANIFEST = { "porscheMarqueTrademark": { "medium": { "1x": { "png": "porsche-marque-trademark.medium.da07531@1x.png", "webp": "porsche-marque-trademark.medium.5c6af9a@1x.webp" }, "2x": { "png": "porsche-marque-trademark.medium.aa801f4@2x.png", "webp": "porsche-marque-trademark.medium.fff6e9b@2x.webp" }, "3x": { "png": "porsche-marque-trademark.medium.824818d@3x.png", "webp": "porsche-marque-trademark.medium.f67092f@3x.webp" } }, "small": { "1x": { "png": "porsche-marque-trademark.small.020244b@1x.png", "webp": "porsche-marque-trademark.small.7836397@1x.webp" }, "2x": { "png": "porsche-marque-trademark.small.92184fa@2x.png", "webp": "porsche-marque-trademark.small.760a57e@2x.webp" }, "3x": { "png": "porsche-marque-trademark.small.fd545ce@3x.png", "webp": "porsche-marque-trademark.small.1726036@3x.webp" } } }, "porscheMarque": { "medium": { "1x": { "png": "porsche-marque.medium.a986274@1x.png", "webp": "porsche-marque.medium.fa908e4@1x.webp" }, "2x": { "png": "porsche-marque.medium.089d6dd@2x.png", "webp": "porsche-marque.medium.7f0893d@2x.webp" }, "3x": { "png": "porsche-marque.medium.2cb8743@3x.png", "webp": "porsche-marque.medium.3534cf0@3x.webp" } }, "small": { "1x": { "png": "porsche-marque.small.ac20427@1x.png", "webp": "porsche-marque.small.005debe@1x.webp" }, "2x": { "png": "porsche-marque.small.22f1e9d@2x.png", "webp": "porsche-marque.small.df43173@2x.webp" }, "3x": { "png": "porsche-marque.small.4920924@3x.png", "webp": "porsche-marque.small.cfd6149@3x.webp" } } }, "porscheMarque75": { "medium": { "1x": { "png": "porsche-marque75.medium.0a02e22@1x.png", "webp": "porsche-marque75.medium.99b2d65@1x.webp" }, "2x": { "png": "porsche-marque75.medium.1d41ecf@2x.png", "webp": "porsche-marque75.medium.e32580c@2x.webp" }, "3x": { "png": "porsche-marque75.medium.373bcb5@3x.png", "webp": "porsche-marque75.medium.4a003d1@3x.webp" } }, "small": { "1x": { "png": "porsche-marque75.small.f5b37fe@1x.png", "webp": "porsche-marque75.small.146b06c@1x.webp" }, "2x": { "png": "porsche-marque75.small.20d8690@2x.png", "webp": "porsche-marque75.small.025770f@2x.webp" }, "3x": { "png": "porsche-marque75.small.e89b13e@3x.png", "webp": "porsche-marque75.small.a725d2e@3x.webp" } } } };
3436
3436
 
3437
3437
  // index.ts
3438
- var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
3438
+ var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
3439
3439
 
3440
3440
  const hasDocument = typeof document !== 'undefined';
3441
3441
 
@@ -5,9 +5,10 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
5
5
  import { syncRef } from '../../utils.mjs';
6
6
  import { DSRCheckbox } from '../dsr-components/checkbox.mjs';
7
7
 
8
- const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
8
+ const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
9
9
  const elementRef = useRef(undefined);
10
10
  useEventCallback(elementRef, 'blur', onBlur);
11
+ useEventCallback(elementRef, 'change', onChange);
11
12
  useEventCallback(elementRef, 'update', onUpdate);
12
13
  const WebComponentTag = usePrefix('p-checkbox');
13
14
  const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
@@ -5,21 +5,21 @@ import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMerge
5
5
  import { syncRef } from '../../utils.mjs';
6
6
  import { DSRPinCode } from '../dsr-components/pin-code.mjs';
7
7
 
8
- const PPinCode = /*#__PURE__*/ forwardRef(({ description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
8
+ const PPinCode = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
9
9
  const elementRef = useRef(undefined);
10
10
  useEventCallback(elementRef, 'update', onUpdate);
11
11
  const WebComponentTag = usePrefix('p-pin-code');
12
- const propsToSync = [description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
12
+ const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
13
13
  useBrowserLayoutEffect(() => {
14
14
  const { current } = elementRef;
15
- ['description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
15
+ ['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
16
16
  }, propsToSync);
17
17
  const props = {
18
18
  ...rest,
19
19
  // @ts-ignore
20
20
  ...(!process.browser
21
21
  ? {
22
- children: (jsx(DSRPinCode, { description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || useTheme(), type, value, children })),
22
+ children: (jsx(DSRPinCode, { compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || useTheme(), type, value, children })),
23
23
  }
24
24
  : {
25
25
  children,
@@ -18,6 +18,10 @@ class DSRCheckbox extends Component {
18
18
  host;
19
19
  // The "name" property is reflected as an attribute to ensure compatibility with native form submission.
20
20
  // In the React wrapper, all props are synced as properties on the element ref, so reflecting "name" as an attribute ensures it is properly handled in the form submission process.
21
+ /**
22
+ * Emitted when checkbox checked property is changed.
23
+ * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
24
+ */
21
25
  internals;
22
26
  initialLoading = false;
23
27
  defaultChecked;
@@ -37,7 +37,7 @@ class DSRPinCode extends Component {
37
37
  // reset array of input elements
38
38
  this.inputElements = [];
39
39
  const currentInputId = 'current-input';
40
- const style = minifyCss(getComponentCss$z(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.theme));
40
+ const style = minifyCss(getComponentCss$z(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.length, this.props.compact, this.props.theme));
41
41
  return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, htmlFor: currentInputId, isRequired: this.props.required, isLoading: this.props.loading, isDisabled: this.props.disabled }), jsxs("div", { className: "wrapper", children: [Array.from(new Array(this.props.length), (_, index) => (jsx("input", { name: this.props.name, form: this.props.form, ...(isCurrentInput(index, this.props.value, this.props.length) && { id: currentInputId }), type: this.props.type === 'number' ? 'text' : this.props.type, "aria-label": `${index + 1}-${this.props.length}`, "aria-describedby": `${labelId} ${descriptionId} ${messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading ? 'true' : null, autoComplete: "one-time-code", pattern: "\\d*", inputMode: "numeric" // get numeric keyboard on mobile
42
42
  , defaultValue: this.props.value[index] === ' ' ? null : this.props.value[index], disabled: this.props.disabled, required: this.props.required }, index))), this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
43
43
  }
@@ -1,12 +1,12 @@
1
1
  import type { BaseProps } from '../../BaseProps';
2
- import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
2
+ import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
3
3
  export type PCheckboxProps = BaseProps & {
4
4
  /**
5
5
  * Reflects the checkbox current checked state and allows setting the initial checked state.
6
6
  */
7
7
  checked?: boolean;
8
8
  /**
9
- * Displays as compact version.
9
+ * Displays as a compact version.
10
10
  */
11
11
  compact?: boolean;
12
12
  /**
@@ -18,7 +18,7 @@ export type PCheckboxProps = BaseProps & {
18
18
  */
19
19
  form?: string;
20
20
  /**
21
- * Show or hide label. For better accessibility it's recommended to show the label.
21
+ * Show or hide label. For better accessibility, it's recommended to show the label.
22
22
  */
23
23
  hideLabel?: BreakpointCustomizable<boolean>;
24
24
  /**
@@ -48,6 +48,11 @@ export type PCheckboxProps = BaseProps & {
48
48
  /**
49
49
  * Emitted when checkbox checked property is changed.
50
50
  */
51
+ onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
52
+ /**
53
+ * Emitted when checkbox checked property is changed.
54
+ * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
55
+ */
51
56
  onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
52
57
  /**
53
58
  * Marks the checkbox as required.
@@ -72,7 +77,7 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
72
77
  */
73
78
  checked?: boolean;
74
79
  /**
75
- * Displays as compact version.
80
+ * Displays as a compact version.
76
81
  */
77
82
  compact?: boolean;
78
83
  /**
@@ -84,7 +89,7 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
84
89
  */
85
90
  form?: string;
86
91
  /**
87
- * Show or hide label. For better accessibility it's recommended to show the label.
92
+ * Show or hide label. For better accessibility, it's recommended to show the label.
88
93
  */
89
94
  hideLabel?: BreakpointCustomizable<boolean>;
90
95
  /**
@@ -114,6 +119,11 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<import
114
119
  /**
115
120
  * Emitted when checkbox checked property is changed.
116
121
  */
122
+ onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
123
+ /**
124
+ * Emitted when checkbox checked property is changed.
125
+ * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
126
+ */
117
127
  onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
118
128
  /**
119
129
  * Marks the checkbox as required.
@@ -1,6 +1,10 @@
1
1
  import type { BaseProps } from '../../BaseProps';
2
2
  import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEventDetail, PinCodeState, Theme, PinCodeType } from '../types';
3
3
  export type PPinCodeProps = BaseProps & {
4
+ /**
5
+ * A boolean value that, if present, renders the pin-code as a compact version.
6
+ */
7
+ compact?: boolean;
4
8
  /**
5
9
  * The description text.
6
10
  */
@@ -63,6 +67,10 @@ export type PPinCodeProps = BaseProps & {
63
67
  value?: string;
64
68
  };
65
69
  export declare const PPinCode: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
70
+ /**
71
+ * A boolean value that, if present, renders the pin-code as a compact version.
72
+ */
73
+ compact?: boolean;
66
74
  /**
67
75
  * The description text.
68
76
  */
@@ -5,6 +5,10 @@ import { Component } from 'react';
5
5
  */
6
6
  export declare class DSRCheckbox extends Component<any> {
7
7
  host: HTMLElement;
8
+ /**
9
+ * Emitted when checkbox checked property is changed.
10
+ * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
11
+ */
8
12
  private internals;
9
13
  private initialLoading;
10
14
  private defaultChecked;
@@ -221,8 +221,16 @@ declare const ICON_NAMES: readonly [
221
221
  "add",
222
222
  "adjust",
223
223
  "aggregation",
224
+ "ai-3d-object",
225
+ "ai-code",
226
+ "ai-edit",
227
+ "ai-image",
228
+ "ai-scale",
229
+ "ai-sound",
224
230
  "ai-spark",
225
231
  "ai-spark-filled",
232
+ "ai-text",
233
+ "ai-video",
226
234
  "arrow-compact-down",
227
235
  "arrow-compact-left",
228
236
  "arrow-compact-right",
@@ -611,6 +619,7 @@ declare const FORM_STATES: readonly [
611
619
  export type FormState = (typeof FORM_STATES)[number];
612
620
  declare const BUTTON_ARIA_ATTRIBUTES: readonly [
613
621
  "aria-label",
622
+ "aria-description",
614
623
  "aria-expanded",
615
624
  "aria-pressed",
616
625
  "aria-haspopup"
@@ -618,6 +627,7 @@ declare const BUTTON_ARIA_ATTRIBUTES: readonly [
618
627
  export type ButtonAriaAttribute = (typeof BUTTON_ARIA_ATTRIBUTES)[number];
619
628
  declare const LINK_ARIA_ATTRIBUTES: readonly [
620
629
  "aria-label",
630
+ "aria-description",
621
631
  "aria-current",
622
632
  "aria-haspopup"
623
633
  ];
@@ -936,6 +946,7 @@ export type CheckboxUpdateEventDetail = {
936
946
  checked: boolean;
937
947
  };
938
948
  export type CheckboxBlurEventDetail = Event;
949
+ export type CheckboxChangeEventDetail = Event;
939
950
  export type CheckboxWrapperState = FormState;
940
951
  declare const CONTENT_WRAPPER_BACKGROUND_COLORS: readonly [
941
952
  "transparent",
@@ -1286,6 +1297,9 @@ declare const LINK_TILE_MODEL_SIGNATURE_MODELS: readonly [
1286
1297
  "boxster",
1287
1298
  "cayenne",
1288
1299
  "cayman",
1300
+ "gt3-rs",
1301
+ "gt3",
1302
+ "gts",
1289
1303
  "macan",
1290
1304
  "panamera",
1291
1305
  "taycan",
@@ -1341,6 +1355,21 @@ declare const MODEL_SIGNATURES_MANIFEST: {
1341
1355
  width: number;
1342
1356
  height: number;
1343
1357
  };
1358
+ "gt3-rs": {
1359
+ src: string;
1360
+ width: number;
1361
+ height: number;
1362
+ };
1363
+ gt3: {
1364
+ src: string;
1365
+ width: number;
1366
+ height: number;
1367
+ };
1368
+ gts: {
1369
+ src: string;
1370
+ width: number;
1371
+ height: number;
1372
+ };
1344
1373
  macan: {
1345
1374
  src: string;
1346
1375
  width: number;