@vodafone_de/publish-test 0.0.1 → 53.0.0

package/dist/components/Notification/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/OpenTextFootnoteAdapter/componentName.d.ts

@@ -0,0 +1 @@
+export declare const openTextFootnoteAdapterComponentName: "OpenTextFootnoteAdapter";

package/dist/components/OpenTextFootnoteAdapter/getFootnoteContent.d.ts

@@ -0,0 +1,22 @@
+import { FootnoteContentProps } from '../FootnoteContent';
+import { RichTextProps } from '../RichText';
+/**
+ * It's not my fault ;(
+ *
+ * OpenText simply outputs the output from a WYSIWYG editor as a text blob
+ * and editors type in manually:
+ *
+ * "<h3><a data-footnote="4">4</a> Aktionen</h3>
+ *
+ * <h4>Lorem Ipsum</h4>
+ *
+ * <p>Lorem Ipsum</p>"
+ *
+ * Just to make it a little bit more complicated,
+ * there are also blocks that do not contain footnotes,
+ * but are to be rendered in the accordions of the footnotes ;)
+ *
+ * I'll make the data a little more structured.
+ * But I can't work miracles.
+ */
+export declare const getFootnoteContent: (content: string, footnoteContentBacklinkText: string) => (FootnoteContentProps | RichTextProps)[];

package/dist/components/OpenTextFootnoteAdapter/index.d.ts

@@ -0,0 +1,4 @@
+import { OpenTextFootnoteAdapterProps } from './props';
+declare const OpenTextFootnoteAdapter: ({ heading, footnoteContentBacklinkText, content }: OpenTextFootnoteAdapterProps) => import("react/jsx-runtime").JSX.Element;
+export default OpenTextFootnoteAdapter;
+export * from './props';

package/dist/components/OpenTextFootnoteAdapter/index.js

@@ -0,0 +1,13 @@
+"use client";
+import "react/jsx-runtime";
+import "react";
+import "../AccordionGroup/index.js";
+import "../../index-sVS9qq5A.js";
+import "../FootnoteContent/index.js";
+import "../Heading/index.js";
+import { O } from "../../index-p2pfnRRq.js";
+import "../../index-B39bJrc9.js";
+import "../../HeadingSize-O__w72MO.js";
+export {
+  O as default
+};

package/dist/components/OpenTextFootnoteAdapter/props.d.ts

@@ -0,0 +1,27 @@
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { openTextFootnoteAdapterComponentName } from './componentName';
+/**
+ * Props for a single footnote content entry in the OpenText adapter.
+ */
+/** Heading text for this footnote. */
+export interface OpenTextFootnoteContentAdapterProps extends BrixComponentProps {
+    heading: string;
+    /** HTML content string for the footnote body. */
+    content: string;
+}
+/**
+ * Props for the OpenTextFootnoteAdapter component.
+ * Bridges OpenText CMS footnote data into the brix footnote system.
+ */
+export interface OpenTextFootnoteAdapterProps extends BrixComponentProps {
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof openTextFootnoteAdapterComponentName;
+    /** Section heading for the footnotes group. */
+    heading: string;
+    /** Back-link label text for each footnote. */
+    footnoteContentBacklinkText: string;
+    /** Array of footnote entries. */
+    content: OpenTextFootnoteContentAdapterProps[];
+}

package/dist/components/OpenTextFootnoteAdapter/validate.d.ts

@@ -0,0 +1,81 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { OpenTextFootnoteAdapterProps } from './props';
+export type OpenTextFootnoteAdapterCmsProps = CmsProps<OpenTextFootnoteAdapterProps>;
+export declare const openTextFootnoteContentSchema: z.ZodObject<{
+    heading: z.ZodString;
+    content: z.ZodString;
+}, z.core.$strip>;
+export declare const openTextFootnoteAdapterSchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"OpenTextFootnoteAdapter">;
+    heading: z.ZodString;
+    footnoteContentBacklinkText: z.ZodString;
+    content: z.ZodArray<z.ZodObject<{
+        heading: z.ZodString;
+        content: z.ZodString;
+    }, z.core.$strip>>;
+}, z.core.$loose>;
+export declare const validateOpenTextFootnoteAdapterProps: (props: unknown) => ValidationResult<OpenTextFootnoteAdapterCmsProps>;
+export declare const isOpenTextFootnoteAdapterProps: (props: unknown) => props is OpenTextFootnoteAdapterCmsProps;

