npm - @mittwald/flow-react-components - Versions diffs - 1.3.0-next.2 → 1.3.0-next.21 - Mend

@mittwald/flow-react-components 1.3.0-next.2 → 1.3.0-next.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (132) hide show

package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs CHANGED Viewed

@@ -2,6 +2,7 @@
 /* */
 //#region src/components/Navigation/Navigation.module.scss
 var navigation = "flow--navigation";
+var linkList = "flow--navigation--link-list";
 var item = "flow--navigation--item";
 var icon = "flow--navigation--icon";
 var checkMark = "flow--navigation--check-mark";
@@ -11,6 +12,7 @@ var avatar = "flow--navigation--avatar";
 var badge = "flow--navigation--badge";
 var Navigation_module_default = {
 	navigation,
+	linkList,
 	item,
 	"switch": "flow--navigation--switch",
 	icon,
@@ -21,6 +23,6 @@ var Navigation_module_default = {
 	badge
 };
 //#endregion
-export { ariaDisabled, avatar, badge, checkMark, controlIcon, Navigation_module_default as default, icon, item, navigation };
+export { ariaDisabled, avatar, badge, checkMark, controlIcon, Navigation_module_default as default, icon, item, linkList, navigation };
 //# sourceMappingURL=Navigation.module.mjs.map

package/dist/js/packages/components/src/components/Navigation/Navigation.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n@use \"@/styles/mixins/ellipsis\";\n\n.navigation {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n ul {\n display: flex;\n flex-direction: column;\n row-gap: var(--menu--item-to-item-spacing);\n\n &:empty {\n display: none;\n }\n }\n\n .item {\n @include menuItem.menuItem();\n\n > .icon {\n order: 0;\n flex-shrink: 0;\n }\n\n > :not(.icon) {\n order: 1;\n }\n\n > :not(.icon, .badge) {\n @include ellipsis.ellipsis;\n\n min-width: 0;\n }\n\n .badge {\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n }\n\n hr {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Navigation.module.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/menuItem\";\n@use \"@/styles/mixins/ellipsis\";\n\n.navigation {\n display: flex;\n flex-direction: column;\n min-width: 0;\n\n .linkList {\n display: flex;\n flex-direction: column;\n row-gap: var(--menu--item-to-item-spacing);\n\n &:empty {\n display: none;\n }\n }\n\n .item {\n @include menuItem.menuItem();\n\n > .icon {\n order: 0;\n flex-shrink: 0;\n }\n\n > :not(.icon) {\n order: 1;\n }\n\n > :not(.icon, .badge) {\n @include ellipsis.ellipsis;\n\n min-width: 0;\n }\n\n .badge {\n margin-inline-start: auto;\n flex-shrink: 0;\n }\n }\n\n // A consumer-placed `Separator`, which is a plain FC — Navigation's props\n // context cannot inject a class into it.\n // stylelint-disable-next-line selector-max-type -- consumer separator\n hr {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client"
 /* */
 import { UiComponentTunnelExit } from "../../../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import Navigation_module_default from "../../Navigation.module.mjs";
 import { Children } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx
@@ -8,7 +9,10 @@ var LinkListTunnelExit = (props) => {
 	return /* @__PURE__ */ jsx(UiComponentTunnelExit, {
 		...props,
 		children: (children) => {
-			if (Children.count(children) >= 1) return /* @__PURE__ */ jsx("ul", { children });
+			if (Children.count(children) >= 1) return /* @__PURE__ */ jsx("ul", {
+				className: Navigation_module_default.linkList,
+				children
+			});
 			return null;
 		}
 	});

package/dist/js/packages/components/src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkListTunnelExit.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n return (\n <UiComponentTunnelExit\n {...props}\n children={(children) => {\n if (Children.count(children) >= 1) {\n return <ul>{children}</ul>;\n }\n\n return null;\n }}\n />\n );\n};\n"],"mappings":"~~;;;;;;AAGA~~,IAAa,sBAAoD,UAAU;CACzE,OACE,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa;GACtB,IAAI,SAAS,MAAM,QAAQ,KAAK,GAC9B,OAAO,oBAAC,MAAD,~~EAAK~~,~~SAAa~~,CAAA;~~GAG3B~~,OAAO;EACT;CACD,CAAA;AAEL"}
1	+ {"version":3,"file":"LinkListTunnelExit.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit.tsx"],"sourcesContent":["import { Children } from \"react\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport styles from \"../../Navigation.module.scss\";\n\nexport const LinkListTunnelExit: typeof UiComponentTunnelExit = (props) => {\n return (\n <UiComponentTunnelExit\n {...props}\n children={(children) => {\n if (Children.count(children) >= 1) {\n return <ul className={styles.linkList}>{children}</ul>;\n }\n\n return null;\n }}\n />\n );\n};\n"],"mappings":";;;;;;;AAIA,IAAa,sBAAoD,UAAU;CACzE,OACE,oBAAC,uBAAD;EACE,GAAI;EACJ,WAAW,aAAa;GACtB,IAAI,SAAS,MAAM,QAAQ,KAAK,GAC9B,OAAO,oBAAC,MAAD;IAAI,WAAW,0BAAO;IAAW;GAAa,CAAA;GAGvD,OAAO;EACT;CACD,CAAA;AAEL"}

