@porsche-design-system/components-react 3.29.0-rc.2 → 3.29.0-rc.3

package/esm/lib/components/textarea.wrapper.d.ts

@@ -1,48 +1,48 @@
 import type { BaseProps } from '../../BaseProps';
-import type { TextareaAutoComplete, BreakpointCustomizable, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, Theme, TextareaWrap } from '../types';
+import type { BreakpointCustomizable, TextareaBlurEventDetail, TextareaChangeEventDetail, TextareaInputEventDetail, TextareaResize, TextareaState, Theme, TextareaWrap } from '../types';
 export type PTextareaProps = BaseProps & {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
-    autoComplete?: TextareaAutoComplete;
+    autoComplete?: string;
     /**
      * Show or hide the character counter.
      */
     counter?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the textarea.
      */
     description?: string;
     /**
-     * Marks the textarea as disabled.
+     * A boolean value that, if present, makes the textarea unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the textarea should be associated with.
+     * Specifies the id of the <form> element that the textarea belongs to (useful if the textarea is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility, it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
-     * The max length of the textarea.
+     * A non-negative integer specifying the maximum number of characters the user can enter into the textarea.
      */
     maxLength?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
-     * The min length of the textarea.
+     * A non-negative integer specifying the minimum number of characters required for the textarea's value to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the textarea.
+     * The name of the textarea, used when submitting the form data.
      */
     name: string;
     /**
@@ -58,15 +58,15 @@ export type PTextareaProps = BaseProps & {
      */
     onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the textarea should be read-only.
+     * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the textarea as required.
+     * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
@@ -78,15 +78,15 @@ export type PTextareaProps = BaseProps & {
      */
     rows?: number;
     /**
-     * Specifies whether the input should have its spelling and grammar checked
+     * Specifies whether the textarea should have its spelling and grammar checked
      */
     spellCheck?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the textarea component.
      */
     state?: TextareaState;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -94,53 +94,53 @@ export type PTextareaProps = BaseProps & {
      */
     value?: string;
     /**
-     * Handles wrapping behaviour of elements.
+     * Handles wrapping behavior of elements.
      */
     wrap?: TextareaWrap;
 };
 export declare const PTextarea: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
-    autoComplete?: TextareaAutoComplete;
+    autoComplete?: string;
     /**
      * Show or hide the character counter.
      */
     counter?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the textarea.
      */
     description?: string;
     /**
-     * Marks the textarea as disabled.
+     * A boolean value that, if present, makes the textarea unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the textarea should be associated with.
+     * Specifies the id of the <form> element that the textarea belongs to (useful if the textarea is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label. For better accessibility, it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
-     * The max length of the textarea.
+     * A non-negative integer specifying the maximum number of characters the user can enter into the textarea.
      */
     maxLength?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
-     * The min length of the textarea.
+     * A non-negative integer specifying the minimum number of characters required for the textarea's value to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the textarea.
+     * The name of the textarea, used when submitting the form data.
      */
     name: string;
     /**
@@ -156,15 +156,15 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      */
     onInput?: (event: CustomEvent<TextareaInputEventDetail>) => void;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Write your message here...'). This text is displayed when the textarea is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the textarea should be read-only.
+     * A boolean value that, if present, makes the textarea uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the textarea as required.
+     * A boolean value that, if present, indicates that the textarea must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
@@ -176,15 +176,15 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      */
     rows?: number;
     /**
-     * Specifies whether the input should have its spelling and grammar checked
+     * Specifies whether the textarea should have its spelling and grammar checked
      */
     spellCheck?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the textarea component.
      */
     state?: TextareaState;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -192,7 +192,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<import
      */
     value?: string;
     /**
-     * Handles wrapping behaviour of elements.
+     * Handles wrapping behavior of elements.
      */
     wrap?: TextareaWrap;
 } & {

package/esm/lib/types.d.ts

@@ -1090,41 +1090,23 @@ declare const ICON_COLORS: readonly [
     "state-disabled"
 ];
 export type IconColor = (typeof ICON_COLORS)[number];
+export type InputEmailState = FormState;
+export type InputEmailChangeEventDetail = Event;
+export type InputEmailBlurEventDetail = Event;
+export type InputEmailInputEventDetail = InputEvent;
 export type InputNumberState = FormState;
-declare const INPUT_NUMBER_AUTO_COMPLETE: readonly [
-    "off",
-    "on"
-];
-export type InputNumberAutoComplete = (typeof INPUT_NUMBER_AUTO_COMPLETE)[number];
 export type InputNumberChangeEventDetail = Event;
 export type InputNumberBlurEventDetail = Event;
 export type InputNumberInputEventDetail = InputEvent;
 export type InputPasswordState = FormState;
-declare const INPUT_PASSWORD_AUTO_COMPLETE: readonly [
-    "off",
-    "on",
-    "current-password",
-    "new-password"
-];
-export type InputPasswordAutoComplete = (typeof INPUT_PASSWORD_AUTO_COMPLETE)[number];
 export type InputPasswordChangeEventDetail = Event;
 export type InputPasswordBlurEventDetail = Event;
 export type InputPasswordInputEventDetail = InputEvent;
 export type InputSearchState = FormState;
-declare const INPUT_SEARCH_AUTO_COMPLETE: readonly [
-    "off",
-    "on"
-];
-export type InputSearchAutoComplete = (typeof INPUT_SEARCH_AUTO_COMPLETE)[number];
 export type InputSearchChangeEventDetail = Event;
 export type InputSearchBlurEventDetail = Event;
 export type InputSearchInputEventDetail = InputEvent;
 export type InputTextState = FormState;
-declare const INPUT_TEXT_AUTO_COMPLETE: readonly [
-    "off",
-    "on"
-];
-export type InputTextAutoComplete = (typeof INPUT_TEXT_AUTO_COMPLETE)[number];
 export type InputTextChangeEventDetail = Event;
 export type InputTextBlurEventDetail = Event;
 export type InputTextInputEventDetail = InputEvent;
@@ -1516,11 +1498,6 @@ declare const TEXT_LIST_TYPES: readonly [
 ];
 export type TextListType = (typeof TEXT_LIST_TYPES)[number];
 export type TextareaState = FormState;
-declare const AUTO_COMPLETE: readonly [
-    "off",
-    "on"
-];
-export type TextareaAutoComplete = (typeof AUTO_COMPLETE)[number];
 declare const TEXTAREA_WRAPS: readonly [
     "hard",
     "soft",

package/esm/public-api.mjs

@@ -27,6 +27,7 @@ export { PHeading } from './lib/components/heading.wrapper.mjs';
 export { PHeadline } from './lib/components/headline.wrapper.mjs';
 export { PIcon } from './lib/components/icon.wrapper.mjs';
 export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
+export { PInputEmail } from './lib/components/input-email.wrapper.mjs';
 export { PInputNumber } from './lib/components/input-number.wrapper.mjs';
 export { PInputPassword } from './lib/components/input-password.wrapper.mjs';
 export { PInputSearch } from './lib/components/input-search.wrapper.mjs';

package/package.json

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

package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs

@@ -3923,7 +3923,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1f = (size, compact, open, theme, sticky) => {
+const getComponentCss$1g = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4095,7 +4095,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$1e = (isOpen) => {
+const getComponentCss$1f = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4167,7 +4167,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1d = (direction) => {
+const getComponentCss$1e = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4320,7 +4320,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$1c = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1d = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4358,7 +4358,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$1b = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$1c = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4628,7 +4628,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$1a = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1b = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4704,7 +4704,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$19 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$1a = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5083,7 +5083,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$18 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$19 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5541,7 +5541,7 @@ const getCheckedSVGBackgroundImage$2 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$17 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$18 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5743,7 +5743,7 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$16 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$17 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -6167,7 +6167,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$15 = (width) => {
+const getComponentCss$16 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6209,7 +6209,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$14 = () => {
+const getComponentCss$15 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6308,7 +6308,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$14 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6326,7 +6326,7 @@ const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$12 = (color, orientation, theme) => {
+const getComponentCss$13 = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6387,7 +6387,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$12 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6634,7 +6634,7 @@ const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme
     });
 };
 
-const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$11 = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6865,7 +6865,7 @@ const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
+const getComponentCss$10 = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -6917,7 +6917,7 @@ const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$$ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6954,7 +6954,7 @@ const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$Z = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7001,7 +7001,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$Z = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7023,7 +7023,7 @@ const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$X = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$Y = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7220,7 +7220,7 @@ const cssVarRefPaddingTop = '--ref-p-flyout-pt';
 const cssVarRefPaddingInline = '--ref-p-flyout-px';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$W = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$X = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7332,7 +7332,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$V = (size, offset) => {
+const getComponentCss$W = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7352,7 +7352,7 @@ const getComponentCss$V = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$U = (direction, wrap) => {
+const getComponentCss$V = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7378,7 +7378,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$T = (size, align, color, ellipsis, theme) => {
+const getComponentCss$U = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7438,7 +7438,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$S = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$T = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7549,7 +7549,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$R = (name, source, color, size, theme) => {
+const getComponentCss$S = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7668,7 +7668,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
+const getComponentCss$R = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7708,6 +7708,26 @@ const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
     });
 };
 
+// CSS Variables defined in base input
+/**
+ * @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."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
 // CSS Variables defined in base input
 /**
  * @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."}
@@ -11493,39 +11513,40 @@ const getComponentCss = (size, theme) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
-exports.getAccordionCss = getComponentCss$1f;
-exports.getBannerCss = getComponentCss$1e;
-exports.getButtonCss = getComponentCss$1a;
-exports.getButtonGroupCss = getComponentCss$1d;
-exports.getButtonPureCss = getComponentCss$1c;
-exports.getButtonTileCss = getComponentCss$1b;
-exports.getCanvasCss = getComponentCss$19;
-exports.getCarouselCss = getComponentCss$18;
-exports.getCheckboxCss = getComponentCss$16;
-exports.getCheckboxWrapperCss = getComponentCss$17;
-exports.getContentWrapperCss = getComponentCss$15;
-exports.getCrestCss = getComponentCss$14;
-exports.getDisplayCss = getComponentCss$13;
-exports.getDividerCss = getComponentCss$12;
-exports.getDrilldownCss = getComponentCss$11;
-exports.getDrilldownItemCss = getComponentCss$10;
-exports.getDrilldownLinkCss = getComponentCss$$;
-exports.getFieldsetCss = getComponentCss$Z;
-exports.getFieldsetWrapperCss = getComponentCss$_;
-exports.getFlexCss = getComponentCss$X;
-exports.getFlexItemCss = getComponentCss$Y;
-exports.getFlyoutCss = getComponentCss$W;
+exports.getAccordionCss = getComponentCss$1g;
+exports.getBannerCss = getComponentCss$1f;
+exports.getButtonCss = getComponentCss$1b;
+exports.getButtonGroupCss = getComponentCss$1e;
+exports.getButtonPureCss = getComponentCss$1d;
+exports.getButtonTileCss = getComponentCss$1c;
+exports.getCanvasCss = getComponentCss$1a;
+exports.getCarouselCss = getComponentCss$19;
+exports.getCheckboxCss = getComponentCss$17;
+exports.getCheckboxWrapperCss = getComponentCss$18;
+exports.getContentWrapperCss = getComponentCss$16;
+exports.getCrestCss = getComponentCss$15;
+exports.getDisplayCss = getComponentCss$14;
+exports.getDividerCss = getComponentCss$13;
+exports.getDrilldownCss = getComponentCss$12;
+exports.getDrilldownItemCss = getComponentCss$11;
+exports.getDrilldownLinkCss = getComponentCss$10;
+exports.getFieldsetCss = getComponentCss$_;
+exports.getFieldsetWrapperCss = getComponentCss$$;
+exports.getFlexCss = getComponentCss$Y;
+exports.getFlexItemCss = getComponentCss$Z;
+exports.getFlyoutCss = getComponentCss$X;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$U;
-exports.getGridItemCss = getComponentCss$V;
-exports.getHeadingCss = getComponentCss$T;
-exports.getHeadlineCss = getComponentCss$S;
-exports.getIconCss = getComponentCss$R;
-exports.getInlineNotificationCss = getComponentCss$Q;
+exports.getGridCss = getComponentCss$V;
+exports.getGridItemCss = getComponentCss$W;
+exports.getHeadingCss = getComponentCss$U;
+exports.getHeadlineCss = getComponentCss$T;
+exports.getIconCss = getComponentCss$S;
+exports.getInlineNotificationCss = getComponentCss$R;
+exports.getInputEmailCss = getComponentCss$Q;
 exports.getInputNumberCss = getComponentCss$P;
 exports.getInputPasswordCss = getComponentCss$O;
 exports.getInputSearchCss = getComponentCss$N;