package/dist/components/OpenTextFootnoteAdapter/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Overlay/componentName.d.ts

@@ -0,0 +1 @@
+export declare const overlayComponentName: "Overlay";

package/dist/components/Overlay/index.d.ts

@@ -0,0 +1,4 @@
+import { OverlayProps } from './props';
+declare const Overlay: ({ children, ...props }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default Overlay;
+export * from './props';

package/dist/components/Overlay/index.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
+import { f as colorBackgroundOverlayStatic } from "../../BackgroundColor-Ba4D10TC.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+import { o as overlayAppearancePrimary, a as overlayAppearanceSecondary } from "../../props-BYequ6c_.js";
+const OverlayStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "OverlayStyled",
+  componentId: "sc-yx9dus-0"
+})({
+  height: "100%",
+  width: "100%"
+}, ({
+  appearance = overlayAppearancePrimary
+}) => {
+  return appearance === overlayAppearanceSecondary ? {
+    background: getBackgroundColor(colorBackgroundOverlayStatic)
+  } : {
+    background: "#0d0d0d99"
+  };
+});
+const Overlay = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(OverlayStyled, { ...props, children });
+export {
+  Overlay as default,
+  overlayAppearancePrimary,
+  overlayAppearanceSecondary
+};

package/dist/components/Overlay/props.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BrixComponentProps } from '../../foundations/BrixComponentProps';
+import { overlayComponentName } from './componentName';
+export declare const overlayAppearancePrimary: "primary";
+export declare const overlayAppearanceSecondary: "secondary";
+type OverlayAppearance = typeof overlayAppearancePrimary | typeof overlayAppearanceSecondary;
+/**
+ * Props for the Overlay component.
+ * A semi-transparent backdrop used behind dialogs and modals.
+ * @see {@link https://www.vodafone.de/simplicity/pattern/?path=/docs/feedback-and-progress-dialog--docs} Overlay stories
+ */
+/**
+ * Visual style of the overlay backdrop.
+ * - `primary`: Standard dark overlay
+ * - `secondary`: Lighter overlay variant
+ * @default primary
+ */
+export interface OverlayProps extends BrixComponentProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: ReactNode;
+    appearance?: OverlayAppearance;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof overlayComponentName;
+}
+export {};

package/dist/components/Overlay/styled.d.ts

@@ -0,0 +1,2 @@
+import { OverlayProps } from './props';
+export declare const OverlayStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof OverlayProps> & OverlayProps, never> & Partial<Pick<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof OverlayProps> & OverlayProps, never>>> & string;

package/dist/components/Overlay/validate.d.ts

