@mittwald/flow-react-components 1.5.0-next.4 → 1.5.0-next.41

package/dist/js/packages/components/src/components/NumberField/NumberField.mjs

@@ -11,20 +11,24 @@ import FormField_module_default from "../FormField/FormField.module.mjs";
 import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import NumberField_module_default from "./NumberField.module.mjs";
+import { NumberFieldUnit } from "./components/NumberFieldUnit.mjs";
 import clsx from "clsx";
-import "react";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/NumberField/NumberField.tsx
 /** @flr-generate all */
 var NumberField = flowComponent("NumberField", (props) => {
-	const { children, className, isWheelDisabled = true, ref, ...rest } = useControlledHostValueProps(props, NaN);
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "NumberField");
+	const { children, className, isWheelDisabled = true, ref, unit, "aria-labelledby": ariaLabelledBy, ...rest } = useControlledHostValueProps(props, NaN);
+	const unitId = useId();
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext } = useFieldComponent(props, "NumberField");
 	const rootClassName = clsx(FormField_module_default.formField, className);
 	return /* @__PURE__ */ jsxs(Aria.NumberField, {
 		...rest,
 		isWheelDisabled,
-		className: clsx(rootClassName, fieldProps.className),
+		"aria-labelledby": unit ? [ariaLabelledBy, unitId].filter(Boolean).join(" ") : ariaLabelledBy,
+		"aria-describedby": controlProps["aria-describedby"],
+		className: clsx(rootClassName, wrapperProps.className),
 		children: [/* @__PURE__ */ jsxs(PropsContextProvider, {
 			props: fieldPropsContext,
 			children: [/* @__PURE__ */ jsx(FieldErrorCaptureContext, { children }), /* @__PURE__ */ jsx(FieldErrorView, {})]
@@ -39,9 +43,15 @@ var NumberField = flowComponent("NumberField", (props) => {
 					color: "secondary",
 					children: [/* @__PURE__ */ jsx(IconChevronDown, {}), /* @__PURE__ */ jsx(IconMinus, { className: NumberField_module_default.coarsePointerIcon })]
 				}),
-				/* @__PURE__ */ jsx(Aria.Input, {
-					className: NumberField_module_default.input,
-					ref
+				/* @__PURE__ */ jsxs("div", {
+					className: NumberField_module_default.inputContainer,
+					children: [/* @__PURE__ */ jsx(Aria.Input, {
+						className: NumberField_module_default.input,
+						ref
+					}), unit && /* @__PURE__ */ jsx(NumberFieldUnit, {
+						id: unitId,
+						unit
+					})]
 				}),
 				/* @__PURE__ */ jsxs(Button, {
 					ariaSlot: "increment",

package/dist/js/packages/components/src/components/NumberField/NumberField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    fieldProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      className={clsx(rootClassName, fieldProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <Aria.Input className={styles.input} ref={ref} />\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,EACJ,gBACA,0BACA,YACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAK,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,WAAW,KAAK,eAAe,WAAW,SAAS;EAHrD,UAAA,CAKE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAW,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAW,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,oBAAC,KAAK,OAAN;KAAY,WAAW,2BAAO;KAAY;IAAM,CAAA;IAChD,qBAAC,QAAD;KACE,UAAS;KACT,WAAW,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAW,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}
+{"version":3,"file":"NumberField.mjs","names":["formFieldStyles","styles"],"sources":["../../../../../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["import { type PropsWithChildren, useId } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport styles from \"./NumberField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { Button } from \"@/components/Button\";\nimport {\n  IconChevronDown,\n  IconChevronUp,\n  IconMinus,\n  IconPlus,\n} from \"@/components/Icon/components/icons\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { NumberFieldUnit } from \"./components/NumberFieldUnit\";\n\nexport interface NumberFieldProps\n  extends\n    PropsWithChildren<Omit<Aria.NumberFieldProps, \"children\">>,\n    FlowComponentProps<HTMLInputElement> {\n  /**\n   * A unit displayed after the number, for units `Intl.NumberFormat` does not\n   * support (e.g. \"MiB\"). For supported units, use `formatOptions` instead.\n   */\n  unit?: string;\n}\n\n/** @flr-generate all */\nexport const NumberField = flowComponent(\"NumberField\", (props) => {\n  // `NaN` is what react-aria's number field state uses for \"no number\"\n  const {\n    children,\n    className,\n    isWheelDisabled = true,\n    ref,\n    unit,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...rest\n  } = useControlledHostValueProps(props, NaN);\n\n  const unitId = useId();\n\n  const {\n    FieldErrorView,\n    FieldErrorCaptureContext,\n    wrapperProps,\n    controlProps,\n    fieldPropsContext,\n  } = useFieldComponent(props, \"NumberField\");\n\n  const rootClassName = clsx(formFieldStyles.formField, className);\n\n  return (\n    <Aria.NumberField\n      {...rest}\n      isWheelDisabled={isWheelDisabled}\n      aria-labelledby={\n        unit\n          ? [ariaLabelledBy, unitId].filter(Boolean).join(\" \")\n          : ariaLabelledBy\n      }\n      aria-describedby={controlProps[\"aria-describedby\"]}\n      className={clsx(rootClassName, wrapperProps.className)}\n    >\n      <PropsContextProvider props={fieldPropsContext}>\n        <FieldErrorCaptureContext>{children}</FieldErrorCaptureContext>\n        <FieldErrorView />\n      </PropsContextProvider>\n      <Aria.Group className={styles.group}>\n        <Button\n          ariaSlot=\"decrement\"\n          className={styles.decrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronDown />\n          <IconMinus className={styles.coarsePointerIcon} />\n        </Button>\n        <div className={styles.inputContainer}>\n          <Aria.Input className={styles.input} ref={ref} />\n          {unit && <NumberFieldUnit id={unitId} unit={unit} />}\n        </div>\n        <Button\n          ariaSlot=\"increment\"\n          className={styles.incrementButton}\n          size=\"s\"\n          variant=\"plain\"\n          color=\"secondary\"\n        >\n          <IconChevronUp />\n          <IconPlus className={styles.coarsePointerIcon} />\n        </Button>\n      </Aria.Group>\n    </Aria.NumberField>\n  );\n});\n\nexport default NumberField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+BA,IAAa,cAAc,cAAc,gBAAgB,UAAU;CAEjE,MAAM,EACJ,UACA,WACA,kBAAkB,MAClB,KACA,MACA,mBAAmB,gBACnB,GAAG,SACD,4BAA4B,OAAO,GAAG;CAE1C,MAAM,SAAS,MAAM;CAErB,MAAM,EACJ,gBACA,0BACA,cACA,cACA,sBACE,kBAAkB,OAAO,aAAa;CAE1C,MAAM,gBAAgB,KAAKA,yBAAgB,WAAW,SAAS;CAE/D,OACE,qBAAC,KAAK,aAAN;EACE,GAAI;EACa;EACjB,mBACE,OACI,CAAC,gBAAgB,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,IACjD;EAEN,oBAAkB,aAAa;EAC/B,WAAW,KAAK,eAAe,aAAa,SAAS;EATvD,UAAA,CAWE,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACE,oBAAC,0BAAD,EAA2B,SAAmC,CAAA,GAC9D,oBAAC,gBAAD,CAAiB,CAAA,CACG;EACtB,CAAA,GAAA,qBAAC,KAAK,OAAN;GAAY,WAAWC,2BAAO;GAA9B,UAAA;IACE,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,WAAD,EAAW,WAAWA,2BAAO,kBAAoB,CAAA,CAC3C;;IACR,qBAAC,OAAD;KAAK,WAAWA,2BAAO;KAAvB,UAAA,CACE,oBAAC,KAAK,OAAN;MAAY,WAAWA,2BAAO;MAAY;KAAM,CAAA,GAC/C,QAAQ,oBAAC,iBAAD;MAAiB,IAAI;MAAc;KAAO,CAAA,CAChD;;IACL,qBAAC,QAAD;KACE,UAAS;KACT,WAAWA,2BAAO;KAClB,MAAK;KACL,SAAQ;KACR,OAAM;KALR,UAAA,CAOE,oBAAC,eAAD,CAAgB,CAAA,GAChB,oBAAC,UAAD,EAAU,WAAWA,2BAAO,kBAAoB,CAAA,CAC1C;;GACE;EACI,CAAA,CAAA;;AAEtB,CAAC"}

package/dist/js/packages/components/src/components/NumberField/NumberField.module.mjs

@@ -2,20 +2,28 @@
 /* */
 //#region src/components/NumberField/NumberField.module.scss
 var group = "flow--number-field--group";
+var inputContainer = "flow--number-field--input-container";
 var input = "flow--number-field--input";
+var unitOverlay = "flow--number-field--unit-overlay";
 var readonly = "flow--number-field--readonly";
+var unitClip = "flow--number-field--unit-clip";
+var unitSpacer = "flow--number-field--unit-spacer";
 var decrementButton = "flow--number-field--decrement-button";
 var incrementButton = "flow--number-field--increment-button";
 var coarsePointerIcon = "flow--number-field--coarse-pointer-icon";
 var NumberField_module_default = {
 	group,
+	inputContainer,
 	input,
+	unitOverlay,
 	readonly,
+	unitClip,
+	unitSpacer,
 	decrementButton,
 	incrementButton,
 	coarsePointerIcon
 };
 //#endregion
-export { coarsePointerIcon, decrementButton, NumberField_module_default as default, group, incrementButton, input, readonly };
+export { coarsePointerIcon, decrementButton, NumberField_module_default as default, group, incrementButton, input, inputContainer, readonly, unitClip, unitOverlay, unitSpacer };
 
 //# sourceMappingURL=NumberField.module.mjs.map

package/dist/js/packages/components/src/components/NumberField/NumberField.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.module.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.group {\n  order: 2;\n  display: grid;\n  grid-template-columns: 1fr max-content;\n  grid-template-areas:\n    \"input increment\"\n    \"input decrement\";\n\n  .input {\n    grid-area: input;\n\n    @include formControl.formControl();\n  }\n\n  .decrementButton {\n    grid-area: decrement;\n  }\n\n  .incrementButton {\n    grid-area: increment;\n  }\n\n  .decrementButton,\n  .incrementButton {\n    border-width: var(--form-control--border-width);\n    border-color: var(--form-control--border-color--default);\n    border-style: solid;\n  }\n\n  &[aria-invalid] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--invalid);\n    }\n  }\n\n  &[data-focus-within] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--focused);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--disabled);\n    }\n  }\n\n  &:has(.input:read-only):not([aria-disabled=\"true\"]) {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--default);\n    }\n  }\n}\n\n@media (pointer: fine) {\n  .group {\n    .input {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    .incrementButton,\n    .decrementButton {\n      border-inline-start: none;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      padding-block: 0;\n\n      .coarsePointerIcon {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n    }\n\n    .incrementButton {\n      border-block-end: none;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n@media (pointer: coarse) {\n  .group {\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: \"decrement input increment\";\n    max-width: 100%;\n\n    .input {\n      border-radius: 0;\n      min-width: 0;\n    }\n\n    .decrementButton,\n    .incrementButton {\n      padding-inline: var(--button--padding-icon-only);\n\n      .coarsePointerIcon {\n        width: var(--icon--size--m);\n        height: var(--icon--size--m);\n      }\n\n      // Hides every icon the stepper buttons render except the coarse-pointer\n      // one — Button's own pending/success/failure icons included, and those\n      // share no class with the chevrons.\n      // stylelint-disable-next-line selector-max-type -- see above\n      svg:not(.coarsePointerIcon) {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-inline-end: none;\n    }\n\n    .incrementButton {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-inline-start: none;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"NumberField.module.mjs","names":[],"sources":["../../../../../../../src/components/NumberField/NumberField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.group {\n  order: 2;\n  display: grid;\n  grid-template-columns: 1fr max-content;\n  grid-template-areas:\n    \"input increment\"\n    \"input decrement\";\n\n  .inputContainer {\n    grid-area: input;\n    display: grid;\n    // Without it the column takes the input's intrinsic width\n    grid-template-columns: minmax(0, 1fr);\n    min-width: 0;\n  }\n\n  .input,\n  .unitOverlay {\n    grid-area: 1 / 1;\n  }\n\n  .input {\n    @include formControl.formControl();\n  }\n\n  // Mirrors the input's box so the text lines up with the input text\n  .unitOverlay {\n    @include formControl.formBorder();\n    @include formControl.formOutline();\n\n    // Grid items paint in `order`; formControl moves the input to 2\n    order: 2;\n    border-color: transparent;\n    color: var(--form-control--content-color--default);\n    white-space: pre;\n    pointer-events: none;\n    contain: inline-size;\n\n    &[data-empty] {\n      visibility: hidden;\n    }\n  }\n\n  // The input clips its text at the content box, `overflow` clips at the\n  // padding box — so the overlay keeps the padding and clips one level deeper\n  .unitClip {\n    display: block;\n    overflow: hidden;\n  }\n\n  .unitSpacer {\n    visibility: hidden;\n  }\n\n  &[aria-disabled=\"true\"] .unitOverlay {\n    color: var(--form-control--content-color--disabled);\n  }\n\n  .decrementButton {\n    grid-area: decrement;\n  }\n\n  .incrementButton {\n    grid-area: increment;\n  }\n\n  .decrementButton,\n  .incrementButton {\n    border-width: var(--form-control--border-width);\n    border-color: var(--form-control--border-color--default);\n    border-style: solid;\n  }\n\n  &[aria-invalid] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--invalid);\n    }\n  }\n\n  &[data-focus-within] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--focused);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--disabled);\n    }\n  }\n\n  &:has(.input:read-only):not([aria-disabled=\"true\"]) {\n    .decrementButton,\n    .incrementButton {\n      border-color: var(--form-control--border-color--default);\n    }\n  }\n}\n\n@media (pointer: fine) {\n  .group {\n    .input {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n    }\n\n    .incrementButton,\n    .decrementButton {\n      border-inline-start: none;\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      padding-block: 0;\n\n      .coarsePointerIcon {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n    }\n\n    .incrementButton {\n      border-block-end: none;\n      border-end-end-radius: 0;\n    }\n  }\n}\n\n@media (pointer: coarse) {\n  .group {\n    grid-template-columns: auto 1fr auto;\n    grid-template-areas: \"decrement input increment\";\n    max-width: 100%;\n\n    .input {\n      border-radius: 0;\n      min-width: 0;\n    }\n\n    .decrementButton,\n    .incrementButton {\n      padding-inline: var(--button--padding-icon-only);\n\n      .coarsePointerIcon {\n        width: var(--icon--size--m);\n        height: var(--icon--size--m);\n      }\n\n      // Hides every icon the stepper buttons render except the coarse-pointer\n      // one — Button's own pending/success/failure icons included, and those\n      // share no class with the chevrons.\n      // stylelint-disable-next-line selector-max-type -- see above\n      svg:not(.coarsePointerIcon) {\n        display: none;\n      }\n    }\n\n    .decrementButton {\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      border-inline-end: none;\n    }\n\n    .incrementButton {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      border-inline-start: none;\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/NumberField/components/NumberFieldUnit.mjs

@@ -0,0 +1,36 @@
+"use client"
+/* */
+import NumberField_module_default from "../NumberField.module.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
+//#region src/components/NumberField/components/NumberFieldUnit.tsx
+/**
+* React-aria cannot parse a unit `Intl.NumberFormat` does not know, so the unit
+* is drawn over the input instead of being part of its value. An invisible copy
+* of the input text pushes it right behind the number. The input's name
+* references the unit, like a unit written into the label.
+*/
+var NumberFieldUnit = (props) => {
+	const { id, unit } = props;
+	const inputValue = useContext(Aria.NumberFieldStateContext)?.inputValue;
+	return /* @__PURE__ */ jsx("span", {
+		className: NumberField_module_default.unitOverlay,
+		"data-empty": !inputValue || void 0,
+		"aria-hidden": true,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: NumberField_module_default.unitClip,
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: NumberField_module_default.unitSpacer,
+				children: [inputValue, " "]
+			}), /* @__PURE__ */ jsx("span", {
+				id,
+				children: unit
+			})]
+		})
+	});
+};
+//#endregion
+export { NumberFieldUnit };
+
+//# sourceMappingURL=NumberFieldUnit.mjs.map

package/dist/js/packages/components/src/components/NumberField/components/NumberFieldUnit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldUnit.mjs","names":["styles"],"sources":["../../../../../../../../src/components/NumberField/components/NumberFieldUnit.tsx"],"sourcesContent":["import { type FC, useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../NumberField.module.scss\";\n\ninterface Props {\n  id: string;\n  unit: string;\n}\n\n/**\n * React-aria cannot parse a unit `Intl.NumberFormat` does not know, so the unit\n * is drawn over the input instead of being part of its value. An invisible copy\n * of the input text pushes it right behind the number. The input's name\n * references the unit, like a unit written into the label.\n */\nexport const NumberFieldUnit: FC<Props> = (props) => {\n  const { id, unit } = props;\n  const inputValue = useContext(Aria.NumberFieldStateContext)?.inputValue;\n\n  return (\n    <span\n      className={styles.unitOverlay}\n      data-empty={!inputValue || undefined}\n      aria-hidden\n    >\n      <span className={styles.unitClip}>\n        <span className={styles.unitSpacer}>{inputValue} </span>\n        <span id={id}>{unit}</span>\n      </span>\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;AAeA,IAAa,mBAA8B,UAAU;CACnD,MAAM,EAAE,IAAI,SAAS;CACrB,MAAM,aAAa,WAAW,KAAK,uBAAuB,CAAC,EAAE;CAE7D,OACE,oBAAC,QAAD;EACE,WAAWA,2BAAO;EAClB,cAAY,CAAC,cAAc,KAAA;EAC3B,eAAA;EAEA,UAAA,qBAAC,QAAD;GAAM,WAAWA,2BAAO;GAAxB,UAAA,CACE,qBAAC,QAAD;IAAM,WAAWA,2BAAO;IAAxB,UAAA,CAAqC,YAAW,GAAO;GACvD,CAAA,GAAA,oBAAC,QAAD;IAAU;IAAK,UAAA;GAAW,CAAA,CACtB;;CACF,CAAA;AAEV"}

package/dist/js/packages/components/src/components/Option/Option.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.mjs","names":[],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n  extends\n    Omit<Aria.ListBoxItemProps, \"children\" | \"value\" | \"id\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * The value this option contributes to the field's selection, and the key\n   * `defaultValue` / `value` of the surrounding field target.\n   *\n   * Defaults to `textValue`, which itself defaults to the text among the\n   * option's children — element children such as a `Badge` do not contribute,\n   * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n   * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n   * the display text, or when the children carry no text at all.\n   */\n  value?: string | number;\n}\n\n/**\n * The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n */\nexport const getOptionValue = (\n  props: Pick<OptionProps, \"value\" | \"textValue\" | \"children\">,\n): string | number | undefined =>\n  props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/** @flr-generate all */\nexport const Option = flowComponent(\"Option\", (props) => {\n  const {\n    className,\n    children,\n    textValue = extractTextFromChildren(children),\n    // Derived through `getOptionValue` below; destructured only to keep it out\n    // of the props spread onto the react-aria item.\n    value: valueIgnored,\n    ref,\n    ...rest\n  } = props;\n\n  const value = getOptionValue(props);\n\n  useWarnMissingValue(value === undefined);\n\n  const rootClassName = clsx(styles.option, className);\n  const hasChildren = Children.count(children) >= 1;\n\n  return (\n    <Aria.ListBoxItem\n      className={rootClassName}\n      ref={ref}\n      id={value}\n      {...rest}\n      textValue={textValue}\n    >\n      <span className={styles.content}>\n        {hasChildren ? children : textValue}\n      </span>\n      <IconCheck aria-hidden className={styles.checkMark} />\n    </Aria.ListBoxItem>\n  );\n});\n\n/*\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n *\n * Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n  const hasWarned = useRef(false);\n\n  useEffect(() => {\n    if (!isMissing || hasWarned.current) {\n      return;\n    }\n\n    hasWarned.current = true;\n    console.error(\n      \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n    );\n  }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,KAAK,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAW,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAW,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}
+{"version":3,"file":"Option.mjs","names":["styles"],"sources":["../../../../../../../src/components/Option/Option.tsx"],"sourcesContent":["import { type PropsWithChildren } from \"react\";\nimport { Children, useEffect, useRef } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport styles from \"./Option.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { extractTextFromChildren } from \"@/lib/react/remote\";\nimport { IconCheck } from \"@/components/Icon/components/icons\";\n\nexport interface OptionProps\n  extends\n    Omit<Aria.ListBoxItemProps, \"children\" | \"value\" | \"id\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  /**\n   * The value this option contributes to the field's selection, and the key\n   * `defaultValue` / `value` of the surrounding field target.\n   *\n   * Defaults to `textValue`, which itself defaults to the text among the\n   * option's children — element children such as a `Badge` do not contribute,\n   * so `<Option>Millennium Falcon <Badge>Latest</Badge></Option>` is\n   * `\"Millennium Falcon\"`. Pass it explicitly when the value must not follow\n   * the display text, or when the children carry no text at all.\n   */\n  value?: string | number;\n}\n\n/**\n * The key an option contributes to its collection: an explicit `value`, else\n * the `textValue`, else the text among the children. Shared with the props\n * context that routes options through a field's tunnel, so both derive the same\n * identity for one option.\n */\nexport const getOptionValue = (\n  props: Pick<OptionProps, \"value\" | \"textValue\" | \"children\">,\n): string | number | undefined =>\n  props.value ?? props.textValue ?? extractTextFromChildren(props.children);\n\n/** @flr-generate all */\nexport const Option = flowComponent(\"Option\", (props) => {\n  const {\n    className,\n    children,\n    textValue = extractTextFromChildren(children),\n    // Derived through `getOptionValue` below; destructured only to keep it out\n    // of the props spread onto the react-aria item.\n    value: valueIgnored,\n    ref,\n    ...rest\n  } = props;\n\n  const value = getOptionValue(props);\n\n  useWarnMissingValue(value === undefined);\n\n  const rootClassName = clsx(styles.option, className);\n  const hasChildren = Children.count(children) >= 1;\n\n  return (\n    <Aria.ListBoxItem\n      className={rootClassName}\n      ref={ref}\n      id={value}\n      {...rest}\n      textValue={textValue}\n    >\n      <span className={styles.content}>\n        {hasChildren ? children : textValue}\n      </span>\n      <IconCheck aria-hidden className={styles.checkMark} />\n    </Aria.ListBoxItem>\n  );\n});\n\n/*\n * Without an `id`, react-aria gives the item a key off a render-order counter\n * (`react-aria-1`). That key is what the field reports as its selected value\n * and what `defaultValue` has to match, so an option without a `value` silently\n * submits a meaningless string and cannot be preselected — and the key shifts\n * when unrelated markup around it changes. react-aria warns about the missing\n * `textValue` in this situation but says nothing about the key, which is the\n * expensive half (#3028).\n *\n * Warn in an effect rather than during render, so a double render in StrictMode\n * does not log twice; the ref keeps it to once per option.\n */\nconst useWarnMissingValue = (isMissing: boolean): void => {\n  const hasWarned = useRef(false);\n\n  useEffect(() => {\n    if (!isMissing || hasWarned.current) {\n      return;\n    }\n\n    hasWarned.current = true;\n    console.error(\n      \"An <Option> has no 'value' and none could be inferred from its children, so it falls back to a generated, render-order-dependent key. Pass a 'value' to give the option a stable key.\",\n    );\n  }, [isMissing]);\n};\n\nexport default Option;\n"],"mappings":";;;;;;;;;;;;;;;;;AAkCA,IAAa,kBACX,UAEA,MAAM,SAAS,MAAM,aAAa,wBAAwB,MAAM,QAAQ;;AAG1E,IAAa,SAAS,cAAc,WAAW,UAAU;CACvD,MAAM,EACJ,WACA,UACA,YAAY,wBAAwB,QAAQ,GAG5C,OAAO,cACP,KACA,GAAG,SACD;CAEJ,MAAM,QAAQ,eAAe,KAAK;CAElC,oBAAoB,UAAU,KAAA,CAAS;CAEvC,MAAM,gBAAgB,KAAKA,sBAAO,QAAQ,SAAS;CACnD,MAAM,cAAc,SAAS,MAAM,QAAQ,KAAK;CAEhD,OACE,qBAAC,KAAK,aAAN;EACE,WAAW;EACN;EACL,IAAI;EACJ,GAAI;EACO;EALb,UAAA,CAOE,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GACrB,UAAA,cAAc,WAAW;EACtB,CAAA,GACN,oBAAC,WAAD;GAAW,eAAA;GAAY,WAAWA,sBAAO;EAAY,CAAA,CACrC;;AAEtB,CAAC;AAcD,IAAM,uBAAuB,cAA6B;CACxD,MAAM,YAAY,OAAO,KAAK;CAE9B,gBAAgB;EACd,IAAI,CAAC,aAAa,UAAU,SAC1B;EAGF,UAAU,UAAU;EACpB,QAAQ,MACN,uLACF;CACF,GAAG,CAAC,SAAS,CAAC;AAChB"}

package/dist/js/packages/components/src/components/Options/Options.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Options.mjs","names":[],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n  extends\n    Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n    PopoverProps {\n  controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n  const {\n    className,\n    children,\n    controller,\n    renderEmptyState,\n    onAction,\n    ...restPopoverProps\n  } = props;\n\n  const rootClassName = clsx(styles.options, className);\n\n  return (\n    <Popover\n      className={styles.popover}\n      controller={controller}\n      maxHeight={324}\n      {...restPopoverProps}\n    >\n      <Aria.ListBox\n        onAction={onAction}\n        className={rootClassName}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </Aria.ListBox>\n    </Popover>\n  );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAW,uBAAO;EACN;EACZ,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}
+{"version":3,"file":"Options.mjs","names":["styles"],"sources":["../../../../../../../src/components/Options/Options.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Popover, type PopoverProps } from \"@/components/Popover/Popover\";\nimport clsx from \"clsx\";\nimport styles from \"./Options.module.scss\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport type { OptionProps } from \"@/components/Option\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface OptionsProps\n  extends\n    Pick<Aria.ListBoxProps<OptionProps>, \"renderEmptyState\" | \"onAction\">,\n    PopoverProps {\n  controller: OverlayController;\n}\n\nexport const Options: FC<OptionsProps> = flowComponent(\"Options\", (props) => {\n  const {\n    className,\n    children,\n    controller,\n    renderEmptyState,\n    onAction,\n    ...restPopoverProps\n  } = props;\n\n  const rootClassName = clsx(styles.options, className);\n\n  return (\n    <Popover\n      className={styles.popover}\n      controller={controller}\n      maxHeight={324}\n      {...restPopoverProps}\n    >\n      <Aria.ListBox\n        onAction={onAction}\n        className={rootClassName}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </Aria.ListBox>\n    </Popover>\n  );\n});\n\nexport default Options;\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,UAA4B,cAAc,YAAY,UAAU;CAC3E,MAAM,EACJ,WACA,UACA,YACA,kBACA,UACA,GAAG,qBACD;CAEJ,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,SAAD;EACE,WAAWA,uBAAO;EACN;EACZ,WAAW;EACX,GAAI;EAEJ,UAAA,oBAAC,KAAK,SAAN;GACY;GACV,WAAW;GACO;GAEjB;EACW,CAAA;CACP,CAAA;AAEb,CAAC"}

package/dist/js/packages/components/src/components/Overlay/Overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n  OverlayCloseHandler,\n  OverlayOpenHandler,\n  OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  /** The controller to control the overlay state. */\n  controller?: OverlayController;\n  /** Whether the overlay can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the overlay is a modal or a light box. */\n  overlayType?: \"Modal\" | \"LightBox\";\n  /** Whether the overlay is open. Use it to control the overlay state. */\n  isOpen?: boolean;\n  /**\n   * Whether the overlay is open initially. Use it for an uncontrolled overlay.\n   *\n   * @default false\n   */\n  isDefaultOpen?: boolean;\n  /** Called when the overlay is opened. */\n  onOpen?: OverlayOpenHandler;\n  /** Called when the overlay is closed. */\n  onClose?: OverlayCloseHandler;\n  /** Called with the new open state whenever the overlay is opened or closed. */\n  onOpenChange?: OverlayOpenStateHandler;\n  /** Whether closing the overlay must be confirmed. */\n  confirmOnClose?: boolean;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    isDismissable = true,\n    className,\n    overlayType = \"Modal\",\n    isDefaultOpen,\n    isOpen: isOpenFromProps,\n    ref,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...controllerOptions\n  } = props;\n\n  const controllerFromContext = useOverlayController(overlayType, {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n  controller.useUpdateOptions(controllerOptions);\n\n  const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n  const rootClassName = clsx(styles.overlay, className);\n\n  return (\n    <OverlayContentView\n      onOpenChange={controller.setOpen}\n      isOpen={isOpen}\n      ref={ref}\n      isDismissable={isDismissable}\n      className={rootClassName}\n      aria-labelledby={ariaLabelledBy}\n    >\n      <OverlayContextProvider type=\"Modal\" controller={controller}>\n        {children}\n      </OverlayContextProvider>\n    </OverlayContentView>\n  );\n};\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;AA6CA,IAAa,WAA6B,UAAU;CAClD,MAAM,EACJ,YAAY,qBACZ,UACA,gBAAgB,MAChB,WACA,cAAc,SACd,eACA,QAAQ,iBACR,KACA,mBAAmB,gBACnB,GAAG,sBACD;CAEJ,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAC1C,WAAW,iBAAiB,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB,WAAW,UAAU;CAEvD,MAAM,gBAAgB,KAAK,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,cAAc,WAAW;EACjB;EACH;EACU;EACf,WAAW;EACX,mBAAiB;EAEjB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAoB;GAC9C;EACqB,CAAA;CACN,CAAA;AAExB"}
+{"version":3,"file":"Overlay.mjs","names":["styles"],"sources":["../../../../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref } from \"react\";\nimport styles from \"./Overlay.module.scss\";\nimport clsx from \"clsx\";\nimport type { OverlayController } from \"@/lib/controller\";\nimport { useOverlayController } from \"@/lib/controller\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport OverlayContentView from \"@/views/OverlayContentView\";\nimport type {\n  OverlayCloseHandler,\n  OverlayOpenHandler,\n  OverlayOpenStateHandler,\n} from \"@/lib/controller/overlay/OverlayController\";\nimport type * as Aria from \"react-aria-components\";\n\nexport interface OverlayProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  /** The controller to control the overlay state. */\n  controller?: OverlayController;\n  /** Whether the overlay can be closed by clicking outside of it. */\n  isDismissable?: boolean;\n  /** Whether the overlay is a modal or a light box. */\n  overlayType?: \"Modal\" | \"LightBox\";\n  /** Whether the overlay is open. Use it to control the overlay state. */\n  isOpen?: boolean;\n  /**\n   * Whether the overlay is open initially. Use it for an uncontrolled overlay.\n   *\n   * @default false\n   */\n  isDefaultOpen?: boolean;\n  /** Called when the overlay is opened. */\n  onOpen?: OverlayOpenHandler;\n  /** Called when the overlay is closed. */\n  onClose?: OverlayCloseHandler;\n  /** Called with the new open state whenever the overlay is opened or closed. */\n  onOpenChange?: OverlayOpenStateHandler;\n  /** Whether closing the overlay must be confirmed. */\n  confirmOnClose?: boolean;\n}\n\nexport const Overlay: FC<OverlayProps> = (props) => {\n  const {\n    controller: controllerFromProps,\n    children,\n    isDismissable = true,\n    className,\n    overlayType = \"Modal\",\n    isDefaultOpen,\n    isOpen: isOpenFromProps,\n    ref,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...controllerOptions\n  } = props;\n\n  const controllerFromContext = useOverlayController(overlayType, {\n    reuseControllerFromContext: true,\n    isDefaultOpen,\n  });\n\n  const controller = controllerFromProps ?? controllerFromContext;\n  controller.useUpdateOptions(controllerOptions);\n\n  const isOpen = isOpenFromProps ?? controller.useIsOpen();\n\n  const rootClassName = clsx(styles.overlay, className);\n\n  return (\n    <OverlayContentView\n      onOpenChange={controller.setOpen}\n      isOpen={isOpen}\n      ref={ref}\n      isDismissable={isDismissable}\n      className={rootClassName}\n      aria-labelledby={ariaLabelledBy}\n    >\n      <OverlayContextProvider type=\"Modal\" controller={controller}>\n        {children}\n      </OverlayContextProvider>\n    </OverlayContentView>\n  );\n};\n\nexport default Overlay;\n"],"mappings":";;;;;;;;;AA6CA,IAAa,WAA6B,UAAU;CAClD,MAAM,EACJ,YAAY,qBACZ,UACA,gBAAgB,MAChB,WACA,cAAc,SACd,eACA,QAAQ,iBACR,KACA,mBAAmB,gBACnB,GAAG,sBACD;CAEJ,MAAM,wBAAwB,qBAAqB,aAAa;EAC9D,4BAA4B;EAC5B;CACF,CAAC;CAED,MAAM,aAAa,uBAAuB;CAC1C,WAAW,iBAAiB,iBAAiB;CAE7C,MAAM,SAAS,mBAAmB,WAAW,UAAU;CAEvD,MAAM,gBAAgB,KAAKA,uBAAO,SAAS,SAAS;CAEpD,OACE,oBAAC,oBAAD;EACE,cAAc,WAAW;EACjB;EACH;EACU;EACf,WAAW;EACX,mBAAiB;EAEjB,UAAA,oBAAC,wBAAD;GAAwB,MAAK;GAAoB;GAC9C;EACqB,CAAA;CACN,CAAA;AAExB"}

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs

@@ -17,9 +17,14 @@ var overlayContainerAttribute = "data-flow-overlays";
 * blurs a focused field inside it (#3268). The same heuristic also spares
 * custom elements and shadow hosts the page itself appends, which then render
 * above open overlays.
+*
+* Hidden nodes don't count either: react-aria appends a `display: none`
+* description node whenever a DatePicker's value changes, and moving the
+* container for it on every keystroke resets the segment being typed into.
 */
+var isHiddenNode = (node) => node instanceof HTMLElement && (node.hidden === true || node.style.display === "none");
 var isCoveredByPageContent = (container) => {
-	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node)) return true;
+	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) return true;
 	return false;
 };
 /**

package/dist/js/packages/components/src/components/Overlay/components/OverlayContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.mjs","names":[],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n */\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                {children}\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;AASlC,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,GAC9B,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAW,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAW,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
+{"version":3,"file":"OverlayContent.mjs","names":["styles"],"sources":["../../../../../../../../src/components/Overlay/components/OverlayContent.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport { type FC, type PropsWithChildren, type Ref, Suspense } from \"react\";\nimport { UNSAFE_PortalProvider } from \"react-aria\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { OverlaySuspenseFallback } from \"@/components/Overlay/components/OverlaySuspenseFallback\";\nimport styles from \"../Overlay.module.scss\";\nimport DivView from \"@/views/DivView\";\nimport {\n  isBrowserExtensionNode,\n  useKeepBrowserExtensionsInteractive,\n} from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\n\n/**\n * Nodes a browser extension appends (e.g. 1Password's inline menu) don't count\n * as covering: they belong on top anyway, and moving the container for them\n * blurs a focused field inside it (#3268). The same heuristic also spares\n * custom elements and shadow hosts the page itself appends, which then render\n * above open overlays.\n *\n * Hidden nodes don't count either: react-aria appends a `display: none`\n * description node whenever a DatePicker's value changes, and moving the\n * container for it on every keystroke resets the segment being typed into.\n */\nconst isHiddenNode = (node: Element): boolean =>\n  node instanceof HTMLElement &&\n  (node.hidden === true || node.style.display === \"none\");\n\nconst isCoveredByPageContent = (container: HTMLElement): boolean => {\n  for (\n    let node = container.nextElementSibling;\n    node;\n    node = node.nextElementSibling\n  ) {\n    if (!isBrowserExtensionNode(node) && !isHiddenNode(node)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n/**\n * Only the container moves, never the nodes appended after it: those are\n * foreign, and moving them costs state we cannot restore (an iframe reloads).\n * The container's own state we can. Moving a node blurs the focused element\n * inside it and resets every scroll container inside to the top. `moveBefore`\n * keeps the focus (and, in Chromium, the scroll positions); the rest is\n * restored afterwards.\n */\nconst moveToEnd = (container: HTMLElement): void => {\n  const body = document.body;\n  const focused = document.activeElement;\n  const scrolled = Array.from(container.querySelectorAll<HTMLElement>(\"*\"))\n    .filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0)\n    .map(\n      (element) => [element, element.scrollTop, element.scrollLeft] as const,\n    );\n\n  if (typeof body.moveBefore === \"function\") {\n    body.moveBefore(container, null);\n  } else {\n    body.append(container);\n  }\n\n  for (const [element, scrollTop, scrollLeft] of scrolled) {\n    element.scrollTop = scrollTop;\n    element.scrollLeft = scrollLeft;\n  }\n  if (\n    focused instanceof HTMLElement &&\n    container.contains(focused) &&\n    document.activeElement !== focused\n  ) {\n    focused.focus({ preventScroll: true });\n  }\n};\n\n/**\n * Render overlays into a dedicated container instead of `document.body`.\n *\n * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).\n * Browser extensions (e.g. password managers) inject/reorder `body` children,\n * which can separate those nodes. Then focus scope detection breaks and may\n * cause recursive focus restoration.\n *\n * Keep the overlay container as the last child of body.\n *\n * React Aria normally portals overlays directly into body, so they are appended\n * last and render on top.\n *\n * If we create one persistent container only once, anything appended to body\n * later (toasts, third-party widgets, remounted app root) can render above open\n * overlays. Then overlays can appear behind page content, and the backdrop blur\n * no longer covers the page.\n */\nconst getOverlayContainer = (): HTMLElement | null => {\n  if (typeof document === \"undefined\") {\n    return null;\n  }\n\n  const existingContainer = document.querySelector<HTMLElement>(\n    `body > [${overlayContainerAttribute}]`,\n  );\n\n  if (existingContainer) {\n    if (isCoveredByPageContent(existingContainer)) {\n      moveToEnd(existingContainer);\n    }\n    return existingContainer;\n  }\n\n  const container = document.createElement(\"div\");\n  container.setAttribute(overlayContainerAttribute, \"\");\n  document.body.append(container);\n\n  return container;\n};\n\nexport interface OverlayContentProps\n  extends\n    PropsWithChildren,\n    PropsWithClassName,\n    Pick<Aria.DialogProps, \"aria-labelledby\"> {\n  ref?: Ref<HTMLDivElement>;\n  onOpenChange: (isOpen: boolean) => void;\n  isDismissable?: boolean;\n  isOpen?: boolean;\n}\n\n/** @flr-generate all */\nexport const OverlayContent: FC<OverlayContentProps> = (props) => {\n  const {\n    children,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  useKeepBrowserExtensionsInteractive(restProps.isOpen ?? false);\n\n  const Fallback = () => {\n    return (\n      <DivView className={styles.suspense}>\n        <OverlaySuspenseFallback {...restProps} />\n      </DivView>\n    );\n  };\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  return (\n    <UNSAFE_PortalProvider getContainer={getOverlayContainer}>\n      <Aria.ModalOverlay {...restProps} className={className}>\n        {/* The centering viewport between the backdrop and react-aria's modal\n            wrapper. Classed so Modal/OffCanvas/LightBox can position it\n            without selecting a bare `div`. */}\n        <DivView className={styles.viewport}>\n          <Aria.Modal>\n            <Suspense fallback={<Fallback />}>\n              <Aria.Dialog aria-labelledby={ariaLabelledBy}>\n                {children}\n              </Aria.Dialog>\n            </Suspense>\n          </Aria.Modal>\n        </DivView>\n      </Aria.ModalOverlay>\n    </UNSAFE_PortalProvider>\n  );\n};\n\nexport default OverlayContent;\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,4BAA4B;;;;;;;;;;;;AAalC,IAAM,gBAAgB,SACpB,gBAAgB,gBACf,KAAK,WAAW,QAAQ,KAAK,MAAM,YAAY;AAElD,IAAM,0BAA0B,cAAoC;CAClE,KACE,IAAI,OAAO,UAAU,oBACrB,MACA,OAAO,KAAK,oBAEZ,IAAI,CAAC,uBAAuB,IAAI,KAAK,CAAC,aAAa,IAAI,GACrD,OAAO;CAGX,OAAO;AACT;;;;;;;;;AAUA,IAAM,aAAa,cAAiC;CAClD,MAAM,OAAO,SAAS;CACtB,MAAM,UAAU,SAAS;CACzB,MAAM,WAAW,MAAM,KAAK,UAAU,iBAA8B,GAAG,CAAC,CAAC,CACtE,QAAQ,YAAY,QAAQ,cAAc,KAAK,QAAQ,eAAe,CAAC,CAAC,CACxE,KACE,YAAY;EAAC;EAAS,QAAQ;EAAW,QAAQ;CAAU,CAC9D;CAEF,IAAI,OAAO,KAAK,eAAe,YAC7B,KAAK,WAAW,WAAW,IAAI;MAE/B,KAAK,OAAO,SAAS;CAGvB,KAAK,MAAM,CAAC,SAAS,WAAW,eAAe,UAAU;EACvD,QAAQ,YAAY;EACpB,QAAQ,aAAa;CACvB;CACA,IACE,mBAAmB,eACnB,UAAU,SAAS,OAAO,KAC1B,SAAS,kBAAkB,SAE3B,QAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;AAoBA,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,uBAAuB,iBAAiB,GAC1C,UAAU,iBAAiB;EAE7B,OAAO;CACT;CAEA,MAAM,YAAY,SAAS,cAAc,KAAK;CAC9C,UAAU,aAAa,2BAA2B,EAAE;CACpD,SAAS,KAAK,OAAO,SAAS;CAE9B,OAAO;AACT;;AAcA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,mBAAmB,gBACnB,GAAG,cACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAE7C,oCAAoC,UAAU,UAAU,KAAK;CAE7D,MAAM,iBAAiB;EACrB,OACE,oBAAC,SAAD;GAAS,WAAWA,uBAAO;GACzB,UAAA,oBAAC,yBAAD,EAAyB,GAAI,UAAY,CAAA;EAClC,CAAA;CAEb;CAEA,IAAI,CAAC,kBACH,OAAO;CAGT,OACE,oBAAC,uBAAD;EAAuB,cAAc;EACnC,UAAA,oBAAC,KAAK,cAAN;GAAmB,GAAI;GAAsB;GAI3C,UAAA,oBAAC,SAAD;IAAS,WAAWA,uBAAO;IACzB,UAAA,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;KAAU,UAAU,oBAAC,UAAD,CAAW,CAAA;KAC7B,UAAA,oBAAC,KAAK,QAAN;MAAa,mBAAiB;MAC3B;KACU,CAAA;IACL,CAAA,EACA,CAAA;GACL,CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs

@@ -5,7 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
-import { useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
+import { joinIds, useFieldComponent } from "../../lib/hooks/useFieldComponent.mjs";
 import { useControlledHostValueProps } from "../../lib/remote/useControlledHostValueProps.mjs";
 import { FieldDescription } from "../FieldDescription/FieldDescription.mjs";
 import { FieldError } from "../FieldError/FieldError.mjs";
@@ -23,7 +23,7 @@ import { PasswordGenerateButton } from "./components/PasswordGenerateButton/Pass
 import { usePolicyValidationResult } from "./lib/usePolicyValidationResult.mjs";
 import { useAriaAnnouncePasswordVisibility, useAriaAnnounceValidationState } from "./lib/ariaAnnounce.mjs";
 import clsx from "clsx";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
 //#region src/components/PasswordCreationField/PasswordCreationField.tsx
@@ -44,7 +44,7 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	const [policyValidationResult, setPolicyValidationResult] = useState(initialPolicyValidationState);
 	const loadingRef = useRef(null);
-	usePolicyValidationResult(validationPolicy, value ?? "", () => {
+	const { rememberValidationResult } = usePolicyValidationResult(validationPolicy, value ?? "", () => {
 		if (isEmptyValue) return;
 		loadingRef.current = setTimeout(() => {
 			setPolicyValidationResult((r) => ({
@@ -77,10 +77,23 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	const isValidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid;
 	const isInvalidFromValidationResult = !isEmptyValue && stateFromValidationResult?.isValid === false;
 	const isInvalid = invalidFromProps || isInvalidFromValidationResult;
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent({
-		...props,
-		isInvalid
-	}, "PasswordCreationField");
+	const { FieldErrorView, FieldErrorCaptureContext, wrapperProps, controlProps, fieldPropsContext, renderedFieldErrorId } = useFieldComponent(props, "PasswordCreationField");
+	/**
+	* The result for a valid password appears after the asynchronous policy
+	* validation. react-aria resolves its description slot only when the
+	* field's validity changes, so a result that appears while the field stays
+	* valid (a generated password) was never linked. It gets its own id
+	* instead, referenced only while it is rendered.
+	*
+	* A shown error replaces it: the FormField styles hide descriptions next to
+	* an error, and a hidden description would still be announced.
+	*/
+	const resultDescriptionId = useId();
+	const [isResultDescriptionRendered, setIsResultDescriptionRendered] = useState(false);
+	const resultDescriptionRef = useCallback((element) => {
+		setIsResultDescriptionRendered(!!element);
+	}, []);
+	const describedBy = joinIds(isResultDescriptionRendered && resultDescriptionId, controlProps["aria-describedby"]);
 	useAriaAnnounceValidationState(latestValidationErrorText, !isEmptyValue && policyValidationResult.isValid !== "indeterminate");
 	useAriaAnnouncePasswordVisibility(isPasswordRevealed);
 	const setOptimisticPolicyValidationResult = (state = {}) => {
@@ -92,14 +105,16 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	const onPasswordGenerateHandler = async () => {
 		const generatedPassword = await generatePassword(validationPolicy);
-		setOptimisticPolicyValidationResult({
-			...initialPolicyValidationState,
-			isValid: true,
-			ruleResults: policyValidationResult.ruleResults.map((r) => ({
-				...r,
-				isValid: true
-			}))
-		});
+		/**
+		* The generator returns only passwords the policy accepts, so the rating
+		* is set with the password instead of after the typing debounce. It is
+		* the policy's own result: a guessed one (full strength) was overturned
+		* by the real rating, e.g. to "meets the minimum requirements". Cached,
+		* so the debounced validation of this password does not rate it again.
+		*/
+		const generatedPasswordResult = await validationPolicy.validate(generatedPassword);
+		rememberValidationResult(generatedPassword, generatedPasswordResult);
+		setPolicyValidationResult(generatedPasswordResult);
 		setIsPasswordRevealed(true);
 		onChange(generatedPassword);
 	};
@@ -155,12 +170,12 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.TextField, {
 		...rest,
-		...fieldProps,
+		"aria-describedby": describedBy,
 		value,
 		type: isPasswordRevealed ? "text" : "password",
 		onChange,
 		onPaste: onPasswordPasteHandler,
-		className: clsx(className, fieldProps.className),
+		className: clsx(className, wrapperProps.className),
 		isDisabled,
 		isInvalid,
 		isRequired,
@@ -199,11 +214,19 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 							isEmptyValue,
 							isLoading: policyValidationResult.isValid === "indeterminate",
 							policyValidationResult,
-							validationResultState: stateFromValidationResult
+							validationResultState: stateFromValidationResult,
+							isInvalid: invalidFromProps
 						}, value)
 					]
 				}),
-				isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText })
+				isValidFromValidationResult && !renderedFieldErrorId && /* @__PURE__ */ jsx(Aria.TextContext.Provider, {
+					value: null,
+					children: /* @__PURE__ */ jsx(FieldDescription, {
+						id: resultDescriptionId,
+						ref: resultDescriptionRef,
+						children: latestValidationErrorText
+					})
+				})
 			]
 		})] }), /* @__PURE__ */ jsx(FieldErrorView, {})]
 	});

package/dist/js/packages/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordCreationField.mjs","names":[],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  useAriaAnnouncePasswordVisibility,\n  useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The password of a controlled field. */\n  value?: string;\n  /** Called with the password and its validity whenever the password changes. */\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  /** The initial password of an uncontrolled field. */\n  defaultValue?: string;\n  /** The placeholder shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * The policy the password is validated against.\n   *\n   * @default defaultPasswordCreationPolicy\n   */\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props, \"\");\n\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: \"indeterminate\",\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n\n    const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n    usePolicyValidationResult(\n      validationPolicy,\n      value ?? \"\",\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        loadingRef.current = setTimeout(() => {\n          setPolicyValidationResult((r) => ({\n            ...r,\n            isValid: \"indeterminate\",\n          }));\n        }, 150);\n      },\n      ({ password, isValid, results }) => {\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n\n    const isInvalidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid === false;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    // The field derives its invalid state from the policy validation, so the\n    // hook has to see that state — not just the `isInvalid` prop — to describe\n    // the input with the field error.\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      fieldProps,\n      fieldPropsContext,\n    } = useFieldComponent({ ...props, isInvalid }, \"PasswordCreationField\");\n\n    useAriaAnnounceValidationState(\n      latestValidationErrorText,\n      !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n    );\n    useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setPolicyValidationResult((currentState) => ({\n        ...currentState,\n        isValid: true,\n        ...state,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      setOptimisticPolicyValidationResult({\n        ...initialPolicyValidationState,\n        isValid: true,\n        ruleResults: policyValidationResult.ruleResults.map((r) => ({\n          ...r,\n          isValid: true,\n        })),\n      });\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        {...fieldProps}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, fieldProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          {latestValidationErrorText && (\n            <FieldError>{latestValidationErrorText}</FieldError>\n          )}\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                key={value}\n                isEmptyValue={isEmptyValue}\n                isLoading={policyValidationResult.isValid === \"indeterminate\"}\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && (\n              <FieldDescription>{latestValidationErrorText}</FieldDescription>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordCreationField.mjs","names":["locales","styles","_Fragment"],"sources":["../../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n  type PropsWithChildren,\n  useState,\n  type ClipboardEvent,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport type {\n  PolicyValidationResult,\n  PolicyGenericDeclaration,\n  RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n  defaultPasswordCreationPolicy,\n  Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { joinIds, useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\nimport { FieldError } from \"@/components/FieldError\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  useAriaAnnouncePasswordVisibility,\n  useAriaAnnounceValidationState,\n} from \"@/components/PasswordCreationField/lib/ariaAnnounce\";\n\nexport interface PasswordCreationFieldProps\n  extends\n    PropsWithChildren<\n      Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n        Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n    >,\n    FlowComponentProps<HTMLInputElement> {\n  /** The password of a controlled field. */\n  value?: string;\n  /** Called with the password and its validity whenever the password changes. */\n  onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n  /** The initial password of an uncontrolled field. */\n  defaultValue?: string;\n  /** The placeholder shown while the field is empty. */\n  placeholder?: string;\n  /**\n   * The policy the password is validated against.\n   *\n   * @default defaultPasswordCreationPolicy\n   */\n  validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult extends Omit<\n  PolicyValidationResult,\n  \"isValid\"\n> {\n  isValid: boolean | \"indeterminate\";\n  ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n  \"PasswordCreationField\",\n  (props) => {\n    const {\n      children,\n      className,\n      ref,\n      isDisabled,\n      onValidationResult,\n      isInvalid: invalidFromProps,\n      validationPolicy:\n        validationPolicyFromProps = defaultPasswordCreationPolicy,\n      isRequired,\n      value,\n      onChange,\n      ...rest\n    } = useControlledHostValueProps(props, \"\");\n\n    const translate = useLocalizedStringFormatter(\n      locales,\n      \"PasswordCreationField\",\n    );\n\n    const validationPolicy = useMemo(\n      () => Policy.fromDeclaration(validationPolicyFromProps),\n      [validationPolicyFromProps],\n    );\n\n    const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n    const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n      isValid: \"indeterminate\",\n      complexity: {\n        min: validationPolicy.minComplexity,\n        actual: 4,\n        warning: null,\n      },\n      ruleResults: [],\n    };\n\n    const [policyValidationResult, setPolicyValidationResult] = useState(\n      initialPolicyValidationState,\n    );\n\n    const loadingRef = useRef<ReturnType<typeof setTimeout>>(null);\n    const { rememberValidationResult } = usePolicyValidationResult(\n      validationPolicy,\n      value ?? \"\",\n      () => {\n        if (isEmptyValue) {\n          return;\n        }\n\n        loadingRef.current = setTimeout(() => {\n          setPolicyValidationResult((r) => ({\n            ...r,\n            isValid: \"indeterminate\",\n          }));\n        }, 150);\n      },\n      ({ password, isValid, results }) => {\n        if (loadingRef.current) {\n          clearTimeout(loadingRef.current);\n        }\n\n        if (isEmptyValue) {\n          setPolicyValidationResult(() => ({\n            ...results,\n            isValid: true,\n          }));\n          return;\n        }\n\n        setPolicyValidationResult(() => results);\n        onValidationResult?.({ password, isValid });\n      },\n    );\n\n    const isEmptyValue = !value;\n    const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n      isEmptyValue,\n      policyValidationResult,\n    );\n    let latestValidationErrorText = undefined;\n    if (stateFromValidationResult) {\n      const [translationKey, translationValues] = generateValidationTranslation(\n        stateFromValidationResult,\n      );\n      latestValidationErrorText = translate.format(\n        translationKey,\n        translationValues,\n      );\n    }\n\n    const isValidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid;\n\n    const isInvalidFromValidationResult =\n      !isEmptyValue && stateFromValidationResult?.isValid === false;\n    const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n    const {\n      FieldErrorView,\n      FieldErrorCaptureContext,\n      wrapperProps,\n      controlProps,\n      fieldPropsContext,\n      renderedFieldErrorId,\n    } = useFieldComponent(props, \"PasswordCreationField\");\n\n    /**\n     * The result for a valid password appears after the asynchronous policy\n     * validation. react-aria resolves its description slot only when the\n     * field's validity changes, so a result that appears while the field stays\n     * valid (a generated password) was never linked. It gets its own id\n     * instead, referenced only while it is rendered.\n     *\n     * A shown error replaces it: the FormField styles hide descriptions next to\n     * an error, and a hidden description would still be announced.\n     */\n    const resultDescriptionId = useId();\n    const [isResultDescriptionRendered, setIsResultDescriptionRendered] =\n      useState(false);\n    const resultDescriptionRef = useCallback((element: Element | null) => {\n      setIsResultDescriptionRendered(!!element);\n    }, []);\n    const describedBy = joinIds(\n      isResultDescriptionRendered && resultDescriptionId,\n      controlProps[\"aria-describedby\"],\n    );\n\n    useAriaAnnounceValidationState(\n      latestValidationErrorText,\n      !isEmptyValue && policyValidationResult.isValid !== \"indeterminate\",\n    );\n    useAriaAnnouncePasswordVisibility(isPasswordRevealed);\n\n    const setOptimisticPolicyValidationResult = (\n      state: Partial<ResolvedPolicyValidationResult> = {},\n    ) => {\n      setPolicyValidationResult((currentState) => ({\n        ...currentState,\n        isValid: true,\n        ...state,\n      }));\n    };\n\n    const onPasswordGenerateHandler: ActionFn = async () => {\n      const generatedPassword = await generatePassword(validationPolicy);\n      /**\n       * The generator returns only passwords the policy accepts, so the rating\n       * is set with the password instead of after the typing debounce. It is\n       * the policy's own result: a guessed one (full strength) was overturned\n       * by the real rating, e.g. to \"meets the minimum requirements\". Cached,\n       * so the debounced validation of this password does not rate it again.\n       */\n      const generatedPasswordResult =\n        await validationPolicy.validate(generatedPassword);\n      rememberValidationResult(generatedPassword, generatedPasswordResult);\n      setPolicyValidationResult(generatedPasswordResult);\n      setIsPasswordRevealed(true);\n      onChange(generatedPassword);\n    };\n\n    const onPasswordPasteHandler = (event: ClipboardEvent) => {\n      const pastedValue = event.clipboardData?.getData(\"text\");\n      if (typeof pastedValue === \"string\" && pastedValue !== value) {\n        setOptimisticPolicyValidationResult({\n          isValid: \"indeterminate\",\n        });\n      }\n    };\n\n    const togglePasswordVisibilityHandler = () => {\n      setIsPasswordRevealed((old) => !old);\n    };\n\n    const propsContext: PropsContext = {\n      ...fieldPropsContext,\n      Button: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n      },\n      CopyButton: {\n        tunnel: {\n          id: \"button\",\n          component: \"PasswordCreationField\",\n        },\n        size: \"m\",\n        variant: \"plain\",\n        color: \"secondary\",\n        isDisabled: isDisabled,\n        className: styles.button,\n        text: value,\n      },\n      Label: {\n        ...fieldPropsContext.Label,\n        children: dynamic((localProps) => {\n          return (\n            <>\n              {localProps.children}\n              <PasswordGenerateButton\n                isDisabled={isDisabled}\n                onGeneratePasswordAction={onPasswordGenerateHandler}\n              />\n              <ValidationResultButton\n                isEmptyValue={isEmptyValue}\n                isDisabled={isDisabled}\n                policyValidationResult={policyValidationResult}\n              />\n            </>\n          );\n        }),\n      },\n    };\n\n    return (\n      <Aria.TextField\n        {...rest}\n        aria-describedby={describedBy}\n        value={value}\n        type={isPasswordRevealed ? \"text\" : \"password\"}\n        onChange={onChange}\n        onPaste={onPasswordPasteHandler}\n        className={clsx(className, wrapperProps.className)}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        <FieldErrorCaptureContext>\n          {latestValidationErrorText && (\n            <FieldError>{latestValidationErrorText}</FieldError>\n          )}\n          <PropsContextProvider\n            props={propsContext}\n            dependencies={[\n              isDisabled,\n              isRequired,\n              value,\n              policyValidationResult,\n              isEmptyValue,\n            ]}\n          >\n            {children}\n            <Aria.Group\n              isDisabled={isDisabled}\n              className={clsx(styles.inputGroup)}\n            >\n              <Aria.Input ref={ref} className={styles.input} />\n              <Aria.Group className={styles.buttonContainer}>\n                <TogglePasswordVisibilityButton\n                  className={styles.button}\n                  isVisible={isPasswordRevealed}\n                  isDisabled={isDisabled}\n                  onPress={togglePasswordVisibilityHandler}\n                />\n                <UiComponentTunnelExit\n                  id=\"button\"\n                  component=\"PasswordCreationField\"\n                />\n              </Aria.Group>\n              <ComplexityIndicator\n                key={value}\n                isEmptyValue={isEmptyValue}\n                isLoading={policyValidationResult.isValid === \"indeterminate\"}\n                policyValidationResult={policyValidationResult}\n                validationResultState={stateFromValidationResult}\n                isInvalid={invalidFromProps}\n              />\n            </Aria.Group>\n            {isValidFromValidationResult && !renderedFieldErrorId && (\n              // Out of react-aria's description slot, which would set its own\n              // id – see `resultDescriptionId`.\n              <Aria.TextContext.Provider value={null}>\n                <FieldDescription\n                  id={resultDescriptionId}\n                  ref={resultDescriptionRef}\n                >\n                  {latestValidationErrorText}\n                </FieldDescription>\n              </Aria.TextContext.Provider>\n            )}\n          </PropsContextProvider>\n        </FieldErrorCaptureContext>\n        <FieldErrorView />\n      </Aria.TextField>\n    );\n  },\n);\n\nexport default PasswordCreationField;\n"],"mappings":"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"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx
 /** @internal */
 var ComplexityIndicator = (props) => {
-	const { policyValidationResult, validationResultState, isLoading, isEmptyValue } = props;
+	const { policyValidationResult, validationResultState, isLoading, isEmptyValue, isInvalid } = props;
 	let complexityVisible;
 	let status;
 	const complexityScore = policyValidationResult?.complexity;
@@ -22,7 +22,7 @@ var ComplexityIndicator = (props) => {
 		status = "success";
 	} else {
 		complexityVisible = true;
-		status = getStatusFromPolicyValidationResult(validationResultState?.isValid ?? policyValidationResult.isValid, policyValidationResult);
+		status = isInvalid ? "danger" : getStatusFromPolicyValidationResult(validationResultState?.isValid ?? policyValidationResult.isValid, policyValidationResult);
 	}
 	const complexityFulfilled = totalFulfilledPercentage === 100;
 	const percentageClassName = clsx(ComplexityIndicator_module_default.bar, !isEmptyValue && status !== "unavailable" && ComplexityIndicator_module_default[`bar-background-status-${status}`], {

package/dist/js/packages/components/src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComplexityIndicator.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> | \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n  isLoading: boolean;\n  isEmptyValue: boolean;\n  validationResultState: StateFromLatestPolicyValidationResult;\n  policyValidationResult: ResolvedPolicyValidationResult;\n}\n\n/** @internal */\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n  const {\n    policyValidationResult,\n    validationResultState,\n    isLoading,\n    isEmptyValue,\n  } = props;\n\n  let complexityVisible;\n  let status: ComplexityStatus;\n\n  const complexityScore = policyValidationResult?.complexity;\n  const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n  const complexityFulfilledPercentage = complexityScore\n    ? Math.min(\n        (100 / (complexityScore.min + 1)) * (complexityScore.actual + 1),\n        100,\n      )\n    : 0;\n\n  const validRules = rulesResults.filter((r) => r.isValid).length;\n  const rulesFulfilledPercentage =\n    rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n  let totalFulfilledPercentage = Math.round(\n    complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n  );\n\n  if (isEmptyValue) {\n    complexityVisible = false;\n    totalFulfilledPercentage = 0;\n    status = \"success\";\n  } else {\n    complexityVisible = true;\n    status = getStatusFromPolicyValidationResult(\n      validationResultState?.isValid ?? policyValidationResult.isValid,\n      policyValidationResult,\n    );\n  }\n\n  const complexityFulfilled = totalFulfilledPercentage === 100;\n\n  const percentageClassName = clsx(\n    styles.bar,\n    !isEmptyValue &&\n      status !== \"unavailable\" &&\n      styles[`bar-background-status-${status}`],\n    {\n      [styles.loading as string]: isLoading,\n      [styles.running as string]: !complexityFulfilled,\n    },\n  );\n\n  return (\n    <div\n      aria-hidden={true}\n      data-container=\"complexity\"\n      data-complexity-visible={complexityVisible}\n      data-complexity-status={status}\n      data-complexity-percentage={totalFulfilledPercentage}\n      className={clsx(styles.complexityIndicator, {\n        [styles.hide as string]: !complexityVisible,\n      })}\n    >\n      <div\n        style={{\n          \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n        }}\n        className={percentageClassName}\n      />\n    </div>\n  );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;AAkBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,iBACE;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,oCACP,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;CACF;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,KAC1B,mCAAO,KACP,CAAC,gBACC,WAAW,iBACX,mCAAO,yBAAyB,WAClC;GACG,mCAAO,UAAoB;GAC3B,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,KAAK,mCAAO,qBAAqB,GACzC,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}
+{"version":3,"file":"ComplexityIndicator.mjs","names":["styles"],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport styles from \"./ComplexityIndicator.module.scss\";\nimport { getStatusFromPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStatusFromPolicyValidationResult\";\nimport clsx from \"clsx\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport { type Status } from \"@/lib/types/props\";\nimport type { StateFromLatestPolicyValidationResult } from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\n\nexport type ComplexityStatus = Exclude<Status, \"info\"> | \"indeterminate\";\n\nexport interface ComplexityIndicatorProps {\n  isLoading: boolean;\n  isEmptyValue: boolean;\n  validationResultState: StateFromLatestPolicyValidationResult;\n  policyValidationResult: ResolvedPolicyValidationResult;\n  /**\n   * The field is invalid for a reason outside the policy, e.g. a server error.\n   * The bar then shows danger like the field, not the password's strength.\n   */\n  isInvalid?: boolean;\n}\n\n/** @internal */\nexport const ComplexityIndicator: FC<ComplexityIndicatorProps> = (props) => {\n  const {\n    policyValidationResult,\n    validationResultState,\n    isLoading,\n    isEmptyValue,\n    isInvalid,\n  } = props;\n\n  let complexityVisible;\n  let status: ComplexityStatus;\n\n  const complexityScore = policyValidationResult?.complexity;\n  const rulesResults = policyValidationResult?.ruleResults ?? [];\n\n  const complexityFulfilledPercentage = complexityScore\n    ? Math.min(\n        (100 / (complexityScore.min + 1)) * (complexityScore.actual + 1),\n        100,\n      )\n    : 0;\n\n  const validRules = rulesResults.filter((r) => r.isValid).length;\n  const rulesFulfilledPercentage =\n    rulesResults.length > 0 ? (validRules / rulesResults.length) * 100 : 0;\n\n  let totalFulfilledPercentage = Math.round(\n    complexityFulfilledPercentage * 0.8 + rulesFulfilledPercentage * 0.2,\n  );\n\n  if (isEmptyValue) {\n    complexityVisible = false;\n    totalFulfilledPercentage = 0;\n    status = \"success\";\n  } else {\n    complexityVisible = true;\n    status = isInvalid\n      ? \"danger\"\n      : getStatusFromPolicyValidationResult(\n          validationResultState?.isValid ?? policyValidationResult.isValid,\n          policyValidationResult,\n        );\n  }\n\n  const complexityFulfilled = totalFulfilledPercentage === 100;\n\n  const percentageClassName = clsx(\n    styles.bar,\n    !isEmptyValue &&\n      status !== \"unavailable\" &&\n      styles[`bar-background-status-${status}`],\n    {\n      [styles.loading as string]: isLoading,\n      [styles.running as string]: !complexityFulfilled,\n    },\n  );\n\n  return (\n    <div\n      aria-hidden={true}\n      data-container=\"complexity\"\n      data-complexity-visible={complexityVisible}\n      data-complexity-status={status}\n      data-complexity-percentage={totalFulfilledPercentage}\n      className={clsx(styles.complexityIndicator, {\n        [styles.hide as string]: !complexityVisible,\n      })}\n    >\n      <div\n        style={{\n          \"--complexity-indicator--percentage\": totalFulfilledPercentage,\n        }}\n        className={percentageClassName}\n      />\n    </div>\n  );\n};\n\nexport default ComplexityIndicator;\n"],"mappings":";;;;;;;;AAuBA,IAAa,uBAAqD,UAAU;CAC1E,MAAM,EACJ,wBACA,uBACA,WACA,cACA,cACE;CAEJ,IAAI;CACJ,IAAI;CAEJ,MAAM,kBAAkB,wBAAwB;CAChD,MAAM,eAAe,wBAAwB,eAAe,CAAC;CAE7D,MAAM,gCAAgC,kBAClC,KAAK,IACF,OAAO,gBAAgB,MAAM,MAAO,gBAAgB,SAAS,IAC9D,GACF,IACA;CAEJ,MAAM,aAAa,aAAa,QAAQ,MAAM,EAAE,OAAO,CAAC,CAAC;CACzD,MAAM,2BACJ,aAAa,SAAS,IAAK,aAAa,aAAa,SAAU,MAAM;CAEvE,IAAI,2BAA2B,KAAK,MAClC,gCAAgC,KAAM,2BAA2B,EACnE;CAEA,IAAI,cAAc;EAChB,oBAAoB;EACpB,2BAA2B;EAC3B,SAAS;CACX,OAAO;EACL,oBAAoB;EACpB,SAAS,YACL,WACA,oCACE,uBAAuB,WAAW,uBAAuB,SACzD,sBACF;CACN;CAEA,MAAM,sBAAsB,6BAA6B;CAEzD,MAAM,sBAAsB,KAC1BA,mCAAO,KACP,CAAC,gBACC,WAAW,iBACXA,mCAAO,yBAAyB,WAClC;GACGA,mCAAO,UAAoB;GAC3BA,mCAAO,UAAoB,CAAC;CAC/B,CACF;CAEA,OACE,oBAAC,OAAD;EACE,eAAa;EACb,kBAAe;EACf,2BAAyB;EACzB,0BAAwB;EACxB,8BAA4B;EAC5B,WAAW,KAAKA,mCAAO,qBAAqB,GACzCA,mCAAO,OAAiB,CAAC,kBAC5B,CAAC;EAED,UAAA,oBAAC,OAAD;GACE,OAAO,EACL,sCAAsC,yBACxC;GACA,WAAW;EACZ,CAAA;CACE,CAAA;AAET"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordGenerateButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { Action, type ActionFn } from \"@/components/Action\";\n\ninterface Props {\n  isDisabled?: boolean;\n  onGeneratePasswordAction?: ActionFn;\n}\n\n/** @internal */\nexport const PasswordGenerateButton: FC<Props> = (props) => {\n  const { isDisabled, onGeneratePasswordAction } = props;\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n\n  return (\n    <Action onAction={onGeneratePasswordAction} showFeedback={false}>\n      <Button\n        data-component=\"generatePassword\"\n        isDisabled={isDisabled}\n        variant=\"plain\"\n        color=\"secondary\"\n        // The button sits in the label, where \"Generate\" alone does not say\n        // what is generated.\n        aria-label={translate.format(\"button.generate.label\")}\n      >\n        {translate.format(\"button.generate\")}\n      </Button>\n    </Action>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,YAAY,6BAA6B;CACjD,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAA0B,cAAc;EACxD,UAAA,oBAAC,QAAD;GACE,kBAAe;GACH;GACZ,SAAQ;GACR,OAAM;GAGN,cAAY,UAAU,OAAO,uBAAuB;GAEnD,UAAA,UAAU,OAAO,iBAAiB;EAC7B,CAAA;CACF,CAAA;AAEZ"}
+{"version":3,"file":"PasswordGenerateButton.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { Button } from \"@/components/Button\";\nimport { Action, type ActionFn } from \"@/components/Action\";\n\ninterface Props {\n  isDisabled?: boolean;\n  onGeneratePasswordAction?: ActionFn;\n}\n\n/** @internal */\nexport const PasswordGenerateButton: FC<Props> = (props) => {\n  const { isDisabled, onGeneratePasswordAction } = props;\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n\n  return (\n    <Action onAction={onGeneratePasswordAction} showFeedback={false}>\n      <Button\n        data-component=\"generatePassword\"\n        isDisabled={isDisabled}\n        variant=\"plain\"\n        color=\"secondary\"\n        // The button sits in the label, where \"Generate\" alone does not say\n        // what is generated.\n        aria-label={translate.format(\"button.generate.label\")}\n      >\n        {translate.format(\"button.generate\")}\n      </Button>\n    </Action>\n  );\n};\n"],"mappings":";;;;;;;;;;AAYA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,YAAY,6BAA6B;CACjD,MAAM,YAAY,4BAChBA,kBACA,uBACF;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAA0B,cAAc;EACxD,UAAA,oBAAC,QAAD;GACE,kBAAe;GACH;GACZ,SAAQ;GACR,OAAM;GAGN,cAAY,UAAU,OAAO,uBAAuB;GAEnD,UAAA,UAAU,OAAO,iBAAiB;EAC7B,CAAA;CACF,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglePasswordVisibilityButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n  isDisabled?: boolean;\n  isVisible: boolean;\n  onPress: ActionFn;\n}\n\n/** @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n  isVisible,\n  isDisabled = false,\n  onPress,\n  className,\n}) => {\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n\n  const icon = isVisible ? <IconHide /> : <IconShow />;\n  const tooltipText = translate.format(\n    \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n  );\n\n  return (\n    <Action onAction={onPress}>\n      <TooltipTrigger>\n        <Button\n          className={className}\n          size=\"m\"\n          tunnel={null}\n          variant=\"plain\"\n          color=\"secondary\"\n          isDisabled={isDisabled}\n          data-component=\"toggleRevealPassword\"\n          aria-label={tooltipText}\n        >\n          {icon}\n          <Tooltip>{tooltipText}</Tooltip>\n        </Button>\n      </TooltipTrigger>\n    </Action>\n  );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAa,kCAA6C,EACxD,WACA,aAAa,OACb,SACA,gBACI;CACJ,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,MAAM,OAAO,YAAY,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACnD,MAAM,cAAc,UAAU,OAC5B,8BAA8B,YAAY,SAAS,OACrD;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAChB,UAAA,oBAAC,gBAAD,EAAA,UACE,qBAAC,QAAD;GACa;GACX,MAAK;GACL,QAAQ;GACR,SAAQ;GACR,OAAM;GACM;GACZ,kBAAe;GACf,cAAY;GARd,UAAA,CAUG,MACD,oBAAC,SAAD,EAAA,UAAU,YAAqB,CAAA,CACzB;EACM,CAAA,EAAA,CAAA;CACV,CAAA;AAEZ"}
+{"version":3,"file":"TogglePasswordVisibilityButton.mjs","names":["locales"],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\nimport Button from \"@/components/Button\";\nimport { IconHide, IconShow } from \"@/components/Icon/components/icons\";\nimport { Action, type ActionFn } from \"@/components/Action\";\nimport locales from \"./../../locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\n\ninterface Props extends PropsWithClassName {\n  isDisabled?: boolean;\n  isVisible: boolean;\n  onPress: ActionFn;\n}\n\n/** @internal */\nexport const TogglePasswordVisibilityButton: FC<Props> = ({\n  isVisible,\n  isDisabled = false,\n  onPress,\n  className,\n}) => {\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n\n  const icon = isVisible ? <IconHide /> : <IconShow />;\n  const tooltipText = translate.format(\n    \"button.generate.tooltip.\" + (isVisible ? \"hide\" : \"show\"),\n  );\n\n  return (\n    <Action onAction={onPress}>\n      <TooltipTrigger>\n        <Button\n          className={className}\n          size=\"m\"\n          tunnel={null}\n          variant=\"plain\"\n          color=\"secondary\"\n          isDisabled={isDisabled}\n          data-component=\"toggleRevealPassword\"\n          aria-label={tooltipText}\n        >\n          {icon}\n          <Tooltip>{tooltipText}</Tooltip>\n        </Button>\n      </TooltipTrigger>\n    </Action>\n  );\n};\n\nexport default TogglePasswordVisibilityButton;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAa,kCAA6C,EACxD,WACA,aAAa,OACb,SACA,gBACI;CACJ,MAAM,YAAY,4BAChBA,kBACA,uBACF;CAEA,MAAM,OAAO,YAAY,oBAAC,UAAD,CAAW,CAAA,IAAI,oBAAC,UAAD,CAAW,CAAA;CACnD,MAAM,cAAc,UAAU,OAC5B,8BAA8B,YAAY,SAAS,OACrD;CAEA,OACE,oBAAC,QAAD;EAAQ,UAAU;EAChB,UAAA,oBAAC,gBAAD,EAAA,UACE,qBAAC,QAAD;GACa;GACX,MAAK;GACL,QAAQ;GACR,SAAQ;GACR,OAAM;GACM;GACZ,kBAAe;GACf,cAAY;GARd,UAAA,CAUG,MACD,oBAAC,SAAD,EAAA,UAAU,YAAqB,CAAA,CACzB;EACM,CAAA,EAAA,CAAA;CACV,CAAA;AAEZ"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ValidationResultButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import { type FC, useId } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\nimport locales from \"./../../locales/*.locale.json\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport ValidationResultEntry from \"@/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry\";\nimport { Button } from \"@/components/Button\";\nimport {\n  ContextualHelp,\n  ContextualHelpTrigger,\n} from \"@/components/ContextualHelp\";\nimport { Heading } from \"@/components/Heading\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./ValidationResultButton.module.scss\";\n\ninterface Props extends PropsWithClassName {\n  policyValidationResult?: ResolvedPolicyValidationResult;\n  isDisabled?: boolean;\n  isEmptyValue: boolean;\n}\n\n/** @internal */\nexport const ValidationResultButton: FC<Props> = (props) => {\n  const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n  const headingId = useId();\n\n  let validationResults = policyValidationResult?.ruleResults?.filter((r) => {\n    return isEmptyValue ? !r.isValid : true;\n  });\n  if (validationResults && validationResults.length === 0 && isEmptyValue) {\n    // if we have no rules to show on first info - just list them all\n    validationResults = policyValidationResult?.ruleResults;\n  }\n\n  const validationResultComponents =\n    validationResults?.map((result, index) => {\n      return (\n        <ValidationResultEntry\n          key={`${result.identifier}-${index}`}\n          result={result}\n        />\n      );\n    }) ?? [];\n\n  return (\n    <ContextualHelpTrigger\n      subject={translate.format(\"password.requirements.subject\")}\n    >\n      <Button\n        data-component=\"showPasswordRules\"\n        isDisabled={isDisabled}\n        className={className}\n      />\n      <ContextualHelp>\n        <Heading id={headingId}>\n          {translate.format(\"password.requirements.heading\")}\n        </Heading>\n        {/* A list, so a screen reader announces the requirements as one unit\n            with their number — and each rule with its status. */}\n        <ul aria-labelledby={headingId} className={styles.validationResultList}>\n          {validationResultComponents.length === 0 ? (\n            <ValidationResultEntry\n              result={{ isValid: true }}\n              unspecifiedRules\n            />\n          ) : (\n            validationResultComponents\n          )}\n        </ul>\n      </ContextualHelp>\n    </ContextualHelpTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,wBAAwB,YAAY,cAAc,cAAc;CAExE,MAAM,YAAY,4BAChB,kBACA,uBACF;CACA,MAAM,YAAY,MAAM;CAExB,IAAI,oBAAoB,wBAAwB,aAAa,QAAQ,MAAM;EACzE,OAAO,eAAe,CAAC,EAAE,UAAU;CACrC,CAAC;CACD,IAAI,qBAAqB,kBAAkB,WAAW,KAAK,cAEzD,oBAAoB,wBAAwB;CAG9C,MAAM,6BACJ,mBAAmB,KAAK,QAAQ,UAAU;EACxC,OACE,oBAAC,uBAAD,EAEU,OACT,GAFM,GAAG,OAAO,WAAW,GAAG,OAE9B;CAEL,CAAC,KAAK,CAAC;CAET,OACE,qBAAC,uBAAD;EACE,SAAS,UAAU,OAAO,+BAA+B;EAD3D,UAAA,CAGE,oBAAC,QAAD;GACE,kBAAe;GACH;GACD;EACZ,CAAA,GACD,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,SAAD;GAAS,IAAI;GACV,UAAA,UAAU,OAAO,+BAA+B;EAC1C,CAAA,GAGT,oBAAC,MAAD;GAAI,mBAAiB;GAAW,WAAW,sCAAO;GAC/C,UAAA,2BAA2B,WAAW,IACrC,oBAAC,uBAAD;IACE,QAAQ,EAAE,SAAS,KAAK;IACxB,kBAAA;GACD,CAAA,IAED;EAEA,CAAA,CACU,EAAA,CAAA,CACK;;AAE3B"}
+{"version":3,"file":"ValidationResultButton.mjs","names":["locales","styles"],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import { type FC, useId } from \"react\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\nimport locales from \"./../../locales/*.locale.json\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\nimport ValidationResultEntry from \"@/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry\";\nimport { Button } from \"@/components/Button\";\nimport {\n  ContextualHelp,\n  ContextualHelpTrigger,\n} from \"@/components/ContextualHelp\";\nimport { Heading } from \"@/components/Heading\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport styles from \"./ValidationResultButton.module.scss\";\n\ninterface Props extends PropsWithClassName {\n  policyValidationResult?: ResolvedPolicyValidationResult;\n  isDisabled?: boolean;\n  isEmptyValue: boolean;\n}\n\n/** @internal */\nexport const ValidationResultButton: FC<Props> = (props) => {\n  const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n  const translate = useLocalizedStringFormatter(\n    locales,\n    \"PasswordCreationField\",\n  );\n  const headingId = useId();\n\n  let validationResults = policyValidationResult?.ruleResults?.filter((r) => {\n    return isEmptyValue ? !r.isValid : true;\n  });\n  if (validationResults && validationResults.length === 0 && isEmptyValue) {\n    // if we have no rules to show on first info - just list them all\n    validationResults = policyValidationResult?.ruleResults;\n  }\n\n  const validationResultComponents =\n    validationResults?.map((result, index) => {\n      return (\n        <ValidationResultEntry\n          key={`${result.identifier}-${index}`}\n          result={result}\n        />\n      );\n    }) ?? [];\n\n  return (\n    <ContextualHelpTrigger\n      subject={translate.format(\"password.requirements.subject\")}\n    >\n      <Button\n        data-component=\"showPasswordRules\"\n        isDisabled={isDisabled}\n        className={className}\n      />\n      <ContextualHelp>\n        <Heading id={headingId}>\n          {translate.format(\"password.requirements.heading\")}\n        </Heading>\n        {/* A list, so a screen reader announces the requirements as one unit\n            with their number — and each rule with its status. */}\n        <ul aria-labelledby={headingId} className={styles.validationResultList}>\n          {validationResultComponents.length === 0 ? (\n            <ValidationResultEntry\n              result={{ isValid: true }}\n              unspecifiedRules\n            />\n          ) : (\n            validationResultComponents\n          )}\n        </ul>\n      </ContextualHelp>\n    </ContextualHelpTrigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAsBA,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,wBAAwB,YAAY,cAAc,cAAc;CAExE,MAAM,YAAY,4BAChBA,kBACA,uBACF;CACA,MAAM,YAAY,MAAM;CAExB,IAAI,oBAAoB,wBAAwB,aAAa,QAAQ,MAAM;EACzE,OAAO,eAAe,CAAC,EAAE,UAAU;CACrC,CAAC;CACD,IAAI,qBAAqB,kBAAkB,WAAW,KAAK,cAEzD,oBAAoB,wBAAwB;CAG9C,MAAM,6BACJ,mBAAmB,KAAK,QAAQ,UAAU;EACxC,OACE,oBAAC,uBAAD,EAEU,OACT,GAFM,GAAG,OAAO,WAAW,GAAG,OAE9B;CAEL,CAAC,KAAK,CAAC;CAET,OACE,qBAAC,uBAAD;EACE,SAAS,UAAU,OAAO,+BAA+B;EAD3D,UAAA,CAGE,oBAAC,QAAD;GACE,kBAAe;GACH;GACD;EACZ,CAAA,GACD,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,SAAD;GAAS,IAAI;GACV,UAAA,UAAU,OAAO,+BAA+B;EAC1C,CAAA,GAGT,oBAAC,MAAD;GAAI,mBAAiB;GAAW,WAAWC,sCAAO;GAC/C,UAAA,2BAA2B,WAAW,IACrC,oBAAC,uBAAD;IACE,QAAQ,EAAE,SAAS,KAAK;IACxB,kBAAA;GACD,CAAA,IAED;EAEA,CAAA,CACU,EAAA,CAAA,CACK;;AAE3B"}