package/dist/js/packages/components/src/components/Navigation/components/NavigationGroup/NavigationGroup.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationGroup.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss"],"sourcesContent":[".navigationGroup {\n &:not(.collapsable) ul {\n padding-inline: var(--accordion--padding-x);\n padding-block: var(--accordion--padding-y);\n }\n\n &:not(:last-child) {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n\n .label {\n display: block;\n padding-block: var(--accordion--padding-y);\n padding-inline: var(--accordion--padding-x);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"NavigationGroup.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Navigation/components/NavigationGroup/NavigationGroup.module.scss"],"sourcesContent":[".navigationGroup {\n &:not(.collapsable) :global(.flow--navigation--link-list) {\n padding-inline: var(--accordion--padding-x);\n padding-block: var(--accordion--padding-y);\n }\n\n &:not(:last-child) {\n margin-bottom: var(--menu--group-to-group-spacing);\n }\n\n .label {\n display: block;\n padding-block: var(--accordion--padding-y);\n padding-inline: var(--accordion--padding-x);\n }\n}\n"],"mappings":""}

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

	@@ -1 +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 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":""}
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":""}

package/dist/js/packages/components/src/components/Overlay/Overlay.module.mjs CHANGED Viewed

@@ -2,13 +2,15 @@
 /* */
 //#region src/components/Overlay/Overlay.module.scss
 var overlay = "flow--overlay";
+var viewport = "flow--overlay--viewport";
 var suspense = "flow--overlay--suspense";
 var Overlay_module_default = {
 	overlay,
 	"overlay-fade": "flow--overlay--overlay-fade",
+	viewport,
 	suspense
 };
 //#endregion
-export { Overlay_module_default as default, overlay, suspense };
+export { Overlay_module_default as default, overlay, suspense, viewport };
 //# sourceMappingURL=Overlay.module.mjs.map

package/dist/js/packages/components/src/components/Overlay/Overlay.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.module.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.module.scss"],"sourcesContent":["/* Full-page backdrop behind every overlay (Modal, LightBox, …).\n\n Sized to `--visual-viewport-height`, the property the Modal wrapper uses too,\n so the whole overlay stack tracks the on-screen keyboard as one. react-aria\n publishes it on this element and updates it with the visual viewport.\n\n Not `--page-height` (the full document height): this element is `fixed`, so\n anything past the viewport never shows, while `backdrop-filter` blurs the\n whole layer every frame. Chromium drops an oversized one for single frames\n while scrolling, flickering backdrop and modal alike. #2338 switched\n `absolute` → `fixed` and added the blur, but kept the `--page-height` that\n `absolute` had needed. /\n.overlay {\n position: fixed;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--visual-viewport-height);\n isolation: isolate;\n background: var(--overlay--backdrop-color);\n backdrop-filter: blur(var(--blur));\n\n &[data-entering] {\n animation: overlay-fade var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: overlay-fade var(--transition--duration--default) reverse ease-in;\n }\n}\n\n/ Fallback shown while suspended overlay content loads. */\n.suspense {\n padding: var(--size-px--xl);\n}\n\n@keyframes overlay-fade {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-contrast: more), (prefers-reduced-transparency) {\n .overlay {\n backdrop-filter: none;\n background-color: var(--dark--color--600);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Overlay.module.mjs","names":[],"sources":["../../../../../../../src/components/Overlay/Overlay.module.scss"],"sourcesContent":["/* Full-page backdrop behind every overlay (Modal, LightBox, …).\n\n Sized to `--visual-viewport-height`, the property the Modal wrapper uses too,\n so the whole overlay stack tracks the on-screen keyboard as one. react-aria\n publishes it on this element and updates it with the visual viewport.\n\n Not `--page-height` (the full document height): this element is `fixed`, so\n anything past the viewport never shows, while `backdrop-filter` blurs the\n whole layer every frame. Chromium drops an oversized one for single frames\n while scrolling, flickering backdrop and modal alike. #2338 switched\n `absolute` → `fixed` and added the blur, but kept the `--page-height` that\n `absolute` had needed. /\n.overlay {\n position: fixed;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: var(--visual-viewport-height);\n isolation: isolate;\n background: var(--overlay--backdrop-color);\n backdrop-filter: blur(var(--blur));\n\n &[data-entering] {\n animation: overlay-fade var(--transition--duration--slow);\n }\n\n &[data-exiting] {\n animation: overlay-fade var(--transition--duration--default) reverse ease-in;\n }\n}\n\n/ Centering viewport between the backdrop and react-aria's modal wrapper.\n Sized to the visual viewport so it tracks the on-screen keyboard. Modal,\n OffCanvas and LightBox refine it (padding, pointer-events) — they used to\n repeat this whole block behind a `> div` selector each. /\n.viewport {\n position: fixed;\n height: var(--visual-viewport-height);\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: center;\n align-items: center;\n}\n\n/ Fallback shown while suspended overlay content loads. */\n.suspense {\n padding: var(--size-px--xl);\n}\n\n@keyframes overlay-fade {\n 0% {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@media (prefers-contrast: more), (prefers-reduced-transparency) {\n .overlay {\n backdrop-filter: none;\n background-color: var(--dark--color--600);\n }\n}\n"],"mappings":""}

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

@@ -4,7 +4,7 @@ import { useIsActivityActive } from "../../Activity/context.mjs";
 import DivView from "../../../views/DivView.mjs";
 import Overlay_module_default from "../Overlay.module.mjs";
 import { OverlaySuspenseFallback } from "./OverlaySuspenseFallback.mjs";
-import useKeepBrowserExtensionsInteractive from "../../../lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs";
+import useKeepBrowserExtensionsInteractive, { isBrowserExtensionNode } from "../../../lib/hooks/dom/useKeepBrowserExtensionsInteractive.mjs";
 import { Suspense } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Aria from "react-aria-components";
@@ -12,6 +12,41 @@ import { UNSAFE_PortalProvider } from "react-aria";
 //#region src/components/Overlay/components/OverlayContent.tsx
 var overlayContainerAttribute = "data-flow-overlays";
 /**
+* Nodes a browser extension appends (e.g. 1Password's inline menu) don't count
+* as covering: they belong on top anyway, and moving the container for them
+* 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.
+*/
+var isCoveredByPageContent = (container) => {
+	for (let node = container.nextElementSibling; node; node = node.nextElementSibling) if (!isBrowserExtensionNode(node)) return true;
+	return false;
+};
+/**
+* Only the container moves, never the nodes appended after it: those are
+* foreign, and moving them costs state we cannot restore (an iframe reloads).
+* The container's own state we can. Moving a node blurs the focused element
+* inside it and resets every scroll container inside to the top. `moveBefore`
+* keeps the focus (and, in Chromium, the scroll positions); the rest is
+* restored afterwards.
+*/
+var moveToEnd = (container) => {
+	const body = document.body;
+	const focused = document.activeElement;
+	const scrolled = Array.from(container.querySelectorAll("*")).filter((element) => element.scrollTop !== 0 || element.scrollLeft !== 0).map((element) => [
+		element,
+		element.scrollTop,
+		element.scrollLeft
+	]);
+	if (typeof body.moveBefore === "function") body.moveBefore(container, null);
+	else body.append(container);
+	for (const [element, scrollTop, scrollLeft] of scrolled) {
+		element.scrollTop = scrollTop;
+		element.scrollLeft = scrollLeft;
+	}
+	if (focused instanceof HTMLElement && container.contains(focused) && document.activeElement !== focused) focused.focus({ preventScroll: true });
+};
+/**
 * Render overlays into a dedicated container instead of `document.body`.
 *
 * React Aria `FocusScope` relies on nearby sibling nodes (sentinels + overlay).
@@ -33,7 +68,7 @@ var getOverlayContainer = () => {
 	if (typeof document === "undefined") return null;
 	const existingContainer = document.querySelector(`body > [${overlayContainerAttribute}]`);
 	if (existingContainer) {
-		if (existingContainer !== document.body.lastElementChild) document.body.append(existingContainer);
+		if (isCoveredByPageContent(existingContainer)) moveToEnd(existingContainer);
 		return existingContainer;
 	}
 	const container = document.createElement("div");
@@ -58,13 +93,16 @@ var OverlayContent = (props) => {
 		children: /* @__PURE__ */ jsx(Aria.ModalOverlay, {
 			...restProps,
 			className,
-			children: /* @__PURE__ */ jsx(DivView, { children: /* @__PURE__ */ jsx(Aria.Modal, { children: /* @__PURE__ */ jsx(Suspense, {
-				fallback: /* @__PURE__ */ jsx(Fallback, {}),
-				children: /* @__PURE__ */ jsx(Aria.Dialog, {
-					"aria-labelledby": ariaLabelledBy,
-					children
-				})
-			}) }) })
+			children: /* @__PURE__ */ jsx(DivView, {
+				className: Overlay_module_default.viewport,
+				children: /* @__PURE__ */ jsx(Aria.Modal, { children: /* @__PURE__ */ jsx(Suspense, {
+					fallback: /* @__PURE__ */ jsx(Fallback, {}),
+					children: /* @__PURE__ */ jsx(Aria.Dialog, {
+						"aria-labelledby": ariaLabelledBy,
+						children
+					})
+				}) })
+			})
 		})
 	});
 };

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

	@@ -1 +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 { useKeepBrowserExtensionsInteractive } from \"@/lib/hooks/dom/useKeepBrowserExtensionsInteractive\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\n\nconst overlayContainerAttribute = \"data-flow-overlays\";\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 (existingContainer ~~!== document.body.lastElementChild~~) {\n ~~document.body.append~~(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 <DivView>\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":";;;;;;;;;;;;AAUA,IAAM,~~4BAA4B~~;;;;;;;;;;;;;;;;;;;~~AAoBlC~~,IAAM,4BAAgD;CACpD,IAAI,OAAO,aAAa,aACtB,OAAO;CAGT,MAAM,oBAAoB,SAAS,cACjC,WAAW,0BAA0B,EACvC;CAEA,IAAI,mBAAmB;EACrB,IAAI,~~sBAAsB~~,~~SAAS~~,~~KAAK~~,~~kBACtC~~,~~SAAS,KAAK,OAAO,~~iBAAiB;~~EAExC~~,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;~~GAC3C~~,UAAA,oBAAC,SAAD,~~EAAA~~,~~UACE~~,oBAAC,KAAK,OAAN,EAAA,UACE,oBAAC,UAAD;~~IAAU~~,UAAU,oBAAC,UAAD,CAAW,CAAA;~~IAC7B~~,UAAA,oBAAC,KAAK,QAAN;~~KAAa~~,mBAAiB;~~KAC3B~~;~~IACU~~,CAAA;~~GACL~~,CAAA,EACA,CAAA,~~EACL,~~CAAA;EACQ,CAAA;CACE,CAAA;AAE3B"}
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"}

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

@@ -21,6 +21,7 @@ import { TogglePasswordVisibilityButton } from "./components/TogglePasswordVisib
 import { ValidationResultButton } from "./components/ValidationResultButton/ValidationResultButton.mjs";
 import { PasswordGenerateButton } from "./components/PasswordGenerateButton/PasswordGenerateButton.mjs";
 import { usePolicyValidationResult } from "./lib/usePolicyValidationResult.mjs";
+import { useAriaAnnouncePasswordVisibility, useAriaAnnounceValidationState } from "./lib/ariaAnnounce.mjs";
 import clsx from "clsx";
 import { useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -29,7 +30,6 @@ import * as Aria from "react-aria-components";
 /** @flr-generate all */
 var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	const { children, className, ref, isDisabled, onValidationResult, isInvalid: invalidFromProps, validationPolicy: validationPolicyFromProps = defaultPasswordCreationPolicy, isRequired, value, onChange, ...rest } = useControlledHostValueProps(props, "");
-	const { FieldErrorView, FieldErrorCaptureContext, fieldProps, fieldPropsContext } = useFieldComponent(props, "PasswordCreationField");
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
 	const validationPolicy = useMemo(() => Policy.fromDeclaration(validationPolicyFromProps), [validationPolicyFromProps]);
 	const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);
@@ -77,6 +77,12 @@ 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");
+	useAriaAnnounceValidationState(latestValidationErrorText, !isEmptyValue && policyValidationResult.isValid !== "indeterminate");
+	useAriaAnnouncePasswordVisibility(isPasswordRevealed);
 	const setOptimisticPolicyValidationResult = (state = {}) => {
 		setPolicyValidationResult((currentState) => ({
 			...currentState,
@@ -149,6 +155,7 @@ var PasswordCreationField = flowComponent("PasswordCreationField", (props) => {
 	};
 	return /* @__PURE__ */ jsxs(Aria.TextField, {
 		...rest,
+		...fieldProps,
 		value,
 		type: isPasswordRevealed ? "text" : "password",
 		onChange,

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

	@@ -1 +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\";\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 {\n FieldErrorView,\n FieldErrorCaptureContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props, \"PasswordCreationField\");\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 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 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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"}
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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"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.mjs CHANGED Viewed

@@ -7,6 +7,7 @@ import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton.tsx
+/** @internal */
 var PasswordGenerateButton = (props) => {
 	const { isDisabled, onGeneratePasswordAction } = props;
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
@@ -18,6 +19,7 @@ var PasswordGenerateButton = (props) => {
 			isDisabled,
 			variant: "plain",
 			color: "secondary",
+			"aria-label": translate.format("button.generate.label"),
 			children: translate.format("button.generate")
 		})
 	});

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

	@@ -1 +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\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 >\n {translate.format(\"button.generate\")}\n </Button>\n </Action>\n );\n};\n"],"mappings":"~~;;;;;;;;;AAWA~~,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;~~GAEL~~,UAAA,UAAU,OAAO,iBAAiB;EAC7B,CAAA;CACF,CAAA;AAEZ"}
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"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.mjs CHANGED Viewed

@@ -7,12 +7,15 @@ import { Heading } from "../../../Heading/Heading.mjs";
 import { ContextualHelp } from "../../../ContextualHelp/ContextualHelp.mjs";
 import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import { ValidationResultEntry } from "../ValidationResultEntry/ValidationResultEntry.mjs";
-import "react";
+import ValidationResultButton_module_default from "./ValidationResultButton.module.mjs";
+import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx
+/** @internal */
 var ValidationResultButton = (props) => {
 	const { policyValidationResult, isDisabled, isEmptyValue, className } = props;
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
+	const headingId = useId();
 	let validationResults = policyValidationResult?.ruleResults?.filter((r) => {
 		return isEmptyValue ? !r.isValid : true;
 	});
@@ -26,14 +29,17 @@ var ValidationResultButton = (props) => {
 			"data-component": "showPasswordRules",
 			isDisabled,
 			className
-		}), /* @__PURE__ */ jsxs(ContextualHelp, { children: [
-			/* @__PURE__ */ jsx(Heading, { children: translate.format("password.requirements.heading") }),
-			validationResultComponents.length === 0 && /* @__PURE__ */ jsx(ValidationResultEntry, {
+		}), /* @__PURE__ */ jsxs(ContextualHelp, { children: [/* @__PURE__ */ jsx(Heading, {
+			id: headingId,
+			children: translate.format("password.requirements.heading")
+		}), /* @__PURE__ */ jsx("ul", {
+			"aria-labelledby": headingId,
+			className: ValidationResultButton_module_default.validationResultList,
+			children: validationResultComponents.length === 0 ? /* @__PURE__ */ jsx(ValidationResultEntry, {
 				result: { isValid: true },
 				unspecifiedRules: true
-			}),
-			validationResultComponents
-		] })]
+			}) : validationResultComponents
+		})] })]
 	});
 };
 //#endregion

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ValidationResultButton.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.tsx"],"sourcesContent":["import { type FC } 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\";\n\ninterface Props extends PropsWithClassName {\n policyValidationResult?: ResolvedPolicyValidationResult;\n isDisabled?: boolean;\n isEmptyValue: boolean;\n}\n\nexport const ValidationResultButton: FC<Props> = (props) => {\n const { policyValidationResult, isDisabled, isEmptyValue, className } = props;\n\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\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>{translate.format(\"password.requirements.heading\")}</Heading>\n {validationResultComponents.length === 0 && (\n <ValidationResultEntry result={{ isValid: true }} unspecifiedRules />\n )}\n {validationResultComponents}\n </ContextualHelp>\n </ContextualHelpTrigger>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;AAoBA~~,IAAa,0BAAqC,UAAU;CAC1D,MAAM,EAAE,wBAAwB,YAAY,cAAc,cAAc;CAExE,MAAM,YAAY,4BAChB,kBACA,uBACF;~~CAEA~~,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~~;GACE~~,oBAAC,SAAD,~~EAAA~~,~~UAAU~~,UAAU,OAAO,+BAA+B,~~EAAW~~,~~CAAA~~;~~GACpE~~,2BAA2B,WAAW,~~KACrC~~,oBAAC,uBAAD;~~IAAuB~~,QAAQ,EAAE,SAAS,KAAK;~~IAAG~~,kBAAA;~~GAAkB~~,CAAA;~~GAErE;EACa~~,EAAA,CAAA,CACK;;AAE3B"}
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"}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.mjs ADDED Viewed