@@ -0,0 +1,76 @@
+import { default as z } from 'zod';
+import { CmsProps } from '../../foundations/BrixComponentProps';
+import { ValidationResult } from '../../utils/validation/Validation';
+import { OverlayProps } from './props';
+export type OverlayCmsProps = CmsProps<OverlayProps>;
+export declare const overlayAppearances: readonly ["primary", "secondary"];
+export declare const overlaySchema: z.ZodObject<{
+    uid: z.ZodString;
+    sysId: z.ZodString;
+    customId: z.ZodOptional<z.ZodString>;
+    enableStructuredData: z.ZodOptional<z.ZodBoolean>;
+    tracking: z.ZodOptional<z.ZodObject<{
+        contact_action: z.ZodOptional<z.ZodString>;
+        contact_subject: z.ZodOptional<z.ZodString>;
+        contact_available_tools: z.ZodOptional<z.ZodString>;
+        contact_tool: z.ZodOptional<z.ZodString>;
+        contact_trigger: z.ZodOptional<z.ZodString>;
+        contact_variant: z.ZodOptional<z.ZodString>;
+        information_action: z.ZodOptional<z.ZodString>;
+        information_name: z.ZodOptional<z.ZodString>;
+        information_ui_type: z.ZodOptional<z.ZodString>;
+        information_trigger: z.ZodOptional<z.ZodString>;
+        information_ui_location: z.ZodOptional<z.ZodString>;
+        information_id: z.ZodOptional<z.ZodString>;
+        information_ui_size: z.ZodOptional<z.ZodString>;
+        error_action: z.ZodOptional<z.ZodString>;
+        error_type: z.ZodOptional<z.ZodString>;
+        error_message: z.ZodOptional<z.ZodString>;
+        error_ui_type: z.ZodOptional<z.ZodString>;
+        error_trigger: z.ZodOptional<z.ZodString>;
+        error_trigger_name: z.ZodOptional<z.ZodString>;
+        error_code: z.ZodOptional<z.ZodString>;
+        error_details: z.ZodOptional<z.ZodString>;
+        error_location: z.ZodOptional<z.ZodString>;
+    }, z.core.$loose>>;
+    bottomSpacing: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        md: "md";
+        lg: "lg";
+        none: "none";
+        "2xs": "2xs";
+        xs: "xs";
+        xl: "xl";
+        "2xl": "2xl";
+        "3xl": "3xl";
+        "4xl": "4xl";
+        "5xl": "5xl";
+        "6xl": "6xl";
+        "7xl": "7xl";
+        None: "None";
+        "2Xs": "2Xs";
+        Xs: "Xs";
+        Sm: "Sm";
+        Md: "Md";
+        Lg: "Lg";
+        Xl: "Xl";
+        "2Xl": "2Xl";
+        "3Xl": "3Xl";
+        "4Xl": "4Xl";
+        "5Xl": "5Xl";
+        "6Xl": "6Xl";
+        "7Xl": "7Xl";
+    }>>;
+    layout: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnion<readonly [z.ZodString, z.ZodNumber, z.ZodObject<{
+        sm: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        md: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+        lg: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodNumber]>>;
+    }, z.core.$strip>]>>>;
+    component: z.ZodLiteral<"Overlay">;
+    appearance: z.ZodOptional<z.ZodEnum<{
+        primary: "primary";
+        secondary: "secondary";
+    }>>;
+}, z.core.$loose>;
+export declare const validateOverlayProps: (props: unknown) => ValidationResult<OverlayCmsProps>;
+export declare const isOverlayProps: (props: unknown) => props is OverlayCmsProps;

package/dist/components/Overlay/validate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PasswordInput/componentName.d.ts

@@ -0,0 +1 @@
+export declare const passwordInputComponentName: "PasswordInput";

package/dist/components/PasswordInput/index.d.ts

@@ -0,0 +1,4 @@
+import { PasswordInputProps } from './props';
+declare const PasswordInput: ({ uid, status, helperText, errorMessage, label, onUpdate, bottomSpacing, placeholder, ref, maskIconScreenReaderLabel, unmaskIconScreenReaderLabel, validationListAriaLabel, validationRules, ...props }: PasswordInputProps) => import("react/jsx-runtime").JSX.Element;
+export default PasswordInput;
+export * from './props';

package/dist/components/PasswordInput/index.js

