@mittwald/flow-react-components 1.3.0-next.9 → 1.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n  &.size-#{$size} {\n    [role=\"dialog\"] {\n      width: inherit;\n      max-width: var(--modal--size--#{$size});\n    }\n  }\n}\n\n/* ===========================================================================\n   Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n   =========================================================================== */\n.modal,\n.offCanvas {\n  /* Fixed full-viewport layer + centering wrapper. Sized to the visual\n     viewport so it tracks the on-screen keyboard (Overlay sets the var). */\n  > div {\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    pointer-events: none;\n\n    > div {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n      padding: var(--size-px--xl);\n    }\n  }\n\n  /* Close button: hidden when an action group is present, unless forced. */\n  &:has(.actionGroup) {\n    .closeButton:not(.alwaysVisible) {\n      display: none;\n    }\n  }\n\n  .closeButton.alwaysHidden {\n    display: none;\n  }\n\n  /* The dialog card itself — a flex column. It is also the scroll container on\n     mobile, and the sticky header/footer stack against its content only. */\n  [role=\"dialog\"] {\n    display: flex;\n    flex-direction: column;\n    isolation: isolate;\n    max-height: 100%;\n    overflow: hidden;\n    outline: none;\n    pointer-events: all;\n    background-color: var(--modal--background-color);\n    border: var(--modal--border-width) var(--modal--border-style)\n      var(--modal--border-color);\n\n    > form {\n      display: contents;\n    }\n  }\n\n  /* Header */\n  header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    padding-top: var(--modal--header-padding-top);\n    padding-inline: var(--modal--padding);\n\n    /* Flatten the heading's text and content spans into the header row, so\n       badges stay behind the title instead of wrapping onto their own line. */\n    > span {\n      display: contents;\n    }\n\n    .headerTitle {\n      min-width: 0;\n    }\n\n    .closeButton {\n      order: 1;\n      margin-inline-start: auto;\n    }\n  }\n\n  /* Content — the scrollable body */\n  .content,\n  .columnLayout {\n    @include scrollbar.scrollbar;\n\n    flex-grow: 1;\n    min-height: var(--modal--content-min-height);\n    padding: var(--modal--padding);\n    overflow: hidden auto;\n    background-color: var(--modal--background-color);\n  }\n\n  .columnLayout .accentBox {\n    position: sticky;\n    top: 0;\n    height: fit-content;\n  }\n\n  /* Action group — the footer */\n  .actionGroup {\n    padding: var(--modal--padding);\n    background-color: var(--modal--footer-background-color);\n  }\n\n  /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n     must keep its natural height (otherwise it fills the full-height off-canvas\n     panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n     source-order battle — without raising the specificity of the padding above,\n     which the mobile rules override. */\n  [role=\"dialog\"] .actionGroup {\n    flex-grow: 0;\n  }\n}\n\n/* ===========================================================================\n   Modal — desktop (centered dialog, zoom in/out).\n   =========================================================================== */\n@media (width > 768px) {\n  .modal {\n    @include size(s);\n    @include size(m);\n    @include size(l);\n\n    [role=\"dialog\"] {\n      border-radius: var(--modal--corner-radius);\n    }\n\n    > div > div {\n      &[data-entering] {\n        animation: modal-zoom var(--transition--duration--slow)\n          cubic-bezier(0.1, 0.8, 0.3, 1.2);\n      }\n\n      &[data-exiting] {\n        animation: modal-zoom var(--transition--duration--default)\n          cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   OffCanvas — side panel (all widths), full height, slides in from the side.\n   =========================================================================== */\n.offCanvas {\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  [role=\"dialog\"] {\n    height: 100%;\n    border-radius: 0;\n  }\n\n  > div {\n    padding-inline-start: var(--size-px--m);\n\n    > div {\n      justify-content: flex-end;\n      width: inherit;\n      height: inherit;\n      padding: unset;\n\n      &[data-entering] {\n        animation: modal-slide-in-from-right var(--transition--duration--slow);\n      }\n\n      &[data-exiting] {\n        animation: modal-slide-in-from-right\n          var(--transition--duration--default) reverse;\n      }\n    }\n  }\n\n  &.left {\n    > div {\n      padding-inline: 0 var(--size-px--m);\n\n      > div {\n        justify-content: flex-start;\n        padding: unset;\n\n        &[data-entering] {\n          animation: modal-slide-in-from-left var(--transition--duration--slow);\n        }\n\n        &[data-exiting] {\n          animation: modal-slide-in-from-left\n            var(--transition--duration--default) reverse;\n        }\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   Modal — mobile (bottom sheet), issue #2423.\n\n   One scroll container: the dialog scrolls while the header sticks to the top\n   and the footer to the bottom. While the virtual keyboard is open\n   (.keyboardVisible) both un-stick so header + content + footer flow normally\n   and the content gets the full available space.\n   =========================================================================== */\n@media (max-width: 768px) {\n  .modal {\n    /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n    > div > div {\n      margin-top: auto;\n      width: 100%;\n      padding: unset;\n      overflow: hidden;\n      border-start-start-radius: var(--modal--corner-radius);\n      border-start-end-radius: var(--modal--corner-radius);\n      pointer-events: all;\n\n      &[data-entering] {\n        animation: modal-slide-up var(--transition--duration--slow);\n      }\n\n      &[data-exiting] {\n        animation: modal-slide-up var(--transition--duration--default) reverse;\n      }\n    }\n\n    /* The dialog is the single scroll container. Capped just below the visual\n       viewport so a full-height sheet keeps a small gap from the top edge. */\n    [role=\"dialog\"] {\n      @include scrollbar.scrollbar;\n\n      width: inherit;\n      max-height: calc(\n        var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n      );\n      overflow: hidden auto;\n    }\n\n    [role=\"dialog\"] > form {\n      width: inherit;\n    }\n\n    /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n       column compresses the content box and the (overflow:visible) fields\n       spill over the footer. */\n    .header,\n    .content,\n    .columnLayout,\n    .actionGroup {\n      flex: 0 0 auto;\n    }\n\n    .content,\n    .columnLayout {\n      min-height: 0;\n      overflow: visible;\n    }\n\n    /* Docked header + footer (sticky within the single scroll container). */\n    .header {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      background-color: var(--modal--background-color);\n    }\n\n    .actionGroup {\n      position: sticky;\n      bottom: 0;\n      z-index: 1;\n    }\n  }\n\n  /* Keyboard open: un-stick both so everything flows for maximum typing space.\n     The dialog fills the available height and the footer uses margin-top:auto,\n     so with SHORT content the footer still sits at the bottom (not mid-air) and\n     with tall content it scrolls away with everything else. Never hidden. */\n  .modal.keyboardVisible {\n    [role=\"dialog\"] {\n      min-height: calc(\n        var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n      );\n    }\n\n    .header,\n    .actionGroup {\n      position: static;\n    }\n\n    .actionGroup {\n      margin-top: auto;\n    }\n  }\n\n  /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n  .modal,\n  .offCanvas {\n    .header {\n      padding-inline: var(--modal--padding-mobile);\n    }\n\n    .content,\n    .columnLayout,\n    .actionGroup {\n      padding: var(--modal--padding-mobile);\n    }\n\n    .actionGroup {\n      flex-direction: column;\n\n      button {\n        width: 100%;\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   Animations\n   =========================================================================== */\n@keyframes modal-zoom {\n  /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n  0% {\n    opacity: 0;\n    transform: scale(1);\n  }\n\n  0.1% {\n    opacity: 1;\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-slide-up {\n  from {\n    translate: 0 30%;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n\n@keyframes modal-slide-in-from-right {\n  from {\n    translate: 30% 0;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n\n@keyframes modal-slide-in-from-left {\n  from {\n    translate: -30% 0;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Modal.module.mjs","names":[],"sources":["../../../../../../../src/components/Modal/Modal.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Caps the dialog width per size token (`size-s` / `size-m` / `size-l`). */\n@mixin size($size) {\n  &.size-#{$size} {\n    [role=\"dialog\"] {\n      width: inherit;\n      max-width: var(--modal--size--#{$size});\n    }\n  }\n}\n\n/* ===========================================================================\n   Base — shared by Modal (centered / bottom sheet) and OffCanvas (side panel).\n   =========================================================================== */\n.modal,\n.offCanvas {\n  /* Overlay.module.scss lays the viewport out; the dialog inside it is the only\n     pointer target. */\n  > :global(.flow--overlay--viewport) {\n    pointer-events: none;\n\n    /* react-aria's own modal wrapper — it gets no className from Flow, so\n       its default `react-aria-Modal` class is the handle. */\n    > :global(.react-aria-Modal) {\n      display: flex;\n      justify-content: center;\n      width: inherit;\n      max-height: var(--visual-viewport-height);\n      padding: var(--size-px--xl);\n    }\n  }\n\n  /* Close button: hidden when an action group is present, unless forced. */\n  &:has(.actionGroup) {\n    .closeButton:not(.alwaysVisible) {\n      display: none;\n    }\n  }\n\n  .closeButton.alwaysHidden {\n    display: none;\n  }\n\n  /* The dialog card itself — a flex column. It is also the scroll container on\n     mobile, and the sticky header/footer stack against its content only. */\n  [role=\"dialog\"] {\n    display: flex;\n    flex-direction: column;\n    isolation: isolate;\n    max-height: 100%;\n    overflow: hidden;\n    outline: none;\n    pointer-events: all;\n    background-color: var(--modal--background-color);\n    border: var(--modal--border-width) var(--modal--border-style)\n      var(--modal--border-color);\n\n    // A consumer `Form` (or raw `<form>`) wrapping the modal content. `Form`\n    // is a plain FC, so the props context cannot give it a class.\n    // stylelint-disable-next-line selector-max-type -- consumer form, no class\n    > form {\n      display: contents;\n    }\n  }\n\n  /* Header */\n  // A `Header`/`SectionHeader` — or a raw `<header>` — the consumer places in\n  // the modal; both must match.\n  // stylelint-disable-next-line selector-max-type -- consumer-placed header\n  header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .header {\n    display: flex;\n    align-items: center;\n    gap: var(--heading--icon-to-text-spacing);\n    padding-top: var(--modal--header-padding-top);\n    padding-inline: var(--modal--padding);\n\n    /* Flatten the heading's text and content spans into the header row, so\n       badges stay behind the title instead of wrapping onto their own line.\n       Heading's spans do carry classes, but `.flow--heading--heading-content`\n       already sets `display: none` on `:empty` at the same specificity a class\n       selector here would reach — source order would then decide. */\n    // stylelint-disable-next-line selector-max-type -- see above\n    > span {\n      display: contents;\n    }\n\n    .headerTitle {\n      min-width: 0;\n    }\n\n    .closeButton {\n      order: 1;\n      margin-inline-start: auto;\n    }\n  }\n\n  /* Content — the scrollable body */\n  .content,\n  .columnLayout {\n    @include scrollbar.scrollbar;\n\n    flex-grow: 1;\n    min-height: var(--modal--content-min-height);\n    padding: var(--modal--padding);\n    overflow: hidden auto;\n    background-color: var(--modal--background-color);\n  }\n\n  .columnLayout .accentBox {\n    position: sticky;\n    top: 0;\n    height: fit-content;\n  }\n\n  /* Action group — the footer */\n  .actionGroup {\n    padding: var(--modal--padding);\n    background-color: var(--modal--footer-background-color);\n  }\n\n  /* ActionGroup's \"sorted\" layout sets flex-grow:1 on itself; the modal footer\n     must keep its natural height (otherwise it fills the full-height off-canvas\n     panel). Scope via the dialog so flex-grow:0 wins the equal-specificity /\n     source-order battle — without raising the specificity of the padding above,\n     which the mobile rules override. */\n  [role=\"dialog\"] .actionGroup {\n    flex-grow: 0;\n  }\n}\n\n/* ===========================================================================\n   Modal — desktop (centered dialog, zoom in/out).\n   =========================================================================== */\n@media (width > 768px) {\n  .modal {\n    @include size(s);\n    @include size(m);\n    @include size(l);\n\n    [role=\"dialog\"] {\n      border-radius: var(--modal--corner-radius);\n    }\n\n    > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n      &[data-entering] {\n        animation: modal-zoom var(--transition--duration--slow)\n          cubic-bezier(0.1, 0.8, 0.3, 1.2);\n      }\n\n      &[data-exiting] {\n        animation: modal-zoom var(--transition--duration--default)\n          cubic-bezier(0.1, 0.8, 0.3, 1.2) reverse;\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   OffCanvas — side panel (all widths), full height, slides in from the side.\n   =========================================================================== */\n.offCanvas {\n  @include size(s);\n  @include size(m);\n  @include size(l);\n\n  [role=\"dialog\"] {\n    height: 100%;\n    border-radius: 0;\n  }\n\n  > :global(.flow--overlay--viewport) {\n    padding-inline-start: var(--size-px--m);\n\n    > :global(.react-aria-Modal) {\n      justify-content: flex-end;\n      width: inherit;\n      height: inherit;\n      padding: unset;\n\n      &[data-entering] {\n        animation: modal-slide-in-from-right var(--transition--duration--slow);\n      }\n\n      &[data-exiting] {\n        animation: modal-slide-in-from-right\n          var(--transition--duration--default) reverse;\n      }\n    }\n  }\n\n  &.left {\n    > :global(.flow--overlay--viewport) {\n      padding-inline: 0 var(--size-px--m);\n\n      > :global(.react-aria-Modal) {\n        justify-content: flex-start;\n        padding: unset;\n\n        &[data-entering] {\n          animation: modal-slide-in-from-left var(--transition--duration--slow);\n        }\n\n        &[data-exiting] {\n          animation: modal-slide-in-from-left\n            var(--transition--duration--default) reverse;\n        }\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   Modal — mobile (bottom sheet), issue #2423.\n\n   One scroll container: the dialog scrolls while the header sticks to the top\n   and the footer to the bottom. While the virtual keyboard is open\n   (.keyboardVisible) both un-stick so header + content + footer flow normally\n   and the content gets the full available space.\n   =========================================================================== */\n@media (max-width: 768px) {\n  .modal {\n    /* Bottom-anchored sheet: rounded top corners + slide-up animation. */\n    > :global(.flow--overlay--viewport) > :global(.react-aria-Modal) {\n      margin-top: auto;\n      width: 100%;\n      padding: unset;\n      overflow: hidden;\n      border-start-start-radius: var(--modal--corner-radius);\n      border-start-end-radius: var(--modal--corner-radius);\n      pointer-events: all;\n\n      &[data-entering] {\n        animation: modal-slide-up var(--transition--duration--slow);\n      }\n\n      &[data-exiting] {\n        animation: modal-slide-up var(--transition--duration--default) reverse;\n      }\n    }\n\n    /* The dialog is the single scroll container. Capped just below the visual\n       viewport so a full-height sheet keeps a small gap from the top edge. */\n    [role=\"dialog\"] {\n      @include scrollbar.scrollbar;\n\n      width: inherit;\n      max-height: calc(\n        var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n      );\n      overflow: hidden auto;\n    }\n\n    // stylelint-disable-next-line selector-max-type -- consumer form, see above\n    [role=\"dialog\"] > form {\n      width: inherit;\n    }\n\n    /* flex: 0 0 auto keeps natural heights; without flex-shrink:0 the flex\n       column compresses the content box and the (overflow:visible) fields\n       spill over the footer. */\n    .header,\n    .content,\n    .columnLayout,\n    .actionGroup {\n      flex: 0 0 auto;\n    }\n\n    .content,\n    .columnLayout {\n      min-height: 0;\n      overflow: visible;\n    }\n\n    /* Docked header + footer (sticky within the single scroll container). */\n    .header {\n      position: sticky;\n      top: 0;\n      z-index: 1;\n      background-color: var(--modal--background-color);\n    }\n\n    .actionGroup {\n      position: sticky;\n      bottom: 0;\n      z-index: 1;\n    }\n  }\n\n  /* Keyboard open: un-stick both so everything flows for maximum typing space.\n     The dialog fills the available height and the footer uses margin-top:auto,\n     so with SHORT content the footer still sits at the bottom (not mid-air) and\n     with tall content it scrolls away with everything else. Never hidden. */\n  .modal.keyboardVisible {\n    [role=\"dialog\"] {\n      min-height: calc(\n        var(--visual-viewport-height) - var(--modal--tray-top-spacing)\n      );\n    }\n\n    .header,\n    .actionGroup {\n      position: static;\n    }\n\n    .actionGroup {\n      margin-top: auto;\n    }\n  }\n\n  /* Shared mobile spacing + full-width stacked actions (Modal + OffCanvas). */\n  .modal,\n  .offCanvas {\n    .header {\n      padding-inline: var(--modal--padding-mobile);\n    }\n\n    .content,\n    .columnLayout,\n    .actionGroup {\n      padding: var(--modal--padding-mobile);\n    }\n\n    .actionGroup {\n      flex-direction: column;\n\n      // The footer's buttons are consumer `Button`/`Action` children; a raw\n      // `<button>` matches today too.\n      // stylelint-disable-next-line selector-max-type -- consumer children\n      button {\n        width: 100%;\n      }\n    }\n  }\n}\n\n/* ===========================================================================\n   Animations\n   =========================================================================== */\n@keyframes modal-zoom {\n  /* Start with scale(1) to let ResizeObservers take the correct width on mount. */\n  0% {\n    opacity: 0;\n    transform: scale(1);\n  }\n\n  0.1% {\n    opacity: 1;\n    transform: scale(0.8);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n}\n\n@keyframes modal-slide-up {\n  from {\n    translate: 0 30%;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n\n@keyframes modal-slide-in-from-right {\n  from {\n    translate: 30% 0;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n\n@keyframes modal-slide-in-from-left {\n  from {\n    translate: -30% 0;\n  }\n\n  to {\n    translate: 0 0;\n  }\n}\n"],"mappings":""}

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