@@ -0,0 +1,9 @@
+"use client"
+/* */
+//#region src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.scss
+var validationResultList = "flow--password-creation-field--validation-result-button--validation-result-list";
+var ValidationResultButton_module_default = { validationResultList };
+//#endregion
+export { ValidationResultButton_module_default as default, validationResultList };
+//# sourceMappingURL=ValidationResultButton.module.mjs.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"ValidationResultButton.module.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton.module.scss"],"sourcesContent":[".validationResultList {\n display: flex;\n flex-direction: column;\n row-gap: var(--password-creation-field--rule-to-rule-spacing);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.mjs CHANGED Viewed

@@ -7,23 +7,31 @@ import __locale_default from "../../../../../../../_virtual/_28.locale.mjs";
 import generateValidationTranslation from "../../lib/generateValidationTranslation.mjs";
 import ValidationResultEntry_module_default from "./ValidationResultEntry.module.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+import * as Aria from "react-aria-components";
 //#region src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx
 /** @internal */
 var ValidationResultEntry = (props) => {
 	const { result, unspecifiedRules = false } = props;
 	const translate = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
-	const icon = /* @__PURE__ */ jsx(AlertIcon, { status: result.isValid ? "success" : "warning" });
+	const icon = /* @__PURE__ */ jsx(AlertIcon, {
+		status: result.isValid ? "success" : "warning",
+		"aria-label": void 0
+	});
+	const status = translate.format(result.isValid ? "password.requirements.rule.fulfilled" : "password.requirements.rule.unfulfilled");
 	let [translationKey, translationValues] = generateValidationTranslation(result, true);
 	if (unspecifiedRules) {
 		translationKey = `${translationKey}.unspecified`;
 		translationValues = {};
 	}
-	return /* @__PURE__ */ jsxs(Text, {
+	return /* @__PURE__ */ jsxs("li", {
 		className: ValidationResultEntry_module_default.validationResultEntry,
 		"data-rule": result.ruleType,
 		"data-rule-valid": result.isValid,
-		children: [icon, translate.format(translationKey, translationValues)]
-	}, translationKey);
+		children: [icon, /* @__PURE__ */ jsxs(Text, { children: [/* @__PURE__ */ jsx(Aria.VisuallyHidden, {
+			elementType: "span",
+			children: `${status}: `
+		}), translate.format(translationKey, translationValues)] })]
+	});
 };
 //#endregion
 export { ValidationResultEntry, ValidationResultEntry as default };