@@ -0,0 +1,258 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import FormElement from "../FormElement/index.js";
+import FormHelperLabel from "../FormHelperLabel/index.js";
+import FormHelperMessage from "../FormHelperMessage/index.js";
+import IconLoader from "../IconLoader/index.js";
+import { i as inputStateError, a as inputStateSuccess } from "../../props-Czq9XX2J.js";
+import { I as InputWrapperStyled, a as InputStyled } from "../../styled-BkCUjXbJ.js";
+import { S as ScreenreaderOnly } from "../../index-p6eyyJpy.js";
+import { i as iconSizeSm } from "../../IconSize-Da9zhR76.js";
+import { a as spacingXs, s as spacingMd } from "../../Spacing-Dj-qX3Z5.js";
+import styled from "styled-components";
+import forcedColors from "../../foundations/media-query/forcedColors/index.js";
+import { getBodySize } from "../../foundations/token/getBodySize/index.js";
+import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
+import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
+import { getIconColor } from "../../foundations/token/getIconColor/index.js";
+import { g as getSpacing } from "../../index-l-i-mIeP.js";
+import { getTextColor } from "../../foundations/token/getTextColor/index.js";
+import { e as colorBorderCritical, d as colorBorderSuccess, b as colorBorderUnselected, c as colorBorderFocus } from "../../BorderColor-BACbvI20.js";
+import { b as borderWidthFocus } from "../../BorderWidth-CwrNKc0Q.js";
+import { c as colorIconSuccess, a as colorIconCritical } from "../../IconColor-CtC9WUgr.js";
+import { a as textBodySm } from "../../TextBodySize-CP9q4gRv.js";
+import { a as colorTextNeutral } from "../../TextColor-DsntmDNw.js";
+import { s as shouldForwardProp } from "../../shouldForwardProp-CONMmlMa.js";
+const PasswordInputWrapperStyled = styled(InputWrapperStyled).withConfig({
+  shouldForwardProp,
+  displayName: "PasswordInputWrapperStyled",
+  componentId: "sc-3thnzp-0"
+})(({
+  status
+}) => ({
+  paddingRight: 0,
+  "&:has(button:focus-visible)": {
+    ...!status && {
+      boxShadow: `inset ${getBorderColor(colorBorderUnselected)} 0px 0px 0px 1px`
+    },
+    ...status === "success" && {
+      boxShadow: `inset ${getBorderColor(colorBorderSuccess)} 0px 0px 0px 2px`
+    },
+    ...status === "error" && {
+      boxShadow: `inset ${getBorderColor(colorBorderCritical)} 0px 0px 0px 2px`
+    },
+    outline: "none"
+  }
+}));
+const PasswordInputToggleButtonStyled = styled.button.withConfig({
+  shouldForwardProp,
+  displayName: "PasswordInputToggleButtonStyled",
+  componentId: "sc-3thnzp-1"
+})({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  padding: `0 ${getSpacing(spacingXs)}`,
+  minWidth: "44px",
+  minHeight: "44px",
+  "&:focus-visible": {
+    ...forcedColors({
+      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+    }),
+    boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+    outline: "none",
+    borderRadius: "4px"
+  },
+  "&:disabled": {
+    cursor: "not-allowed",
+    opacity: 0.4
+  }
+});
+const PasswordInputValidationListStyled = styled.ul.withConfig({
+  displayName: "PasswordInputValidationListStyled",
+  componentId: "sc-3thnzp-2"
+})({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  display: "flex",
+  flexDirection: "column",
+  gap: getSpacing(spacingXs)
+});
+const PasswordInputValidationWrapperStyled = styled.div.withConfig({
+  shouldForwardProp,
+  displayName: "PasswordInputValidationWrapperStyled",
+  componentId: "sc-3thnzp-3"
+})(({
+  topSpacing
+}) => ({
+  marginTop: topSpacing ? getSpacing(spacingXs) : 0
+}));
+const PasswordInputValidationItemStyled = styled.li.withConfig({
+  displayName: "PasswordInputValidationItemStyled",
+  componentId: "sc-3thnzp-4"
+})({
+  display: "flex",
+  alignItems: "center",
+  gap: getSpacing(spacingXs),
+  ...getBodySize(textBodySm),
+  color: getTextColor(colorTextNeutral)
+});
+const PasswordInputValidationIconStyled = styled.span.withConfig({
+  shouldForwardProp,
+  displayName: "PasswordInputValidationIconStyled",
+  componentId: "sc-3thnzp-5"
+})({
+  display: "flex",
+  alignItems: "center",
+  flexShrink: 0
+}, ({
+  status
+}) => {
+  if (status === "success") {
+    return {
+      ...forcedColors({
+        color: "FieldText"
+      }),
+      color: getIconColor(colorIconSuccess)
+    };
+  }
+  if (status === "error") {
+    return {
+      ...forcedColors({
+        color: "FieldText"
+      }),
+      color: getIconColor(colorIconCritical)
+    };
+  }
+  return {};
+});
+const validationStatusIconMap = {
+  info: "InfoCircle",
+  error: "NotificationError",
+  success: "NotificationTick"
+};
+const validationStatusTextMap = {
+  info: "Noch nicht geprüft",
+  error: "Nicht erfüllt",
+  success: "Erfüllt"
+};
+const validationAnnouncementDelay = 500;
+const evaluateRule = (rule, value) => {
+  if (!value) {
+    return "info";
+  }
+  if (rule.validate) {
+    return rule.validate(value) ? "success" : "error";
+  }
+  if (rule.pattern) {
+    const regex = new RegExp(rule.pattern);
+    return regex.test(value) ? "success" : "error";
+  }
+  return "info";
+};
+const PasswordValidationList = ({
+  rules,
+  value,
+  topSpacing,
+  ariaLabel
+}) => /* @__PURE__ */ jsx(PasswordInputValidationWrapperStyled, { topSpacing, children: /* @__PURE__ */ jsx(PasswordInputValidationListStyled, { "aria-label": ariaLabel, children: rules.map((rule) => {
+  const status = evaluateRule(rule, value);
+  return /* @__PURE__ */ jsxs(PasswordInputValidationItemStyled, { children: [
+    /* @__PURE__ */ jsx(PasswordInputValidationIconStyled, { status, children: /* @__PURE__ */ jsx(IconLoader, { name: validationStatusIconMap[status], size: iconSizeSm, "aria-hidden": true }) }),
+    rule.label,
+    /* @__PURE__ */ jsx(ScreenreaderOnly, { children: `: ${validationStatusTextMap[status]}` })
+  ] }, rule.customId);
+}) }) });
+const PasswordInput = ({
+  uid,
+  status,
+  helperText,
+  errorMessage,
+  label,
+  onUpdate,
+  bottomSpacing = spacingMd,
+  placeholder,
+  ref,
+  maskIconScreenReaderLabel = "Passwort anzeigen",
+  unmaskIconScreenReaderLabel = "Passwort ausblenden",
+  validationListAriaLabel = "Passwortanforderungen",
+  validationRules,
+  ...props
+}) => {
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const [internalValue, setInternalValue] = useState("");
+  const [invalidAfterBlur, setInvalidAfterBlur] = useState(false);
+  const [validationAnnouncement, setValidationAnnouncement] = useState("");
+  const announcedStatusesRef = useRef({});
+  const rulesRef = useRef(validationRules);
+  rulesRef.current = validationRules;
+  const messageId = `text-${uid}`;
+  const requirementsId = `password-requirements-${uid}`;
+  const helperMessage = inputStateError === status ? errorMessage : helperText;
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      var _a;
+      const announcedStatuses = announcedStatusesRef.current;
+      const changes = [];
+      (_a = rulesRef.current) == null ? void 0 : _a.forEach((rule) => {
+        const ruleStatus = evaluateRule(rule, internalValue);
+        if ((announcedStatuses[rule.customId] ?? "info") !== ruleStatus) {
+          changes.push(`${rule.label}: ${validationStatusTextMap[ruleStatus]}`);
+        }
+        announcedStatuses[rule.customId] = ruleStatus;
+      });
+      if (changes.length) {
+        setValidationAnnouncement(changes.join(". "));
+      }
+    }, validationAnnouncementDelay);
+    return () => clearTimeout(timeout);
+  }, [internalValue]);
+  const ariaInvalid = inputStateError === status ? true : inputStateSuccess === status ? false : status === void 0 && invalidAfterBlur ? true : void 0;
+  const inputProps = {
+    ...props,
+    id: uid,
+    type: passwordVisible ? "text" : "password",
+    "aria-describedby": [helperMessage ? messageId : props["aria-describedby"], (validationRules == null ? void 0 : validationRules.length) ? requirementsId : void 0].filter(Boolean).join(" ") || void 0,
+    "aria-invalid": ariaInvalid
+  };
+  const onChange = (event) => {
+    const newValue = event.target.value;
+    setInternalValue(newValue);
+    if (props.onChange) {
+      props.onChange(event);
+    }
+    if (!onUpdate) {
+      return;
+    }
+    onUpdate(newValue);
+  };
+  const onBlur = (event) => {
+    var _a;
+    setInvalidAfterBlur((validationRules ?? []).some((rule) => evaluateRule(rule, event.target.value) === "error"));
+    (_a = props.onBlur) == null ? void 0 : _a.call(props, event);
+  };
+  const togglePasswordVisibility = () => {
+    setPasswordVisible((prev) => !prev);
+  };
+  return /* @__PURE__ */ jsxs(FormElement, { bottomSpacing, disabled: props.disabled, children: [
+    /* @__PURE__ */ jsx(FormHelperLabel, { label, uid }),
+    /* @__PURE__ */ jsxs(PasswordInputWrapperStyled, { status, readOnly: props.readOnly, bottomSpacing: helperMessage || (validationRules == null ? void 0 : validationRules.length) ? spacingXs : void 0, children: [
+      /* @__PURE__ */ jsx(InputStyled, { ...inputProps, placeholder, ref, onChange, onBlur }),
+      /* @__PURE__ */ jsx(PasswordInputToggleButtonStyled, { type: "button", onClick: togglePasswordVisibility, "aria-label": passwordVisible ? unmaskIconScreenReaderLabel : maskIconScreenReaderLabel, "aria-pressed": passwordVisible, disabled: props.disabled, children: /* @__PURE__ */ jsx(IconLoader, { name: passwordVisible ? "HidePassword" : "ShowPassword", size: iconSizeSm, "aria-hidden": true }) })
+    ] }),
+    /* @__PURE__ */ jsx(FormHelperMessage, { id: messageId, status, message: helperMessage }),
+    validationRules && validationRules.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ScreenreaderOnly, { id: requirementsId, children: `${validationListAriaLabel}: ${validationRules.map((rule) => rule.label).join(", ")}` }),
+      /* @__PURE__ */ jsx(PasswordValidationList, { rules: validationRules, value: internalValue, topSpacing: Boolean(helperMessage), ariaLabel: validationListAriaLabel }),
+      /* @__PURE__ */ jsx(ScreenreaderOnly, { role: "status", "aria-live": "polite", children: validationAnnouncement })
+    ] })
+  ] });
+};
+export {
+  PasswordInput as default
+};