@@ -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

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

@@ -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

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

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

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

@@ -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

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

@@ -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

@@ -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"}
+{"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/OverlayTrigger/OverlayTrigger.mjs

@@ -31,7 +31,6 @@ var OverlayTrigger = (props) => {
 	return /* @__PURE__ */ jsx(OverlayContextProvider, {
 		type: overlayType,
 		controller: overlayController,
-		isOverlayContent: false,
 		children: /* @__PURE__ */ jsx(PropsContextProvider, {
 			props: propsContext,
 			dependencies: [isPending, overlayController],

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.mjs","names":[],"sources":["../../../../../../../src/components/OverlayTrigger/OverlayTrigger.tsx"],"sourcesContent":["import type { ComponentType, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { useIsPendingWithWait } from \"@/components/Action/hooks/useIsPendingWithWait\";\n\ntype AriaComponentType = ComponentType<{\n  isOpen?: boolean;\n  children: ReactNode;\n}>;\n\nexport interface OverlayTriggerProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the overlay should be open initially. */\n  isDefaultOpen?: boolean;\n  /** A controller to control the state of the overlay. */\n  controller?: OverlayController;\n}\n\ninterface Props extends OverlayTriggerProps {\n  overlayType: FlowComponentName;\n  component: AriaComponentType;\n}\n\nexport const OverlayTrigger: FC<Props> = (props) => {\n  const {\n    overlayType,\n    isDefaultOpen = false,\n    component: AriaOverlayTrigger,\n    children,\n    controller: controllerFromProps,\n  } = props;\n  const buttonPropsContext = useComponentPropsContext(\"Button\");\n\n  const newOverlayController = OverlayController.useNew({ isDefaultOpen });\n  const overlayController = controllerFromProps ?? newOverlayController;\n  const isOpen = overlayController.useIsOpen();\n  const isContentSuspended = overlayController.useIsContentSuspended();\n  const isPending = useIsPendingWithWait(isContentSuspended);\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: overlayController.open,\n      isPending,\n      isDisabled: Boolean(buttonPropsContext?.isDisabled) || isContentSuspended,\n      /*\n       * The button is the react-aria trigger. react-aria hands the press\n       * handling, the trigger ref and `aria-haspopup`/`aria-expanded`/\n       * `aria-controls` down through a `PressResponder`, which only reaches its\n       * own subtree — so a surrounding props context must not tunnel the button\n       * out of the trigger. Such a context has to tunnel the trigger as a whole\n       * instead (`overlayTriggersTunneledTo`).\n       */\n      tunnel: null,\n    },\n    /*\n     * The aria trigger this renders is the host-side identity of every trigger\n     * that is not `@flr-generate` (see `overlayTriggersTunneledTo`), so a\n     * tunneling props context targets it as well. Here it is already inside the\n     * trigger the author wrote — tunneling it again would send the same subtree\n     * into the exit twice.\n     */\n    DialogTrigger: {\n      tunnel: null,\n    },\n    /*\n     * The overlay is already placed — this trigger owns it. A surrounding\n     * props context that moves or wraps the bare overlay, so that it can be\n     * written without a trigger (`Badge`), must not reach this one: it would\n     * pull the overlay out of its trigger and add a second trigger button\n     * around it.\n     */\n    [overlayType]: {\n      tunnel: null,\n      wrapWith: null,\n    },\n  };\n\n  return (\n    <OverlayContextProvider\n      type={overlayType}\n      controller={overlayController}\n      isOverlayContent={false}\n    >\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[isPending, overlayController]}\n      >\n        <AriaOverlayTrigger isOpen={isOpen}>{children}</AriaOverlayTrigger>\n      </PropsContextProvider>\n    </OverlayContextProvider>\n  );\n};\n\nexport default OverlayTrigger;\n"],"mappings":";;;;;;;;;AA4BA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EACJ,aACA,gBAAgB,OAChB,WAAW,oBACX,UACA,YAAY,wBACV;CACJ,MAAM,qBAAqB,yBAAyB,QAAQ;CAE5D,MAAM,uBAAuB,kBAAkB,OAAO,EAAE,cAAc,CAAC;CACvE,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,SAAS,kBAAkB,UAAU;CAC3C,MAAM,qBAAqB,kBAAkB,sBAAsB;CACnE,MAAM,YAAY,qBAAqB,kBAAkB;CAEzD,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS,kBAAkB;GAC3B;GACA,YAAY,QAAQ,oBAAoB,UAAU,KAAK;GASvD,QAAQ;EACV;EAQA,eAAe,EACb,QAAQ,KACV;GAQC,cAAc;GACb,QAAQ;GACR,UAAU;EACZ;CACF;CAEA,OACE,oBAAC,wBAAD;EACE,MAAM;EACN,YAAY;EACZ,kBAAkB;EAElB,UAAA,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,WAAW,iBAAiB;GAE3C,UAAA,oBAAC,oBAAD;IAA4B;IAAS;GAA6B,CAAA;EAC9C,CAAA;CACA,CAAA;AAE5B"}
+{"version":3,"file":"OverlayTrigger.mjs","names":[],"sources":["../../../../../../../src/components/OverlayTrigger/OverlayTrigger.tsx"],"sourcesContent":["import type { ComponentType, FC, PropsWithChildren, ReactNode } from \"react\";\nimport { OverlayController } from \"@/lib/controller\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { useComponentPropsContext } from \"@/lib/propsContext/propsContext\";\nimport type { FlowComponentName } from \"@/components/propTypes\";\nimport OverlayContextProvider from \"@/lib/controller/overlay/OverlayContextProvider\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { useIsPendingWithWait } from \"@/components/Action/hooks/useIsPendingWithWait\";\n\ntype AriaComponentType = ComponentType<{\n  isOpen?: boolean;\n  children: ReactNode;\n}>;\n\nexport interface OverlayTriggerProps\n  extends FlowComponentProps, PropsWithChildren {\n  /** Whether the overlay should be open initially. */\n  isDefaultOpen?: boolean;\n  /** A controller to control the state of the overlay. */\n  controller?: OverlayController;\n}\n\ninterface Props extends OverlayTriggerProps {\n  overlayType: FlowComponentName;\n  component: AriaComponentType;\n}\n\nexport const OverlayTrigger: FC<Props> = (props) => {\n  const {\n    overlayType,\n    isDefaultOpen = false,\n    component: AriaOverlayTrigger,\n    children,\n    controller: controllerFromProps,\n  } = props;\n  const buttonPropsContext = useComponentPropsContext(\"Button\");\n\n  const newOverlayController = OverlayController.useNew({ isDefaultOpen });\n  const overlayController = controllerFromProps ?? newOverlayController;\n  const isOpen = overlayController.useIsOpen();\n  const isContentSuspended = overlayController.useIsContentSuspended();\n  const isPending = useIsPendingWithWait(isContentSuspended);\n\n  const propsContext: PropsContext = {\n    Button: {\n      onPress: overlayController.open,\n      isPending,\n      isDisabled: Boolean(buttonPropsContext?.isDisabled) || isContentSuspended,\n      /*\n       * The button is the react-aria trigger. react-aria hands the press\n       * handling, the trigger ref and `aria-haspopup`/`aria-expanded`/\n       * `aria-controls` down through a `PressResponder`, which only reaches its\n       * own subtree — so a surrounding props context must not tunnel the button\n       * out of the trigger. Such a context has to tunnel the trigger as a whole\n       * instead (`overlayTriggersTunneledTo`).\n       */\n      tunnel: null,\n    },\n    /*\n     * The aria trigger this renders is the host-side identity of every trigger\n     * that is not `@flr-generate` (see `overlayTriggersTunneledTo`), so a\n     * tunneling props context targets it as well. Here it is already inside the\n     * trigger the author wrote — tunneling it again would send the same subtree\n     * into the exit twice.\n     */\n    DialogTrigger: {\n      tunnel: null,\n    },\n    /*\n     * The overlay is already placed — this trigger owns it. A surrounding\n     * props context that moves or wraps the bare overlay, so that it can be\n     * written without a trigger (`Badge`), must not reach this one: it would\n     * pull the overlay out of its trigger and add a second trigger button\n     * around it.\n     */\n    [overlayType]: {\n      tunnel: null,\n      wrapWith: null,\n    },\n  };\n\n  return (\n    <OverlayContextProvider type={overlayType} controller={overlayController}>\n      <PropsContextProvider\n        props={propsContext}\n        dependencies={[isPending, overlayController]}\n      >\n        <AriaOverlayTrigger isOpen={isOpen}>{children}</AriaOverlayTrigger>\n      </PropsContextProvider>\n    </OverlayContextProvider>\n  );\n};\n\nexport default OverlayTrigger;\n"],"mappings":";;;;;;;;;AA4BA,IAAa,kBAA6B,UAAU;CAClD,MAAM,EACJ,aACA,gBAAgB,OAChB,WAAW,oBACX,UACA,YAAY,wBACV;CACJ,MAAM,qBAAqB,yBAAyB,QAAQ;CAE5D,MAAM,uBAAuB,kBAAkB,OAAO,EAAE,cAAc,CAAC;CACvE,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,SAAS,kBAAkB,UAAU;CAC3C,MAAM,qBAAqB,kBAAkB,sBAAsB;CACnE,MAAM,YAAY,qBAAqB,kBAAkB;CAEzD,MAAM,eAA6B;EACjC,QAAQ;GACN,SAAS,kBAAkB;GAC3B;GACA,YAAY,QAAQ,oBAAoB,UAAU,KAAK;GASvD,QAAQ;EACV;EAQA,eAAe,EACb,QAAQ,KACV;GAQC,cAAc;GACb,QAAQ;GACR,UAAU;EACZ;CACF;CAEA,OACE,oBAAC,wBAAD;EAAwB,MAAM;EAAa,YAAY;EACrD,UAAA,oBAAC,sBAAD;GACE,OAAO;GACP,cAAc,CAAC,WAAW,iBAAiB;GAE3C,UAAA,oBAAC,oBAAD;IAA4B;IAAS;GAA6B,CAAA;EAC9C,CAAA;CACA,CAAA;AAE5B"}

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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

@@ -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

@@ -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

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