package/dist/js/packages/components/src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ValidationResultEntry.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { Text } from \"@/components/Text\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport locales from \"./../../locales/.locale.json\";\nimport styles from \"./ValidationResultEntry.module.scss\";\nimport type { RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport AlertIcon from \"@/components/AlertIcon\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n result: Partial<RuleValidationResult>;\n unspecifiedRules?: boolean;\n}\n\n/* @internal */\nexport const ValidationResultEntry: FC<Props> = (props) => {\n const { result, unspecifiedRules = false } = props;\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const icon = <AlertIcon status={result.isValid ? \"success\" : \"warning\"} ~~/>;\~~n\n let [translationKey, translationValues] = generateValidationTranslation(\n result,\n true,\n );\n\n if (unspecifiedRules) {\n translationKey = `${translationKey}.unspecified`;\n translationValues = {};\n }\n\n return (\n <~~Text~~\n className={styles.validationResultEntry}\n data-rule={result.ruleType}\n data-rule-valid={result.isValid}\n ~~key={translationKey}\n~~ >\n {icon}\n {translate.format(translationKey, translationValues)}\n </Text>\n );\n};\n\nexport default ValidationResultEntry;\n"],"mappings":"~~;;;;;;;;;;;AAeA~~,IAAa,yBAAoC,UAAU;CACzD,MAAM,EAAE,QAAQ,mBAAmB,UAAU;CAC7C,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,MAAM,~~OAAO~~,oBAAC,WAAD,~~EAAW,~~QAAQ,OAAO,UAAU,YAAY,~~UAAY~~,CAAA;~~CAEzE~~,IAAI,CAAC,gBAAgB,qBAAqB,8BACxC,QACA,IACF;CAEA,IAAI,kBAAkB;EACpB,iBAAiB,GAAG,eAAe;EACnC,oBAAoB,CAAC;CACvB;CAEA,OACE,qBAAC,MAAD;EACE,WAAW,qCAAO;EAClB,aAAW,OAAO;EAClB,mBAAiB,OAAO;EAH1B,UAAA,~~CAMG~~,~~MACA~~,UAAU,OAAO,gBAAgB,iBAAiB,CAC/C~~;CAJC~~,~~GAAA~~,~~cAID;AAEV~~"}
1	+ {"version":3,"file":"ValidationResultEntry.mjs","names":[],"sources":["../../../../../../../../../src/components/PasswordCreationField/components/ValidationResultEntry/ValidationResultEntry.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { Text } from \"@/components/Text\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport locales from \"./../../locales/.locale.json\";\nimport styles from \"./ValidationResultEntry.module.scss\";\nimport type { RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport AlertIcon from \"@/components/AlertIcon\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\n\ninterface Props {\n result: Partial<RuleValidationResult>;\n unspecifiedRules?: boolean;\n}\n\n/* @internal */\nexport const ValidationResultEntry: FC<Props> = (props) => {\n const { result, unspecifiedRules = false } = props;\n const translate = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n\n const icon = (\n <AlertIcon\n status={result.isValid ? \"success\" : \"warning\"}\n // The status is spelled out as text right next to it, so the icon is\n // decorative. Overriding `AlertIcon`'s generic \"Status …\" label with\n // `undefined` is what makes `Icon` hide it from the accessibility tree.\n aria-label={undefined}\n />\n );\n\n const status = translate.format(\n result.isValid\n ? \"password.requirements.rule.fulfilled\"\n : \"password.requirements.rule.unfulfilled\",\n );\n\n let [translationKey, translationValues] = generateValidationTranslation(\n result,\n true,\n );\n\n if (unspecifiedRules) {\n translationKey = `${translationKey}.unspecified`;\n translationValues = {};\n }\n\n return (\n <li\n className={styles.validationResultEntry}\n data-rule={result.ruleType}\n data-rule-valid={result.isValid}\n >\n {icon}\n <Text>\n <Aria.VisuallyHidden elementType=\"span\">{`${status}: `}</Aria.VisuallyHidden>\n {translate.format(translationKey, translationValues)}\n </Text>\n </li>\n );\n};\n\nexport default ValidationResultEntry;\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,yBAAoC,UAAU;CACzD,MAAM,EAAE,QAAQ,mBAAmB,UAAU;CAC7C,MAAM,YAAY,4BAChB,kBACA,uBACF;CAEA,MAAM,OACJ,oBAAC,WAAD;EACE,QAAQ,OAAO,UAAU,YAAY;EAIrC,cAAY,KAAA;CACb,CAAA;CAGH,MAAM,SAAS,UAAU,OACvB,OAAO,UACH,yCACA,wCACN;CAEA,IAAI,CAAC,gBAAgB,qBAAqB,8BACxC,QACA,IACF;CAEA,IAAI,kBAAkB;EACpB,iBAAiB,GAAG,eAAe;EACnC,oBAAoB,CAAC;CACvB;CAEA,OACE,qBAAC,MAAD;EACE,WAAW,qCAAO;EAClB,aAAW,OAAO;EAClB,mBAAiB,OAAO;EAH1B,UAAA,CAKG,MACD,qBAAC,MAAD,EAAA,UAAA,CACE,oBAAC,KAAK,gBAAN;GAAqB,aAAY;GAAQ,UAAA,GAAG,OAAO;EAAyB,CAAA,GAC3E,UAAU,OAAO,gBAAgB,iBAAiB,CAC/C,EAAA,CAAA,CACJ;;AAER"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/ariaAnnounce.mjs ADDED Viewed

@@ -0,0 +1,52 @@
+"use client"
+/* */
+import { useLocalizedStringFormatter } from "../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import __locale_default from "../../../../../../_virtual/_28.locale.mjs";
+import { useEffect, useRef } from "react";
+import { announce } from "@react-aria/live-announcer";
+//#region src/components/PasswordCreationField/lib/ariaAnnounce.ts
+/**
+* Announces the current validation message — which rule the password misses, or
+* that it is secure.
+*
+* The same text is wired to the field via `aria-describedby`, but a description
+* is only read when the field receives focus. The field keeps focus while the
+* password is typed, so without a live region a screen reader reports the field
+* as invalid and never says why.
+*
+* @internal
+*/
+var useAriaAnnounceValidationState = (text, isAnnounceable) => {
+	const lastAnnouncedText = useRef(void 0);
+	useEffect(() => {
+		if (!isAnnounceable || !text) {
+			lastAnnouncedText.current = void 0;
+			return;
+		}
+		if (text === lastAnnouncedText.current) return;
+		lastAnnouncedText.current = text;
+		announce(text, "polite");
+	}, [text, isAnnounceable]);
+};
+/**
+* Announces that the password became visible or hidden. The toggle button keeps
+* focus, and a screen reader does not report that the input switched between
+* masked characters and plain text on its own.
+*
+* @internal
+*/
+var useAriaAnnouncePasswordVisibility = (isRevealed) => {
+	const formatter = useLocalizedStringFormatter(__locale_default, "PasswordCreationField");
+	const isInitialRender = useRef(true);
+	useEffect(() => {
+		if (isInitialRender.current) {
+			isInitialRender.current = false;
+			return;
+		}
+		announce(formatter.format(isRevealed ? "password.announce.revealed" : "password.announce.hidden"), "polite");
+	}, [isRevealed]);
+};
+//#endregion
+export { useAriaAnnouncePasswordVisibility, useAriaAnnounceValidationState };
+//# sourceMappingURL=ariaAnnounce.mjs.map

package/dist/js/packages/components/src/components/PasswordCreationField/lib/ariaAnnounce.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ariaAnnounce.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/ariaAnnounce.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { announce } from \"@react-aria/live-announcer\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"./../locales/*.locale.json\";\n\n/**\n * Announces the current validation message — which rule the password misses, or\n * that it is secure.\n *\n * The same text is wired to the field via `aria-describedby`, but a description\n * is only read when the field receives focus. The field keeps focus while the\n * password is typed, so without a live region a screen reader reports the field\n * as invalid and never says why.\n *\n * @internal\n */\nexport const useAriaAnnounceValidationState = (\n text: string | undefined,\n isAnnounceable: boolean,\n): void => {\n const lastAnnouncedText = useRef<string>(undefined);\n\n useEffect(() => {\n if (!isAnnounceable || !text) {\n // Announce the text again when it comes back after an empty field or a\n // pending validation.\n lastAnnouncedText.current = undefined;\n return;\n }\n\n if (text === lastAnnouncedText.current) {\n return;\n }\n\n lastAnnouncedText.current = text;\n announce(text, \"polite\");\n }, [text, isAnnounceable]);\n};\n\n/**\n * Announces that the password became visible or hidden. The toggle button keeps\n * focus, and a screen reader does not report that the input switched between\n * masked characters and plain text on its own.\n *\n * @internal\n */\nexport const useAriaAnnouncePasswordVisibility = (\n isRevealed: boolean,\n): void => {\n const formatter = useLocalizedStringFormatter(\n locales,\n \"PasswordCreationField\",\n );\n const isInitialRender = useRef(true);\n\n useEffect(() => {\n if (isInitialRender.current) {\n isInitialRender.current = false;\n return;\n }\n\n announce(\n formatter.format(\n isRevealed ? \"password.announce.revealed\" : \"password.announce.hidden\",\n ),\n \"polite\",\n );\n }, [isRevealed]);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,IAAa,kCACX,MACA,mBACS;CACT,MAAM,oBAAoB,OAAe,KAAA,CAAS;CAElD,gBAAgB;EACd,IAAI,CAAC,kBAAkB,CAAC,MAAM;GAG5B,kBAAkB,UAAU,KAAA;GAC5B;EACF;EAEA,IAAI,SAAS,kBAAkB,SAC7B;EAGF,kBAAkB,UAAU;EAC5B,SAAS,MAAM,QAAQ;CACzB,GAAG,CAAC,MAAM,cAAc,CAAC;AAC3B;;;;;;;;AASA,IAAa,qCACX,eACS;CACT,MAAM,YAAY,4BAChB,kBACA,uBACF;CACA,MAAM,kBAAkB,OAAO,IAAI;CAEnC,gBAAgB;EACd,IAAI,gBAAgB,SAAS;GAC3B,gBAAgB,UAAU;GAC1B;EACF;EAEA,SACE,UAAU,OACR,aAAa,+BAA+B,0BAC9C,GACA,QACF;CACF,GAAG,CAAC,UAAU,CAAC;AACjB"}

package/dist/js/packages/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs CHANGED Viewed

@@ -14,6 +14,7 @@ var generateTranslationString = (rule, shortVersion = false) => {
 	else finalTranslationString = translateString;
 	return shortVersion ? `${finalTranslationString}.short` : finalTranslationString;
 };
+/** @internal */
 var generateValidationTranslation = (r, shotVersion = false) => {
 	const translationKey = generateTranslationString(r, shotVersion);
 	if (r.ruleType === RuleType.char && r.chars) return [translationKey, {

package/dist/js/packages/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateValidationTranslation.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/generateValidationTranslation.ts"],"sourcesContent":["import {\n RuleType,\n type RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nconst generateTranslationString = (\n rule: Partial<RuleValidationResult> & { translationKey?: string },\n shortVersion = false,\n): string => {\n if (rule.translationKey) {\n return `validation.${rule.translationKey}`;\n }\n const translateString = `validation.${rule.ruleType ?? \"general\"}`;\n let finalTranslationString: string;\n\n if (\n (\"min\" in rule && rule.min !== undefined) \|\|\n (\"max\" in rule && rule.max !== undefined)\n ) {\n const breakingBoundaryProperty = rule.failingBoundary\n ? rule.failingBoundary\n : rule.min\n ? \"min\"\n : \"max\";\n\n if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}.${breakingBoundaryProperty}`;\n } else {\n finalTranslationString = `${translateString}.${breakingBoundaryProperty}`;\n }\n } else if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}`;\n } else {\n finalTranslationString = translateString;\n }\n\n return shortVersion\n ? `${finalTranslationString}.short`\n : finalTranslationString;\n};\n\nexport const generateValidationTranslation = (\n r: Partial<RuleValidationResult>,\n shotVersion = false,\n): [string, Record<string, string \| number \| boolean> \| undefined] => {\n const translationKey = generateTranslationString(r, shotVersion);\n\n if (r.ruleType === RuleType.char && r.chars) {\n return [\n translationKey,\n { ...r, chars: r.chars.map((c) => c.char).join(\"\") },\n ];\n }\n\n return [\n translationKey,\n r as unknown as Record<string, string \| number \| boolean> \| undefined,\n ];\n};\n\nexport default generateValidationTranslation;\n"],"mappings":";;;;AAKA,IAAM,6BACJ,MACA,eAAe,UACJ;CACX,IAAI,KAAK,gBACP,OAAO,cAAc,KAAK;CAE5B,MAAM,kBAAkB,cAAc,KAAK,YAAY;CACvD,IAAI;CAEJ,IACG,SAAS,QAAQ,KAAK,QAAQ,KAAA,KAC9B,SAAS,QAAQ,KAAK,QAAQ,KAAA,GAC/B;EACA,MAAM,2BAA2B,KAAK,kBAClC,KAAK,kBACL,KAAK,MACH,QACA;EAEN,IAAI,KAAK,YACP,yBAAyB,GAAG,gBAAgB,GAAG,KAAK,WAAW,GAAG;OAElE,yBAAyB,GAAG,gBAAgB,GAAG;CAEnD,OAAO,IAAI,KAAK,YACd,yBAAyB,GAAG,gBAAgB,GAAG,KAAK;MAEpD,yBAAyB;CAG3B,OAAO,eACH,GAAG,uBAAuB,UAC1B;AACN~~;AAEA~~,IAAa,iCACX,GACA,cAAc,UACsD;CACpE,MAAM,iBAAiB,0BAA0B,GAAG,WAAW;CAE/D,IAAI,EAAE,aAAa,SAAS,QAAQ,EAAE,OACpC,OAAO,CACL,gBACA;EAAE,GAAG;EAAG,OAAO,EAAE,MAAM,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE;CAAE,CACrD;CAGF,OAAO,CACL,gBACA,CACF;AACF"}
1	+ {"version":3,"file":"generateValidationTranslation.mjs","names":[],"sources":["../../../../../../../../src/components/PasswordCreationField/lib/generateValidationTranslation.ts"],"sourcesContent":["import {\n RuleType,\n type RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nconst generateTranslationString = (\n rule: Partial<RuleValidationResult> & { translationKey?: string },\n shortVersion = false,\n): string => {\n if (rule.translationKey) {\n return `validation.${rule.translationKey}`;\n }\n const translateString = `validation.${rule.ruleType ?? \"general\"}`;\n let finalTranslationString: string;\n\n if (\n (\"min\" in rule && rule.min !== undefined) \|\|\n (\"max\" in rule && rule.max !== undefined)\n ) {\n const breakingBoundaryProperty = rule.failingBoundary\n ? rule.failingBoundary\n : rule.min\n ? \"min\"\n : \"max\";\n\n if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}.${breakingBoundaryProperty}`;\n } else {\n finalTranslationString = `${translateString}.${breakingBoundaryProperty}`;\n }\n } else if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}`;\n } else {\n finalTranslationString = translateString;\n }\n\n return shortVersion\n ? `${finalTranslationString}.short`\n : finalTranslationString;\n};\n\n/** @internal */\nexport const generateValidationTranslation = (\n r: Partial<RuleValidationResult>,\n shotVersion = false,\n): [string, Record<string, string \| number \| boolean> \| undefined] => {\n const translationKey = generateTranslationString(r, shotVersion);\n\n if (r.ruleType === RuleType.char && r.chars) {\n return [\n translationKey,\n { ...r, chars: r.chars.map((c) => c.char).join(\"\") },\n ];\n }\n\n return [\n translationKey,\n r as unknown as Record<string, string \| number \| boolean> \| undefined,\n ];\n};\n\nexport default generateValidationTranslation;\n"],"mappings":";;;;AAKA,IAAM,6BACJ,MACA,eAAe,UACJ;CACX,IAAI,KAAK,gBACP,OAAO,cAAc,KAAK;CAE5B,MAAM,kBAAkB,cAAc,KAAK,YAAY;CACvD,IAAI;CAEJ,IACG,SAAS,QAAQ,KAAK,QAAQ,KAAA,KAC9B,SAAS,QAAQ,KAAK,QAAQ,KAAA,GAC/B;EACA,MAAM,2BAA2B,KAAK,kBAClC,KAAK,kBACL,KAAK,MACH,QACA;EAEN,IAAI,KAAK,YACP,yBAAyB,GAAG,gBAAgB,GAAG,KAAK,WAAW,GAAG;OAElE,yBAAyB,GAAG,gBAAgB,GAAG;CAEnD,OAAO,IAAI,KAAK,YACd,yBAAyB,GAAG,gBAAgB,GAAG,KAAK;MAEpD,yBAAyB;CAG3B,OAAO,eACH,GAAG,uBAAuB,UAC1B;AACN;;AAGA,IAAa,iCACX,GACA,cAAc,UACsD;CACpE,MAAM,iBAAiB,0BAA0B,GAAG,WAAW;CAE/D,IAAI,EAAE,aAAa,SAAS,QAAQ,EAAE,OACpC,OAAO,CACL,gBACA;EAAE,GAAG;EAAG,OAAO,EAAE,MAAM,KAAK,MAAM,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE;CAAE,CACrD;CAGF,OAAO,CACL,gBACA,CACF;AACF"}