package/dist/components/PasswordInput/props.d.ts

@@ -0,0 +1,70 @@
+import { InputHTMLAttributes, Ref } from 'react';
+import { InputSharedProps } from '../Input/props';
+import { passwordInputComponentName } from './componentName';
+export type PasswordValidationStatus = 'info' | 'error' | 'success';
+/**
+ * A single password validation rule with built-in validation logic.
+ * The component evaluates each rule on every keystroke and updates the status automatically.
+ */
+export interface ValidationRule {
+    /**
+     * Unique identifier for the validation rule.
+     */
+    customId: string;
+    /**
+     * The text label describing the validation rule (e.g. "At least 8 characters").
+     */
+    label: string;
+    /**
+     * Validation function that receives the current input value and returns `true` if the rule is satisfied.
+     * Takes priority over `pattern` if both are provided.
+     */
+    validate?: (value: string) => boolean;
+    /**
+     * A regex pattern string used to validate the rule. The rule passes when the pattern matches the value.
+     * Ignored if `validate` is provided.
+     */
+    pattern?: string;
+}
+/**
+ * Props for the PasswordInput component.
+ * Renders a password input with a show/hide toggle button and optional validation rules
+ * that are evaluated in real-time as the user types.
+ */
+export interface PasswordInputProps extends InputSharedProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'type'> {
+    /**
+     * Ref forwarded to the input element.
+     */
+    ref?: Ref<HTMLInputElement>;
+    /**
+     * Accessible label for the show password toggle button.
+     * @default 'Passwort anzeigen'
+     */
+    maskIconScreenReaderLabel?: string;
+    /**
+     * Accessible label for the hide password toggle button.
+     * @default 'Passwort ausblenden'
+     */
+    unmaskIconScreenReaderLabel?: string;
+    /**
+     * Accessible label for the validation rules list.
+     * @default 'Passwortanforderungen'
+     */
+    validationListAriaLabel?: string;
+    /**
+     * List of password validation rules displayed below the input.
+     * Each rule is evaluated in real-time as the user types.
+     * - When input is empty: all rules show `info` status
+     * - When input has value and rule passes: `success` status
+     * - When input has value and rule fails: `error` status
+     */
+    validationRules?: ValidationRule[];
+    /**
+     * Callback fired on every value change. Receives the current input value as a string.
+     */
+    onUpdate?: (value: string) => void;
+    /**
+     * Internal component name used for CMS and dynamic rendering.
+     */
+    component?: typeof passwordInputComponentName;
+}