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

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

@@ -93,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 {\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        <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":";;;;;;;;;;;;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;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/Popover/Popover.module.mjs

@@ -4,14 +4,16 @@
 var popover = "flow--popover";
 var content = "flow--popover--content";
 var tip = "flow--popover--tip";
+var tipIcon = "flow--popover--tip-icon";
 var Popover_module_default = {
 	"non-modal": "flow--popover--non-modal",
 	popover,
 	content,
 	tip,
+	tipIcon,
 	"popover-slide": "flow--popover--popover-slide"
 };
 //#endregion
-export { content, Popover_module_default as default, popover, tip };
+export { content, Popover_module_default as default, popover, tip, tipIcon };
 
 //# sourceMappingURL=Popover.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Variants */\n\n/*\n * A non-modal popover stays in the document and scrolls with the page, so the\n * height react-aria caps it at — the room left in the viewport when it was last\n * measured — is not a limit that applies to it. Anchored below the fold that\n * room is zero, and the hint renders as a two-pixel sliver.\n *\n * `useOverlayPosition` writes the value straight onto the element\n * (`overlay.style.maxHeight = …`) rather than returning it among its props, so\n * no React style can remove it and only `!important` reaches it.\n */\n.non-modal {\n  max-height: none !important;\n}\n\n.popover {\n  background-color: var(--popover--background-color);\n  box-shadow: var(--popover--box-shadow);\n  border-radius: var(--popover--corner-radius);\n  display: flex;\n  flex-direction: column;\n\n  --size-px--s--negative: calc(var(--size-px--s) * -1);\n\n  min-width: var(--popover--min-width);\n  border-width: var(--popover--border-width);\n  border-style: var(--popover--border-style);\n  border-color: var(--popover--border-color);\n  max-width: calc(100% - 2 * var(--popover--viewport-padding));\n\n  :where(.content) {\n    @include scrollbar.scrollbar;\n\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .tip {\n    width: var(--popover--tip-width);\n\n    svg {\n      display: block;\n      fill: var(--popover--background-color);\n      stroke: var(--popover--border-color);\n      stroke-width: var(--popover--border-width);\n    }\n  }\n\n  &[data-placement=\"top\"] {\n    --origin: translateY(var(--size-px--s));\n\n    &:has(.tip) {\n      margin-bottom: var(--popover--tip-height);\n    }\n  }\n\n  &[data-placement=\"bottom\"] {\n    --origin: translateY(var(--size-px--s--negative));\n\n    &:has(.tip) {\n      margin-top: var(--popover--tip-height);\n    }\n\n    .tip svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement=\"right\"] {\n    --origin: translateX(var(--size-px--s--negative));\n\n    &:has(.tip) {\n      margin-inline-start: var(--popover--tip-height);\n    }\n\n    .tip svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement=\"left\"] {\n    --origin: translateX(var(--size-px--s));\n\n    &:has(.tip) {\n      margin-inline-end: var(--popover--tip-height);\n    }\n\n    .tip svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  &[data-entering] {\n    animation: popover-slide var(--transition--duration--default);\n  }\n\n  &[data-exiting] {\n    animation: popover-slide var(--transition--duration--default) reverse\n      ease-in;\n    pointer-events: none;\n  }\n\n  &:has(:global(.flow--options):empty) {\n    display: none;\n  }\n}\n\n@keyframes popover-slide {\n  from {\n    transform: var(--origin);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.mjs","names":[],"sources":["../../../../../../../src/components/Popover/Popover.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n/* Variants */\n\n/*\n * A non-modal popover stays in the document and scrolls with the page, so the\n * height react-aria caps it at — the room left in the viewport when it was last\n * measured — is not a limit that applies to it. Anchored below the fold that\n * room is zero, and the hint renders as a two-pixel sliver.\n *\n * `useOverlayPosition` writes the value straight onto the element\n * (`overlay.style.maxHeight = …`) rather than returning it among its props, so\n * no React style can remove it and only `!important` reaches it.\n */\n.non-modal {\n  max-height: none !important;\n}\n\n.popover {\n  background-color: var(--popover--background-color);\n  box-shadow: var(--popover--box-shadow);\n  border-radius: var(--popover--corner-radius);\n  display: flex;\n  flex-direction: column;\n\n  --size-px--s--negative: calc(var(--size-px--s) * -1);\n\n  min-width: var(--popover--min-width);\n  border-width: var(--popover--border-width);\n  border-style: var(--popover--border-style);\n  border-color: var(--popover--border-color);\n  max-width: calc(100% - 2 * var(--popover--viewport-padding));\n\n  :where(.content) {\n    @include scrollbar.scrollbar;\n\n    overflow-y: auto;\n\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .tip {\n    width: var(--popover--tip-width);\n\n    .tipIcon {\n      display: block;\n      fill: var(--popover--background-color);\n      stroke: var(--popover--border-color);\n      stroke-width: var(--popover--border-width);\n    }\n  }\n\n  &[data-placement=\"top\"] {\n    --origin: translateY(var(--size-px--s));\n\n    &:has(.tip) {\n      margin-bottom: var(--popover--tip-height);\n    }\n  }\n\n  &[data-placement=\"bottom\"] {\n    --origin: translateY(var(--size-px--s--negative));\n\n    &:has(.tip) {\n      margin-top: var(--popover--tip-height);\n    }\n\n    .tip .tipIcon {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement=\"right\"] {\n    --origin: translateX(var(--size-px--s--negative));\n\n    &:has(.tip) {\n      margin-inline-start: var(--popover--tip-height);\n    }\n\n    .tip .tipIcon {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement=\"left\"] {\n    --origin: translateX(var(--size-px--s));\n\n    &:has(.tip) {\n      margin-inline-end: var(--popover--tip-height);\n    }\n\n    .tip .tipIcon {\n      transform: rotate(-90deg);\n    }\n  }\n\n  &[data-entering] {\n    animation: popover-slide var(--transition--duration--default);\n  }\n\n  &[data-exiting] {\n    animation: popover-slide var(--transition--duration--default) reverse\n      ease-in;\n    pointer-events: none;\n  }\n\n  &:has(:global(.flow--options):empty) {\n    display: none;\n  }\n}\n\n@keyframes popover-slide {\n  from {\n    transform: var(--origin);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.mjs

@@ -108,6 +108,7 @@ var NonModalPopoverContentInner = (props) => {
 				...placement ? { [placement]: "100%" } : {}
 			},
 			children: /* @__PURE__ */ jsx("svg", {
+				className: Popover_module_default.tipIcon,
 				width: 16,
 				height: 16,
 				viewBox: "0 0 16 16",

package/dist/js/packages/components/src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NonModalPopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useObjectRef, useOverlayPosition } from \"react-aria\";\nimport type { Placement } from \"react-aria\";\nimport { useEnterAnimation, useExitAnimation } from \"@react-aria/utils\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface NonModalPopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  placement?: Placement;\n  offset?: number;\n  crossOffset?: number;\n  /** Swallowed on purpose — the stylesheet overrides `max-height` here. */\n  maxHeight?: number;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  arrowBoundaryOffset?: number;\n  boundaryElement?: Element;\n  /** The id react-aria's trigger points its `aria-controls` at. */\n  id?: string;\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef: RefObject<Element | null>;\n}\n\ninterface NonModalPopoverContentInnerProps extends Omit<\n  NonModalPopoverContentProps,\n  \"ref\"\n> {\n  overlayRef: RefObject<HTMLDivElement | null>;\n  isExiting: boolean;\n}\n\n/*\n * `useOverlayPosition` recalculates when the window resizes, when a scroll\n * container scrolls, and when the anchor or the popover changes *size*. It never\n * notices the anchor merely *moving*, because a popover normally opens on a user\n * interaction, long after the page settled.\n *\n * This one opens itself, so it places itself into a page that is still filling\n * in — and anything appearing above the anchor then pushes the anchor out from\n * under it. Remotely that is the normal case, not an edge case: the host\n * materializes the page in pieces as they arrive over the connection.\n *\n * Observing the ancestors covers it. In block layout an element moves because\n * something around it changed size, and a resized ancestor is the one signal\n * every such reflow has in common. What it does not catch is an ancestor of\n * fixed height rearranging inside — rare, and the next scroll or resize\n * corrects it.\n */\nconst useRepositionWhenAnchorMoves = (\n  anchorRef: RefObject<Element | null>,\n  isOpen: boolean,\n  updatePosition: () => void,\n): void => {\n  useEffect(() => {\n    // Read inside the effect. A coach mark that is open from its first render\n    // renders before the anchor's ref is attached, and a ref filling in does not\n    // re-render anything — so reading during render would see `null`, bail, and\n    // leave nothing observing.\n    const anchor = anchorRef.current;\n\n    if (!isOpen || !anchor) {\n      return;\n    }\n\n    const observer = new ResizeObserver(updatePosition);\n\n    for (\n      let element = anchor.parentElement;\n      element;\n      element = element.parentElement\n    ) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [anchorRef, isOpen, updatePosition]);\n};\n\n/*\n * The non-modal popover deliberately skips react-aria's `usePopover`, which is\n * what a popover normally builds on. That hook couples three things Flow does\n * not want here: it locks page scrolling, it hides the rest of the page from\n * assistive tech, and — the reason this component exists — it closes the\n * popover on the first scroll, with no way to opt out.\n *\n * What is left is `useOverlayPosition` for the anchoring, public react-aria API.\n * The popover therefore tracks its trigger while the page scrolls, and its\n * content stays plain content: no role, no label, no focus of its own.\n *\n * It is not portalled either. A popover that is announced by nothing has to be\n * findable where it belongs, and a portal to the end of `<body>` puts it behind\n * the whole page in reading order — so it renders where it was written, right\n * next to what it points at. Being absolutely positioned it still takes no\n * space; what it does inherit is its surroundings, so an ancestor that clips\n * (`overflow: hidden`) or a stacking context can cut it off.\n *\n * Mounting is split across two components for the same reason `Aria.Popover`\n * splits it: the closing animation has to outlive `isOpen`, so the element that\n * plays it cannot be unmounted by the render that closes it. This outer half\n * keeps the ref and the mount decision and survives across open and closed; the\n * inner half holds the positioning and remounts on every open, which is what\n * resets the entry animation.\n */\nexport const NonModalPopoverContent: FC<NonModalPopoverContentProps> = (\n  props,\n) => {\n  const { isOpen = false, ref, ...rest } = props;\n\n  const overlayRef = useObjectRef(ref as Ref<HTMLDivElement>);\n\n  const isExiting = useExitAnimation(overlayRef, isOpen);\n\n  if (!isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <NonModalPopoverContentInner\n      {...rest}\n      overlayRef={overlayRef}\n      isOpen={isOpen}\n      isExiting={isExiting}\n    />\n  );\n};\n\nconst NonModalPopoverContentInner: FC<NonModalPopoverContentInnerProps> = (\n  props,\n) => {\n  const {\n    children,\n    className,\n    withTip,\n    isOpen = false,\n    isExiting,\n    width,\n    id,\n    onOpenChange,\n    overlayRef,\n    triggerRef,\n    // Named one by one so that everything left over is a DOM prop and reaches\n    // the element. Funnelling the rest into the positioning instead drops\n    // `aria-*`, `data-*` and the like, which `Aria.Popover` forwards on the\n    // modal path.\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    maxHeight: ignoredMaxHeight,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n    ...rest\n  } = props;\n\n  void ignoredMaxHeight;\n\n  const positionProps = {\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n  };\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const detailsId = useId();\n\n  const { overlayProps, arrowProps, placement, updatePosition } =\n    useOverlayPosition({\n      ...positionProps,\n      targetRef: triggerRef,\n      overlayRef,\n      arrowRef,\n      isOpen,\n      offset: positionProps.offset ?? 8,\n      containerPadding: popoverViewportPadding,\n    });\n\n  useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);\n\n  /*\n   * Until it has a placement, `useOverlayPosition` parks the popover in the top\n   * left corner (`position: fixed; top: 0; left: 0`) — it has not measured the\n   * anchor yet. Rendered on a server that corner is what ships, and the popover\n   * sits there until hydration measures; an anchor given by id is resolved a\n   * frame later still. Either way it is visibly in the wrong place first and\n   * jumps to the anchor after, so keep it out of sight until it knows where it\n   * belongs. It stays in the DOM, which is what its place in the reading order\n   * and `aria-details` depend on.\n   */\n  const isPositioned = placement !== null;\n\n  // Held back until the popover knows where it belongs — an entry animation\n  // that plays while the popover is still hidden is one the user never sees.\n  const isEntering = useEnterAnimation(overlayRef, isPositioned);\n\n  /*\n   * Nothing announces this popover, so the trigger points at it: `aria-details`\n   * tells assistive tech that there is related content and offers a way over to\n   * it — unlike `aria-describedby`, which would flatten the popover into a\n   * string and put its buttons out of reach.\n   *\n   * Set on the trigger element itself, because that element belongs to whoever\n   * rendered it. Whatever it carried before is restored on the way out.\n   */\n  useEffect(() => {\n    const trigger = triggerRef.current;\n\n    if (!isOpen || !trigger) {\n      return;\n    }\n\n    const previous = trigger.getAttribute(\"aria-details\");\n    trigger.setAttribute(\n      \"aria-details\",\n      previous ? `${previous} ${detailsId}` : detailsId,\n    );\n\n    return () => {\n      if (previous === null) {\n        trigger.removeAttribute(\"aria-details\");\n      } else {\n        trigger.setAttribute(\"aria-details\", previous);\n      }\n    };\n  }, [isOpen, triggerRef, detailsId]);\n\n  // Escape closes it. react-aria would do this through `useOverlay`, which is\n  // part of the machinery this component leaves out.\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const closeOnEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", closeOnEscape);\n    return () => document.removeEventListener(\"keydown\", closeOnEscape);\n  }, [isOpen, onOpenChange]);\n\n  return (\n    <div\n      {...rest}\n      {...overlayProps}\n      id={id}\n      ref={overlayRef}\n      className={clsx(className, styles[\"non-modal\"])}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={isExiting || undefined}\n      style={{\n        ...overlayProps.style,\n        /*\n         * Two things `useOverlayPosition` adds for an overlay portalled to the\n         * end of `<body>` and pinned to the viewport. This one renders where it\n         * stands and scrolls with the page, so both are wrong here.\n         *\n         * `z-index: 100000` would put it in front of the whole application — it\n         * scrolled over the docs site's sticky header. Claiming no stacking\n         * level leaves that to the page: it still covers the ordinary content\n         * around it, and app chrome that sets a `z-index` keeps its place above.\n         *\n         * The `max-height` it caps the overlay at is wrong here for the same\n         * reason, but it is written straight onto the element and has to be\n         * undone in CSS — see `.non-modal` in Popover.module.scss.\n         */\n        zIndex: undefined,\n        ...popoverWidthStyle(width),\n        ...(isPositioned ? {} : { visibility: \"hidden\" }),\n      }}\n    >\n      {withTip && (\n        <div\n          {...arrowProps}\n          ref={arrowRef}\n          className={styles.tip}\n          data-placement={placement ?? undefined}\n          style={{\n            // What <Aria.OverlayArrow /> contributes on top of `arrowProps`:\n            // it lifts the tip out of the flow and centres it on the anchor.\n            position: \"absolute\",\n            transform:\n              placement === \"top\" || placement === \"bottom\"\n                ? \"translateX(-50%)\"\n                : \"translateY(-50%)\",\n            // `arrowProps.style` carries the offset along the popover's edge and\n            // leaves the other axis `undefined` — which still overwrites. So the\n            // edge the tip sits on is set last: spread first, it silently lost\n            // `top: 100%` and the tip jumped to the popover's top edge, pointing\n            // away from an anchor that was below it.\n            ...arrowProps.style,\n            ...(placement ? { [placement]: \"100%\" } : {}),\n          }}\n        >\n          <svg width={16} height={16} viewBox=\"0 0 16 16\">\n            <path d=\"M0 0 L8 8 L16 0\" />\n          </svg>\n        </div>\n      )}\n      <div className={styles.content} id={detailsId}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default NonModalPopoverContent;\n"],"mappings":";;;;;;;;;;;AAyDA,IAAM,gCACJ,WACA,QACA,mBACS;CACT,gBAAgB;EAKd,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,QACd;EAGF,MAAM,WAAW,IAAI,eAAe,cAAc;EAElD,KACE,IAAI,UAAU,OAAO,eACrB,SACA,UAAU,QAAQ,eAElB,SAAS,QAAQ,OAAO;EAG1B,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAW;EAAQ;CAAc,CAAC;AACxC;AA2BA,IAAa,0BACX,UACG;CACH,MAAM,EAAE,SAAS,OAAO,KAAK,GAAG,SAAS;CAEzC,MAAM,aAAa,eAAa,GAA0B;CAE1D,MAAM,YAAY,iBAAiB,YAAY,MAAM;CAErD,IAAI,CAAC,UAAU,CAAC,WACd,OAAO;CAGT,OACE,oBAAC,6BAAD;EACE,GAAI;EACQ;EACJ;EACG;CACZ,CAAA;AAEL;AAEA,IAAM,+BACJ,UACG;CACH,MAAM,EACJ,UACA,WACA,SACA,SAAS,OACT,WACA,OACA,IACA,cACA,YACA,YAKA,WAAW,oBACX,QACA,aACA,WAAW,kBACX,YACA,sBACA,qBACA,iBACA,GAAG,SACD;CAIJ,MAAM,gBAAgB;EACpB,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,cAAc,YAAY,WAAW,mBAC3C,mBAAmB;EACjB,GAAG;EACH,WAAW;EACX;EACA;EACA;EACA,QAAQ,cAAc,UAAU;EAChC,kBAAkB;CACpB,CAAC;CAEH,6BAA6B,YAAY,QAAQ,cAAc;CAY/D,MAAM,eAAe,cAAc;CAInC,MAAM,aAAa,kBAAkB,YAAY,YAAY;CAW7D,gBAAgB;EACd,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,UAAU,CAAC,SACd;EAGF,MAAM,WAAW,QAAQ,aAAa,cAAc;EACpD,QAAQ,aACN,gBACA,WAAW,GAAG,SAAS,GAAG,cAAc,SAC1C;EAEA,aAAa;GACX,IAAI,aAAa,MACf,QAAQ,gBAAgB,cAAc;QAEtC,QAAQ,aAAa,gBAAgB,QAAQ;EAEjD;CACF,GAAG;EAAC;EAAQ;EAAY;CAAS,CAAC;CAIlC,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAChB,aAAa,KAAK;EAEtB;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACA;EACJ,KAAK;EACL,WAAW,KAAK,WAAW,uBAAO,YAAY;EAC9C,kBAAgB,aAAa,KAAA;EAC7B,iBAAe,cAAc,KAAA;EAC7B,gBAAc,aAAa,KAAA;EAC3B,OAAO;GACL,GAAG,aAAa;GAehB,QAAQ,KAAA;GACR,GAAG,kBAAkB,KAAK;GAC1B,GAAI,eAAe,CAAC,IAAI,EAAE,YAAY,SAAS;EACjD;EA5BF,UAAA,CA8BG,WACC,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW,uBAAO;GAClB,kBAAgB,aAAa,KAAA;GAC7B,OAAO;IAGL,UAAU;IACV,WACE,cAAc,SAAS,cAAc,WACjC,qBACA;IAMN,GAAG,WAAW;IACd,GAAI,YAAY,GAAG,YAAY,OAAO,IAAI,CAAC;GAC7C;GAEA,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACF,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAW,uBAAO;GAAS,IAAI;GACjC;EACE,CAAA,CACF;;AAET"}
+{"version":3,"file":"NonModalPopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/NonModalPopoverContent/NonModalPopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport { useObjectRef, useOverlayPosition } from \"react-aria\";\nimport type { Placement } from \"react-aria\";\nimport { useEnterAnimation, useExitAnimation } from \"@react-aria/utils\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface NonModalPopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  placement?: Placement;\n  offset?: number;\n  crossOffset?: number;\n  /** Swallowed on purpose — the stylesheet overrides `max-height` here. */\n  maxHeight?: number;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  arrowBoundaryOffset?: number;\n  boundaryElement?: Element;\n  /** The id react-aria's trigger points its `aria-controls` at. */\n  id?: string;\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef: RefObject<Element | null>;\n}\n\ninterface NonModalPopoverContentInnerProps extends Omit<\n  NonModalPopoverContentProps,\n  \"ref\"\n> {\n  overlayRef: RefObject<HTMLDivElement | null>;\n  isExiting: boolean;\n}\n\n/*\n * `useOverlayPosition` recalculates when the window resizes, when a scroll\n * container scrolls, and when the anchor or the popover changes *size*. It never\n * notices the anchor merely *moving*, because a popover normally opens on a user\n * interaction, long after the page settled.\n *\n * This one opens itself, so it places itself into a page that is still filling\n * in — and anything appearing above the anchor then pushes the anchor out from\n * under it. Remotely that is the normal case, not an edge case: the host\n * materializes the page in pieces as they arrive over the connection.\n *\n * Observing the ancestors covers it. In block layout an element moves because\n * something around it changed size, and a resized ancestor is the one signal\n * every such reflow has in common. What it does not catch is an ancestor of\n * fixed height rearranging inside — rare, and the next scroll or resize\n * corrects it.\n */\nconst useRepositionWhenAnchorMoves = (\n  anchorRef: RefObject<Element | null>,\n  isOpen: boolean,\n  updatePosition: () => void,\n): void => {\n  useEffect(() => {\n    // Read inside the effect. A coach mark that is open from its first render\n    // renders before the anchor's ref is attached, and a ref filling in does not\n    // re-render anything — so reading during render would see `null`, bail, and\n    // leave nothing observing.\n    const anchor = anchorRef.current;\n\n    if (!isOpen || !anchor) {\n      return;\n    }\n\n    const observer = new ResizeObserver(updatePosition);\n\n    for (\n      let element = anchor.parentElement;\n      element;\n      element = element.parentElement\n    ) {\n      observer.observe(element);\n    }\n\n    return () => observer.disconnect();\n  }, [anchorRef, isOpen, updatePosition]);\n};\n\n/*\n * The non-modal popover deliberately skips react-aria's `usePopover`, which is\n * what a popover normally builds on. That hook couples three things Flow does\n * not want here: it locks page scrolling, it hides the rest of the page from\n * assistive tech, and — the reason this component exists — it closes the\n * popover on the first scroll, with no way to opt out.\n *\n * What is left is `useOverlayPosition` for the anchoring, public react-aria API.\n * The popover therefore tracks its trigger while the page scrolls, and its\n * content stays plain content: no role, no label, no focus of its own.\n *\n * It is not portalled either. A popover that is announced by nothing has to be\n * findable where it belongs, and a portal to the end of `<body>` puts it behind\n * the whole page in reading order — so it renders where it was written, right\n * next to what it points at. Being absolutely positioned it still takes no\n * space; what it does inherit is its surroundings, so an ancestor that clips\n * (`overflow: hidden`) or a stacking context can cut it off.\n *\n * Mounting is split across two components for the same reason `Aria.Popover`\n * splits it: the closing animation has to outlive `isOpen`, so the element that\n * plays it cannot be unmounted by the render that closes it. This outer half\n * keeps the ref and the mount decision and survives across open and closed; the\n * inner half holds the positioning and remounts on every open, which is what\n * resets the entry animation.\n */\nexport const NonModalPopoverContent: FC<NonModalPopoverContentProps> = (\n  props,\n) => {\n  const { isOpen = false, ref, ...rest } = props;\n\n  const overlayRef = useObjectRef(ref as Ref<HTMLDivElement>);\n\n  const isExiting = useExitAnimation(overlayRef, isOpen);\n\n  if (!isOpen && !isExiting) {\n    return null;\n  }\n\n  return (\n    <NonModalPopoverContentInner\n      {...rest}\n      overlayRef={overlayRef}\n      isOpen={isOpen}\n      isExiting={isExiting}\n    />\n  );\n};\n\nconst NonModalPopoverContentInner: FC<NonModalPopoverContentInnerProps> = (\n  props,\n) => {\n  const {\n    children,\n    className,\n    withTip,\n    isOpen = false,\n    isExiting,\n    width,\n    id,\n    onOpenChange,\n    overlayRef,\n    triggerRef,\n    // Named one by one so that everything left over is a DOM prop and reaches\n    // the element. Funnelling the rest into the positioning instead drops\n    // `aria-*`, `data-*` and the like, which `Aria.Popover` forwards on the\n    // modal path.\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    maxHeight: ignoredMaxHeight,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n    ...rest\n  } = props;\n\n  void ignoredMaxHeight;\n\n  const positionProps = {\n    placement: requestedPlacement,\n    offset,\n    crossOffset,\n    shouldFlip,\n    shouldUpdatePosition,\n    arrowBoundaryOffset,\n    boundaryElement,\n  };\n\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const detailsId = useId();\n\n  const { overlayProps, arrowProps, placement, updatePosition } =\n    useOverlayPosition({\n      ...positionProps,\n      targetRef: triggerRef,\n      overlayRef,\n      arrowRef,\n      isOpen,\n      offset: positionProps.offset ?? 8,\n      containerPadding: popoverViewportPadding,\n    });\n\n  useRepositionWhenAnchorMoves(triggerRef, isOpen, updatePosition);\n\n  /*\n   * Until it has a placement, `useOverlayPosition` parks the popover in the top\n   * left corner (`position: fixed; top: 0; left: 0`) — it has not measured the\n   * anchor yet. Rendered on a server that corner is what ships, and the popover\n   * sits there until hydration measures; an anchor given by id is resolved a\n   * frame later still. Either way it is visibly in the wrong place first and\n   * jumps to the anchor after, so keep it out of sight until it knows where it\n   * belongs. It stays in the DOM, which is what its place in the reading order\n   * and `aria-details` depend on.\n   */\n  const isPositioned = placement !== null;\n\n  // Held back until the popover knows where it belongs — an entry animation\n  // that plays while the popover is still hidden is one the user never sees.\n  const isEntering = useEnterAnimation(overlayRef, isPositioned);\n\n  /*\n   * Nothing announces this popover, so the trigger points at it: `aria-details`\n   * tells assistive tech that there is related content and offers a way over to\n   * it — unlike `aria-describedby`, which would flatten the popover into a\n   * string and put its buttons out of reach.\n   *\n   * Set on the trigger element itself, because that element belongs to whoever\n   * rendered it. Whatever it carried before is restored on the way out.\n   */\n  useEffect(() => {\n    const trigger = triggerRef.current;\n\n    if (!isOpen || !trigger) {\n      return;\n    }\n\n    const previous = trigger.getAttribute(\"aria-details\");\n    trigger.setAttribute(\n      \"aria-details\",\n      previous ? `${previous} ${detailsId}` : detailsId,\n    );\n\n    return () => {\n      if (previous === null) {\n        trigger.removeAttribute(\"aria-details\");\n      } else {\n        trigger.setAttribute(\"aria-details\", previous);\n      }\n    };\n  }, [isOpen, triggerRef, detailsId]);\n\n  // Escape closes it. react-aria would do this through `useOverlay`, which is\n  // part of the machinery this component leaves out.\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const closeOnEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", closeOnEscape);\n    return () => document.removeEventListener(\"keydown\", closeOnEscape);\n  }, [isOpen, onOpenChange]);\n\n  return (\n    <div\n      {...rest}\n      {...overlayProps}\n      id={id}\n      ref={overlayRef}\n      className={clsx(className, styles[\"non-modal\"])}\n      data-placement={placement ?? undefined}\n      data-entering={isEntering || undefined}\n      data-exiting={isExiting || undefined}\n      style={{\n        ...overlayProps.style,\n        /*\n         * Two things `useOverlayPosition` adds for an overlay portalled to the\n         * end of `<body>` and pinned to the viewport. This one renders where it\n         * stands and scrolls with the page, so both are wrong here.\n         *\n         * `z-index: 100000` would put it in front of the whole application — it\n         * scrolled over the docs site's sticky header. Claiming no stacking\n         * level leaves that to the page: it still covers the ordinary content\n         * around it, and app chrome that sets a `z-index` keeps its place above.\n         *\n         * The `max-height` it caps the overlay at is wrong here for the same\n         * reason, but it is written straight onto the element and has to be\n         * undone in CSS — see `.non-modal` in Popover.module.scss.\n         */\n        zIndex: undefined,\n        ...popoverWidthStyle(width),\n        ...(isPositioned ? {} : { visibility: \"hidden\" }),\n      }}\n    >\n      {withTip && (\n        <div\n          {...arrowProps}\n          ref={arrowRef}\n          className={styles.tip}\n          data-placement={placement ?? undefined}\n          style={{\n            // What <Aria.OverlayArrow /> contributes on top of `arrowProps`:\n            // it lifts the tip out of the flow and centres it on the anchor.\n            position: \"absolute\",\n            transform:\n              placement === \"top\" || placement === \"bottom\"\n                ? \"translateX(-50%)\"\n                : \"translateY(-50%)\",\n            // `arrowProps.style` carries the offset along the popover's edge and\n            // leaves the other axis `undefined` — which still overwrites. So the\n            // edge the tip sits on is set last: spread first, it silently lost\n            // `top: 100%` and the tip jumped to the popover's top edge, pointing\n            // away from an anchor that was below it.\n            ...arrowProps.style,\n            ...(placement ? { [placement]: \"100%\" } : {}),\n          }}\n        >\n          <svg\n            className={styles.tipIcon}\n            width={16}\n            height={16}\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M0 0 L8 8 L16 0\" />\n          </svg>\n        </div>\n      )}\n      <div className={styles.content} id={detailsId}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nexport default NonModalPopoverContent;\n"],"mappings":";;;;;;;;;;;AAyDA,IAAM,gCACJ,WACA,QACA,mBACS;CACT,gBAAgB;EAKd,MAAM,SAAS,UAAU;EAEzB,IAAI,CAAC,UAAU,CAAC,QACd;EAGF,MAAM,WAAW,IAAI,eAAe,cAAc;EAElD,KACE,IAAI,UAAU,OAAO,eACrB,SACA,UAAU,QAAQ,eAElB,SAAS,QAAQ,OAAO;EAG1B,aAAa,SAAS,WAAW;CACnC,GAAG;EAAC;EAAW;EAAQ;CAAc,CAAC;AACxC;AA2BA,IAAa,0BACX,UACG;CACH,MAAM,EAAE,SAAS,OAAO,KAAK,GAAG,SAAS;CAEzC,MAAM,aAAa,eAAa,GAA0B;CAE1D,MAAM,YAAY,iBAAiB,YAAY,MAAM;CAErD,IAAI,CAAC,UAAU,CAAC,WACd,OAAO;CAGT,OACE,oBAAC,6BAAD;EACE,GAAI;EACQ;EACJ;EACG;CACZ,CAAA;AAEL;AAEA,IAAM,+BACJ,UACG;CACH,MAAM,EACJ,UACA,WACA,SACA,SAAS,OACT,WACA,OACA,IACA,cACA,YACA,YAKA,WAAW,oBACX,QACA,aACA,WAAW,kBACX,YACA,sBACA,qBACA,iBACA,GAAG,SACD;CAIJ,MAAM,gBAAgB;EACpB,WAAW;EACX;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,YAAY,MAAM;CAExB,MAAM,EAAE,cAAc,YAAY,WAAW,mBAC3C,mBAAmB;EACjB,GAAG;EACH,WAAW;EACX;EACA;EACA;EACA,QAAQ,cAAc,UAAU;EAChC,kBAAkB;CACpB,CAAC;CAEH,6BAA6B,YAAY,QAAQ,cAAc;CAY/D,MAAM,eAAe,cAAc;CAInC,MAAM,aAAa,kBAAkB,YAAY,YAAY;CAW7D,gBAAgB;EACd,MAAM,UAAU,WAAW;EAE3B,IAAI,CAAC,UAAU,CAAC,SACd;EAGF,MAAM,WAAW,QAAQ,aAAa,cAAc;EACpD,QAAQ,aACN,gBACA,WAAW,GAAG,SAAS,GAAG,cAAc,SAC1C;EAEA,aAAa;GACX,IAAI,aAAa,MACf,QAAQ,gBAAgB,cAAc;QAEtC,QAAQ,aAAa,gBAAgB,QAAQ;EAEjD;CACF,GAAG;EAAC;EAAQ;EAAY;CAAS,CAAC;CAIlC,gBAAgB;EACd,IAAI,CAAC,QACH;EAGF,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAChB,aAAa,KAAK;EAEtB;EAEA,SAAS,iBAAiB,WAAW,aAAa;EAClD,aAAa,SAAS,oBAAoB,WAAW,aAAa;CACpE,GAAG,CAAC,QAAQ,YAAY,CAAC;CAEzB,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,GAAI;EACA;EACJ,KAAK;EACL,WAAW,KAAK,WAAW,uBAAO,YAAY;EAC9C,kBAAgB,aAAa,KAAA;EAC7B,iBAAe,cAAc,KAAA;EAC7B,gBAAc,aAAa,KAAA;EAC3B,OAAO;GACL,GAAG,aAAa;GAehB,QAAQ,KAAA;GACR,GAAG,kBAAkB,KAAK;GAC1B,GAAI,eAAe,CAAC,IAAI,EAAE,YAAY,SAAS;EACjD;EA5BF,UAAA,CA8BG,WACC,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,WAAW,uBAAO;GAClB,kBAAgB,aAAa,KAAA;GAC7B,OAAO;IAGL,UAAU;IACV,WACE,cAAc,SAAS,cAAc,WACjC,qBACA;IAMN,GAAG,WAAW;IACd,GAAI,YAAY,GAAG,YAAY,OAAO,IAAI,CAAC;GAC7C;GAEA,UAAA,oBAAC,OAAD;IACE,WAAW,uBAAO;IAClB,OAAO;IACP,QAAQ;IACR,SAAQ;IAER,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACF,CAAA,GAEP,oBAAC,OAAD;GAAK,WAAW,uBAAO;GAAS,IAAI;GACjC;EACE,CAAA,CACF;;AAET"}

package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs

@@ -48,6 +48,7 @@ var PopoverContent = (props) => {
 		children: [withTip && /* @__PURE__ */ jsx(Aria.OverlayArrow, {
 			className: Popover_module_default.tip,
 			children: /* @__PURE__ */ jsx("svg", {
+				className: Popover_module_default.tipIcon,
 				width: 16,
 				height: 16,
 				viewBox: "0 0 16 16",

package/dist/js/packages/components/src/components/Popover/components/PopoverContent/PopoverContent.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isDialogContent?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  /** @internal Set by `CoachMark`; see `PopoverProps`. */\n  modality?: \"modal\" | \"non-modal\";\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef?: RefObject<Element | null>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n  const {\n    children,\n    className,\n    isDialogContent = false,\n    withTip,\n    onOpenChange,\n    ref,\n    isOpen,\n    width,\n    modality,\n    ...rest\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  // A trigger hands its popover a ref through the context react-aria sets up,\n  // and the non-modal popover has to anchor itself with it.\n  const popoverContext = useContext(Aria.PopoverContext);\n  const triggerRefFromContext =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined;\n\n  // The trigger points its `aria-controls` at this id while the popover is\n  // open, so the popover has to carry it — react-aria's own only applies it\n  // when the popover is a dialog.\n  const idFromContext =\n    popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n  const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  if (modality === \"non-modal\") {\n    const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n    // Without an anchor there is nothing to position against. react-aria's own\n    // popover has the same requirement; it just throws further in.\n    if (!anchor) {\n      return null;\n    }\n\n    return (\n      <NonModalPopoverContent\n        {...rest}\n        className={className}\n        ref={ref}\n        isOpen={isOpen}\n        width={width}\n        withTip={withTip}\n        id={idFromContext}\n        triggerRef={anchor}\n        onOpenChange={onOpenChange}\n      >\n        {children}\n      </NonModalPopoverContent>\n    );\n  }\n\n  return (\n    <Aria.Popover\n      {...rest}\n      className={className}\n      containerPadding={popoverViewportPadding}\n      ref={ref}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      style={popoverWidthStyle(width)}\n    >\n      {withTip && (\n        <Aria.OverlayArrow className={styles.tip}>\n          <svg width={16} height={16} viewBox=\"0 0 16 16\">\n            <path d=\"M0 0 L8 8 L16 0\" />\n          </svg>\n        </Aria.OverlayArrow>\n      )}\n      <ContentComponent className={styles.content}>{children}</ContentComponent>\n    </Aria.Popover>\n  );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IAAK,OAAO;IAAI,QAAQ;IAAI,SAAQ;IAClC,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}
+{"version":3,"file":"PopoverContent.mjs","names":[],"sources":["../../../../../../../../../src/components/Popover/components/PopoverContent/PopoverContent.tsx"],"sourcesContent":["import type { FC, PropsWithChildren, Ref, RefObject } from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"../../Popover.module.scss\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport { useIsActivityActive } from \"@/components/Activity/context\";\nimport { NonModalPopoverContent } from \"../NonModalPopoverContent\";\nimport { popoverViewportPadding } from \"../../viewportPadding\";\nimport { popoverWidthStyle } from \"../../widthStyle\";\n\nexport interface PopoverContentProps\n  extends PropsWithChildren, PropsWithClassName {\n  withTip?: boolean;\n  isDialogContent?: boolean;\n  isOpen?: boolean;\n  width?: string | number;\n  /** @internal Set by `CoachMark`; see `PopoverProps`. */\n  modality?: \"modal\" | \"non-modal\";\n  onOpenChange: (isOpen: boolean) => void;\n  ref?: Ref<HTMLElement>;\n  triggerRef?: RefObject<Element | null>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props modality\n */\nexport const PopoverContent: FC<PopoverContentProps> = (props) => {\n  const {\n    children,\n    className,\n    isDialogContent = false,\n    withTip,\n    onOpenChange,\n    ref,\n    isOpen,\n    width,\n    modality,\n    ...rest\n  } = props;\n\n  const isActivityActive = useIsActivityActive();\n\n  // A trigger hands its popover a ref through the context react-aria sets up,\n  // and the non-modal popover has to anchor itself with it.\n  const popoverContext = useContext(Aria.PopoverContext);\n  const triggerRefFromContext =\n    popoverContext && \"triggerRef\" in popoverContext\n      ? popoverContext.triggerRef\n      : undefined;\n\n  // The trigger points its `aria-controls` at this id while the popover is\n  // open, so the popover has to carry it — react-aria's own only applies it\n  // when the popover is a dialog.\n  const idFromContext =\n    popoverContext && \"id\" in popoverContext ? popoverContext.id : undefined;\n\n  const ContentComponent = isDialogContent ? Aria.Dialog : \"div\";\n\n  if (!isActivityActive) {\n    return null;\n  }\n\n  if (modality === \"non-modal\") {\n    const anchor = rest.triggerRef ?? triggerRefFromContext;\n\n    // Without an anchor there is nothing to position against. react-aria's own\n    // popover has the same requirement; it just throws further in.\n    if (!anchor) {\n      return null;\n    }\n\n    return (\n      <NonModalPopoverContent\n        {...rest}\n        className={className}\n        ref={ref}\n        isOpen={isOpen}\n        width={width}\n        withTip={withTip}\n        id={idFromContext}\n        triggerRef={anchor}\n        onOpenChange={onOpenChange}\n      >\n        {children}\n      </NonModalPopoverContent>\n    );\n  }\n\n  return (\n    <Aria.Popover\n      {...rest}\n      className={className}\n      containerPadding={popoverViewportPadding}\n      ref={ref}\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      style={popoverWidthStyle(width)}\n    >\n      {withTip && (\n        <Aria.OverlayArrow className={styles.tip}>\n          <svg\n            className={styles.tipIcon}\n            width={16}\n            height={16}\n            viewBox=\"0 0 16 16\"\n          >\n            <path d=\"M0 0 L8 8 L16 0\" />\n          </svg>\n        </Aria.OverlayArrow>\n      )}\n      <ContentComponent className={styles.content}>{children}</ContentComponent>\n    </Aria.Popover>\n  );\n};\n\nexport default PopoverContent;\n"],"mappings":";;;;;;;;;;;;;;;AA2BA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,WACA,kBAAkB,OAClB,SACA,cACA,KACA,QACA,OACA,UACA,GAAG,SACD;CAEJ,MAAM,mBAAmB,oBAAoB;CAI7C,MAAM,iBAAiB,WAAW,KAAK,cAAc;CACrD,MAAM,wBACJ,kBAAkB,gBAAgB,iBAC9B,eAAe,aACf,KAAA;CAKN,MAAM,gBACJ,kBAAkB,QAAQ,iBAAiB,eAAe,KAAK,KAAA;CAEjE,MAAM,mBAAmB,kBAAkB,KAAK,SAAS;CAEzD,IAAI,CAAC,kBACH,OAAO;CAGT,IAAI,aAAa,aAAa;EAC5B,MAAM,SAAS,KAAK,cAAc;EAIlC,IAAI,CAAC,QACH,OAAO;EAGT,OACE,oBAAC,wBAAD;GACE,GAAI;GACO;GACN;GACG;GACD;GACE;GACT,IAAI;GACJ,YAAY;GACE;GAEb;EACqB,CAAA;CAE5B;CAEA,OACE,qBAAC,KAAK,SAAN;EACE,GAAI;EACO;EACX,kBAAkB;EACb;EACG;EACM;EACd,OAAO,kBAAkB,KAAK;EAPhC,UAAA,CASG,WACC,oBAAC,KAAK,cAAN;GAAmB,WAAW,uBAAO;GACnC,UAAA,oBAAC,OAAD;IACE,WAAW,uBAAO;IAClB,OAAO;IACP,QAAQ;IACR,SAAQ;IAER,UAAA,oBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;GACxB,CAAA;EACY,CAAA,GAErB,oBAAC,kBAAD;GAAkB,WAAW,uBAAO;GAAU;EAA2B,CAAA,CAC7D;;AAElB"}

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

@@ -6,16 +6,16 @@ var clearButton = "flow--search-field--clear-button";
 var searchIcon = "flow--search-field--search-icon";
 var kbd = "flow--search-field--kbd";
 var inputContainer = "flow--search-field--input-container";
-var readonly = "flow--search-field--readonly";
 var input = "flow--search-field--input";
+var readonly = "flow--search-field--readonly";
 var SearchField_module_default = {
 	searchField,
 	clearButton,
 	searchIcon,
 	kbd,
 	inputContainer,
-	readonly,
-	input
+	input,
+	readonly
 };
 //#endregion
 export { clearButton, SearchField_module_default as default, input, inputContainer, kbd, readonly, searchField, searchIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.searchField {\n  &[data-empty] .clearButton {\n    display: none;\n  }\n\n  .searchIcon {\n    color: var(--form-control--placeholder-color--default);\n    margin-inline: var(--size-px--s);\n  }\n\n  .kbd {\n    margin-inline-end: var(--size-px--m);\n  }\n\n  &:disabled,\n  &[data-disabled],\n  [aria-disabled] & {\n    .inputContainer {\n      background-color: var(--form-control--background-color--disabled);\n      border-color: var(--form-control--border-color--disabled);\n    }\n\n    .searchIcon {\n      color: var(--form-control--placeholder-color--disabled);\n    }\n\n    input::placeholder {\n      color: var(--form-control--placeholder-color--disabled);\n    }\n  }\n}\n\n.inputContainer {\n  order: 2;\n  display: flex;\n  position: relative;\n  align-items: center;\n\n  @include formControl.formControl();\n\n  & {\n    padding: 0;\n  }\n\n  .input {\n    border: none;\n    background: none;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    flex-grow: 1;\n    min-width: 0;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--form-control--placeholder-color--default);\n    }\n\n    &[data-focused],\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .clearButton {\n    padding-block: initial;\n    align-self: stretch;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchField.module.mjs","names":[],"sources":["../../../../../../../src/components/SearchField/SearchField.module.scss"],"sourcesContent":["@use \"@/styles/mixins/formControl\";\n\n.searchField {\n  &[data-empty] .clearButton {\n    display: none;\n  }\n\n  .searchIcon {\n    color: var(--form-control--placeholder-color--default);\n    margin-inline: var(--size-px--s);\n  }\n\n  .kbd {\n    margin-inline-end: var(--size-px--m);\n  }\n\n  &:disabled,\n  &[data-disabled],\n  [aria-disabled] & {\n    .inputContainer {\n      background-color: var(--form-control--background-color--disabled);\n      border-color: var(--form-control--border-color--disabled);\n    }\n\n    .searchIcon {\n      color: var(--form-control--placeholder-color--disabled);\n    }\n\n    .input::placeholder {\n      color: var(--form-control--placeholder-color--disabled);\n    }\n  }\n}\n\n.inputContainer {\n  order: 2;\n  display: flex;\n  position: relative;\n  align-items: center;\n\n  @include formControl.formControl();\n\n  & {\n    padding: 0;\n  }\n\n  .input {\n    border: none;\n    background: none;\n    padding-block: calc(\n      var(--form-control--padding-y) - var(--form-control--border-width)\n    );\n    flex-grow: 1;\n    min-width: 0;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--form-control--placeholder-color--default);\n    }\n\n    &[data-focused],\n    &:focus-visible {\n      outline: none;\n    }\n  }\n\n  .clearButton {\n    padding-block: initial;\n    align-self: stretch;\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--section--spacing);\n  width: 100%;\n  min-width: 0;\n\n  > form {\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n  }\n\n  /* Children that render nothing still leave the element behind — the guard in\n     Section.tsx only sees the child, not its output (a boundary returning null,\n     an empty fragment, a map over an empty array). Collapse it so it neither\n     draws its own separator nor claims section-to-section spacing, while\n     staying in the sibling chain so the next section keeps exactly one\n     separator. */\n  &:empty {\n    display: none;\n  }\n\n  + .section {\n    margin-block-start: var(--section--section-to-section-spacing);\n  }\n\n  &:not(.hideSeparator) + .section {\n    border-block-start: var(--separator--height) var(--border-style--default)\n      var(--separator--color);\n    padding-block-start: var(--section--section-to-section-spacing);\n  }\n\n  h2.heading:not(:first-child),\n  h3.heading:not(:first-child) {\n    margin-top: var(--section--sub-heading-spacing-m);\n  }\n\n  h4.heading:not(:first-child),\n  h5.heading:not(:first-child),\n  h6.heading:not(:first-child) {\n    margin-top: var(--section--sub-heading-spacing-s);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Section.module.mjs","names":[],"sources":["../../../../../../../src/components/Section/Section.module.scss"],"sourcesContent":[".section {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--section--spacing);\n  width: 100%;\n  min-width: 0;\n\n  // A consumer `Form` wrapping the section content. `Form` is a plain FC, so\n  // the props context cannot give it a class.\n  // stylelint-disable-next-line selector-max-type -- consumer form, no class\n  > form {\n    display: flex;\n    flex-direction: column;\n    row-gap: var(--section--spacing);\n  }\n\n  /* Children that render nothing still leave the element behind — the guard in\n     Section.tsx only sees the child, not its output (a boundary returning null,\n     an empty fragment, a map over an empty array). Collapse it so it neither\n     draws its own separator nor claims section-to-section spacing, while\n     staying in the sibling chain so the next section keeps exactly one\n     separator. */\n  &:empty {\n    display: none;\n  }\n\n  + .section {\n    margin-block-start: var(--section--section-to-section-spacing);\n  }\n\n  &:not(.hideSeparator) + .section {\n    border-block-start: var(--separator--height) var(--border-style--default)\n      var(--separator--color);\n    padding-block-start: var(--section--section-to-section-spacing);\n  }\n\n  /* Keys on the heading's rendered element, not on `Heading`'s level class: a\n     `Heading` with `elementType` renders a span/p that carries the level class\n     but must not claim heading-to-content spacing. */\n  // stylelint-disable selector-max-type -- element type is the signal, see above\n  h2.heading:not(:first-child),\n  h3.heading:not(:first-child) {\n    margin-top: var(--section--sub-heading-spacing-m);\n  }\n\n  h4.heading:not(:first-child),\n  h5.heading:not(:first-child),\n  h6.heading:not(:first-child) {\n    margin-top: var(--section--sub-heading-spacing-s);\n  }\n  // stylelint-enable selector-max-type\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Section/components/SectionHeader/SectionHeader.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SectionHeader.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.module.scss"],"sourcesContent":[".sectionHeader {\n  display: flex;\n  gap: var(--section-header--heading-to-action-spacing);\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  .actions {\n    display: flex;\n    gap: var(--section-header--action-to-action-spacing);\n    margin-inline-start: auto;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  &:not(:first-child):has(h2),\n  &:not(:first-child):has(h3) {\n    margin-top: var(--section--sub-heading-spacing-m);\n  }\n\n  &:not(:first-child):has(h4),\n  &:not(:first-child):has(h5),\n  &:not(:first-child):has(h6) {\n    margin-top: var(--section--sub-heading-spacing-s);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SectionHeader.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Section/components/SectionHeader/SectionHeader.module.scss"],"sourcesContent":[".sectionHeader {\n  display: flex;\n  gap: var(--section-header--heading-to-action-spacing);\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap;\n\n  .actions {\n    display: flex;\n    gap: var(--section-header--action-to-action-spacing);\n    margin-inline-start: auto;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n\n  /* Keys on the heading's rendered element, not on `Heading`'s level class: a\n     `Heading` with `elementType` renders a span/p that carries the level class\n     but must not claim heading-to-content spacing. */\n  // stylelint-disable selector-max-type -- element type is the signal, see above\n  &:not(:first-child):has(h2),\n  &:not(:first-child):has(h3) {\n    margin-top: var(--section--sub-heading-spacing-m);\n  }\n\n  &:not(:first-child):has(h4),\n  &:not(:first-child):has(h5),\n  &:not(:first-child):has(h6) {\n    margin-top: var(--section--sub-heading-spacing-s);\n  }\n  // stylelint-enable selector-max-type\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  row-gap: var(--slider--spacing-y);\n\n  --button-size: calc(\n    var(--button--line-height-s) + var(--button--padding-s-y) * 2\n  );\n\n  .text {\n    text-align: center;\n    align-items: end;\n    padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n    padding-top: calc(var(--slider--spacing-y) / 2);\n\n    label {\n      margin: 0;\n    }\n\n    .value {\n      font-size: var(--font-size-text--s);\n      font-weight: var(--slider--value-font-weight);\n    }\n\n    .label {\n      display: inline-flex;\n      column-gap: var(--label--spacing);\n    }\n  }\n\n  .track {\n    grid-area: track;\n    position: relative;\n    height: var(--slider--track-height);\n    background-color: var(--slider--track-color--default);\n    width: 100%;\n    border-radius: var(--slider--corner-radius);\n    border: var(--slider--track-border-width) var(--slider--track-border-style)\n      var(--slider--track-border-color--default);\n  }\n\n  .fill {\n    position: absolute;\n    height: var(--slider--track-height);\n    background-color: var(--slider--color--default);\n    top: calc(50% - var(--slider--track-height) / 2);\n    border-radius: var(--slider--corner-radius);\n  }\n\n  .initialMarker {\n    position: absolute;\n    height: var(--slider--initial-marker-height);\n    width: var(--slider--initial-marker-border-width);\n    background-color: var(--slider--color--default);\n    top: calc(50% - var(--slider--initial-marker-height) / 2);\n    border-radius: var(--slider--corner-radius);\n  }\n\n  .handle {\n    width: var(--slider--handle-size);\n    height: var(--slider--handle-size);\n    border-radius: var(--slider--handle-corner-radius);\n    background-color: var(--slider--handle-fill-color);\n    border: var(--slider--handle-border-width) var(--slider--track-border-style)\n      var(--slider--color--default);\n    forced-color-adjust: none;\n    top: 50%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    &[data-dragging],\n    &[data-focus-visible] {\n      background-color: var(--slider--color--default);\n    }\n\n    &[data-focus-visible] {\n      @include focus.focus;\n\n      & {\n        outline-offset: var(--size-px--xs);\n      }\n    }\n  }\n\n  .increment,\n  .decrement {\n    position: absolute;\n    top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n  }\n\n  .increment {\n    inset-inline-end: 0;\n  }\n\n  .decrement {\n    inset-inline-start: 0;\n  }\n\n  &.disabled {\n    .track {\n      background-color: var(--slider--track-color--disabled);\n      border-color: var(--slider--track-border-color--disabled);\n    }\n\n    .fill {\n      background-color: var(--slider--color--disabled);\n    }\n\n    .handle {\n      border-color: var(--slider--color--disabled);\n    }\n\n    .text {\n      color: var(--text--color--disabled);\n    }\n  }\n}\n\n/*\n.slider {\n\n\n\n\n\n\n\n\n\n}\n*/\n"],"mappings":""}
+{"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../../../../../src/components/Slider/Slider.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  row-gap: var(--slider--spacing-y);\n\n  --button-size: calc(\n    var(--button--line-height-s) + var(--button--padding-s-y) * 2\n  );\n\n  .text {\n    text-align: center;\n    align-items: end;\n    padding-inline: calc(var(--button-size) + var(--slider--spacing-x));\n    padding-top: calc(var(--slider--spacing-y) / 2);\n\n    .value {\n      font-size: var(--font-size-text--s);\n      font-weight: var(--slider--value-font-weight);\n    }\n\n    .label {\n      margin: 0;\n      display: inline-flex;\n      column-gap: var(--label--spacing);\n    }\n  }\n\n  .track {\n    grid-area: track;\n    position: relative;\n    height: var(--slider--track-height);\n    background-color: var(--slider--track-color--default);\n    width: 100%;\n    border-radius: var(--slider--corner-radius);\n    border: var(--slider--track-border-width) var(--slider--track-border-style)\n      var(--slider--track-border-color--default);\n  }\n\n  .fill {\n    position: absolute;\n    height: var(--slider--track-height);\n    background-color: var(--slider--color--default);\n    top: calc(50% - var(--slider--track-height) / 2);\n    border-radius: var(--slider--corner-radius);\n  }\n\n  .initialMarker {\n    position: absolute;\n    height: var(--slider--initial-marker-height);\n    width: var(--slider--initial-marker-border-width);\n    background-color: var(--slider--color--default);\n    top: calc(50% - var(--slider--initial-marker-height) / 2);\n    border-radius: var(--slider--corner-radius);\n  }\n\n  .handle {\n    width: var(--slider--handle-size);\n    height: var(--slider--handle-size);\n    border-radius: var(--slider--handle-corner-radius);\n    background-color: var(--slider--handle-fill-color);\n    border: var(--slider--handle-border-width) var(--slider--track-border-style)\n      var(--slider--color--default);\n    forced-color-adjust: none;\n    top: 50%;\n    transition-property: background-color;\n    transition-duration: var(--transition--duration--default);\n\n    &[data-dragging],\n    &[data-focus-visible] {\n      background-color: var(--slider--color--default);\n    }\n\n    &[data-focus-visible] {\n      @include focus.focus;\n\n      & {\n        outline-offset: var(--size-px--xs);\n      }\n    }\n  }\n\n  .increment,\n  .decrement {\n    position: absolute;\n    top: calc((var(--slider--spacing-y) + var(--button-size)) * -1);\n  }\n\n  .increment {\n    inset-inline-end: 0;\n  }\n\n  .decrement {\n    inset-inline-start: 0;\n  }\n\n  &.disabled {\n    .track {\n      background-color: var(--slider--track-color--disabled);\n      border-color: var(--slider--track-border-color--disabled);\n    }\n\n    .fill {\n      background-color: var(--slider--color--disabled);\n    }\n\n    .handle {\n      border-color: var(--slider--color--disabled);\n    }\n\n    .text {\n      color: var(--text--color--disabled);\n    }\n  }\n}\n\n/*\n.slider {\n\n\n\n\n\n\n\n\n\n}\n*/\n"],"mappings":""}

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

@@ -27,7 +27,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 	const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } = useCollapsingItems();
 	const rootClassName = clsx(TabNavigation_module_default.tabNavigation, hasOverflow && TabNavigation_module_default.collapsed, className);
 	const propsContext = { Link: {
-		wrapWith: /* @__PURE__ */ jsx("li", {}),
+		wrapWith: /* @__PURE__ */ jsx("li", { className: TabNavigation_module_default.item }),
 		className: TabNavigation_module_default.link,
 		unstyled: true,
 		children: dynamic((linkProps) => /* @__PURE__ */ jsx(LinkContent, { linkProps }))
@@ -38,6 +38,7 @@ var TabNavigation = flowComponent("TabNavigation", (props) => {
 		...rest,
 		ref,
 		children: [/* @__PURE__ */ jsx("ul", {
+			className: TabNavigation_module_default.list,
 			ref: listRef,
 			children: /* @__PURE__ */ jsx(PropsContextProvider, {
 				props: propsContext,

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

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4B,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpB,6BAAO,eACP,eAAe,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,KAAK;GACP,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAW,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACT,6BAAO,YACP,sBAAsB,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}
+{"version":3,"file":"TabNavigation.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport clsx from \"clsx\";\nimport { Button } from \"@/components/Button\";\nimport { IconChevronDown } from \"@/components/Icon/components/icons\";\nimport { Text } from \"@/components/Text\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport {\n  dynamic,\n  type PropsContext,\n  PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport ContextMenuTriggerView from \"@/views/ContextMenuTriggerView\";\nimport ContextMenuView from \"@/views/ContextMenuView\";\nimport { LinkContent } from \"./components/LinkContent\";\nimport styles from \"./TabNavigation.module.scss\";\nimport locales from \"./locales/*.locale.json\";\nimport { useCollapsingItems } from \"./lib/useCollapsingItems\";\n\nexport interface TabNavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * @flr-generate all\n * @flowStatus new\n */\nexport const TabNavigation = flowComponent(\"TabNavigation\", (props) => {\n  const { children, className, ref, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(locales, \"TabNavigation\");\n\n  const { listRef, moreRef, visibleCount, hasOverflow, menuHasCurrentItem } =\n    useCollapsingItems();\n\n  const rootClassName = clsx(\n    styles.tabNavigation,\n    hasOverflow && styles.collapsed,\n    className,\n  );\n\n  const propsContext: PropsContext = {\n    Link: {\n      wrapWith: <li className={styles.item} />,\n      className: styles.link,\n      unstyled: true,\n      children: dynamic((linkProps) => <LinkContent linkProps={linkProps} />),\n    },\n  };\n\n  return (\n    <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n      <ul className={styles.list} ref={listRef}>\n        <PropsContextProvider props={propsContext}>\n          {children}\n        </PropsContextProvider>\n      </ul>\n      <div className={styles.more} ref={moreRef}>\n        <ContextMenuTriggerView>\n          <Button\n            unstyled\n            className={clsx(\n              styles.moreButton,\n              menuHasCurrentItem && styles.current,\n            )}\n          >\n            <Text emulateBoldWidth>\n              {stringFormatter.format(\"moreButton.title\")}\n            </Text>\n            <IconChevronDown />\n          </Button>\n          <ContextMenuView placement=\"bottom end\">\n            <UiComponentTunnelExit\n              id=\"menuItems\"\n              component=\"TabNavigation\"\n              children={(menuItems) =>\n                Array.isArray(menuItems)\n                  ? menuItems.slice(visibleCount ?? menuItems.length)\n                  : menuItems\n              }\n            />\n          </ContextMenuView>\n        </ContextMenuTriggerView>\n      </div>\n    </nav>\n  );\n});\n\nexport default TabNavigation;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,gBAAgB,cAAc,kBAAkB,UAAU;CACrE,MAAM,EAAE,UAAU,WAAW,KAAK,GAAG,SAAS;CAE9C,MAAM,kBAAkB,4BAA4B,kBAAS,eAAe;CAE5E,MAAM,EAAE,SAAS,SAAS,cAAc,aAAa,uBACnD,mBAAmB;CAErB,MAAM,gBAAgB,KACpB,6BAAO,eACP,eAAe,6BAAO,WACtB,SACF;CAEA,MAAM,eAA6B,EACjC,MAAM;EACJ,UAAU,oBAAC,MAAD,EAAI,WAAW,6BAAO,KAAO,CAAA;EACvC,WAAW,6BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,oBAAC,aAAD,EAAwB,UAAY,CAAA,CAAC;CACxE,EACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAW;EAAe,MAAK;EAAa,GAAI;EAAW;EAAhE,UAAA,CACE,oBAAC,MAAD;GAAI,WAAW,6BAAO;GAAM,KAAK;GAC/B,UAAA,oBAAC,sBAAD;IAAsB,OAAO;IAC1B;GACmB,CAAA;EACpB,CAAA,GACJ,oBAAC,OAAD;GAAK,WAAW,6BAAO;GAAM,KAAK;GAChC,UAAA,qBAAC,wBAAD,EAAA,UAAA,CACE,qBAAC,QAAD;IACE,UAAA;IACA,WAAW,KACT,6BAAO,YACP,sBAAsB,6BAAO,OAC/B;IALF,UAAA,CAOE,oBAAC,MAAD;KAAM,kBAAA;KACH,UAAA,gBAAgB,OAAO,kBAAkB;IACtC,CAAA,GACN,oBAAC,iBAAD,CAAkB,CAAA,CACZ;GACR,CAAA,GAAA,oBAAC,iBAAD;IAAiB,WAAU;IACzB,UAAA,oBAAC,uBAAD;KACE,IAAG;KACH,WAAU;KACV,WAAW,cACT,MAAM,QAAQ,SAAS,IACnB,UAAU,MAAM,gBAAgB,UAAU,MAAM,IAChD;IAEP,CAAA;GACc,CAAA,CACK,EAAA,CAAA;EACrB,CAAA,CACF;;AAET,CAAC"}

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

@@ -2,6 +2,8 @@
 /* */
 //#region src/components/TabNavigation/TabNavigation.module.scss
 var tabNavigation = "flow--tab-navigation";
+var list = "flow--tab-navigation--list";
+var item = "flow--tab-navigation--item";
 var link = "flow--tab-navigation--link";
 var text = "flow--tab-navigation--text";
 var more = "flow--tab-navigation--more";
@@ -10,6 +12,8 @@ var current = "flow--tab-navigation--current";
 var collapsed = "flow--tab-navigation--collapsed";
 var TabNavigation_module_default = {
 	tabNavigation,
+	list,
+	item,
 	link,
 	text,
 	more,
@@ -18,6 +22,6 @@ var TabNavigation_module_default = {
 	collapsed
 };
 //#endregion
-export { collapsed, current, TabNavigation_module_default as default, link, more, moreButton, tabNavigation, text };
+export { collapsed, current, TabNavigation_module_default as default, item, link, list, more, moreButton, tabNavigation, text };
 
 //# sourceMappingURL=TabNavigation.module.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabNavigation {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  background-color: var(--tab-navigation--background-color--default);\n\n  ul {\n    display: flex;\n    flex-direction: row;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: clip;\n  }\n\n  li {\n    display: flex;\n    list-style: none;\n  }\n\n  /* Elements */\n\n  .link {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n    padding: var(--tab-navigation--padding);\n    background-color: var(--tab-navigation--background-color--default);\n    color: var(--tab-navigation--color);\n    white-space: nowrap;\n    transition-property: background-color;\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xs) * -1);\n    }\n\n    &:hover {\n      background-color: var(--tab-navigation--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tab-navigation--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[aria-current] {\n      background-color: var(--tab-navigation--background-color--current);\n      font-weight: var(--tab-navigation--font-weight--current);\n    }\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n  }\n\n  .more {\n    display: flex;\n    align-items: stretch;\n\n    /* Rendered (but hidden) when there is no overflow, so its width can be\n       reserved before items are collapsed. */\n    visibility: hidden;\n    position: absolute;\n    inset-inline-end: 0;\n  }\n\n  .moreButton {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n    padding: var(--tab-navigation--padding);\n    border: none;\n    border-radius: 0;\n    background-color: var(--tab-navigation--background-color--default);\n    color: var(--tab-navigation--color);\n    cursor: pointer;\n    white-space: nowrap;\n    transition-property: background-color;\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xs) * -1);\n    }\n\n    &:hover {\n      background-color: var(--tab-navigation--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tab-navigation--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &.current,\n    &.current:hover {\n      background-color: var(--tab-navigation--background-color--current);\n      font-weight: var(--tab-navigation--font-weight--current);\n    }\n  }\n\n  /* States */\n\n  &.collapsed {\n    .more {\n      visibility: visible;\n      position: static;\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TabNavigation.module.mjs","names":[],"sources":["../../../../../../../src/components/TabNavigation/TabNavigation.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabNavigation {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  background-color: var(--tab-navigation--background-color--default);\n\n  .list {\n    display: flex;\n    flex-direction: row;\n    flex: 1 1 auto;\n    min-width: 0;\n    overflow-x: clip;\n  }\n\n  .item {\n    display: flex;\n    list-style: none;\n  }\n\n  /* Elements */\n\n  .link {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n    padding: var(--tab-navigation--padding);\n    background-color: var(--tab-navigation--background-color--default);\n    color: var(--tab-navigation--color);\n    white-space: nowrap;\n    transition-property: background-color;\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xs) * -1);\n    }\n\n    &:hover {\n      background-color: var(--tab-navigation--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tab-navigation--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[aria-current] {\n      background-color: var(--tab-navigation--background-color--current);\n      font-weight: var(--tab-navigation--font-weight--current);\n    }\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n  }\n\n  .more {\n    display: flex;\n    align-items: stretch;\n\n    /* Rendered (but hidden) when there is no overflow, so its width can be\n       reserved before items are collapsed. */\n    visibility: hidden;\n    position: absolute;\n    inset-inline-end: 0;\n  }\n\n  .moreButton {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tab-navigation--spacing);\n    padding: var(--tab-navigation--padding);\n    border: none;\n    border-radius: 0;\n    background-color: var(--tab-navigation--background-color--default);\n    color: var(--tab-navigation--color);\n    cursor: pointer;\n    white-space: nowrap;\n    transition-property: background-color;\n\n    @include focus.focus;\n\n    & {\n      outline-offset: calc(var(--size-px--xs) * -1);\n    }\n\n    &:hover {\n      background-color: var(--tab-navigation--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tab-navigation--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &.current,\n    &.current:hover {\n      background-color: var(--tab-navigation--background-color--current);\n      font-weight: var(--tab-navigation--font-weight--current);\n    }\n  }\n\n  /* States */\n\n  &.collapsed {\n    .more {\n      visibility: visible;\n      position: static;\n    }\n  }\n}\n"],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Table.module.mjs","names":[],"sources":["../../../../../../../src/components/Table/Table.module.scss"],"sourcesContent":["@use \"@/styles/mixins/scrollbar\";\n\n.tableContainer {\n  @include scrollbar.scrollbar;\n\n  width: 100%;\n  overflow-x: auto;\n}\n\n.tableScrollArea {\n  width: 100%;\n}\n\n.table {\n  border-radius: var(--table--corner-radius);\n  overflow: hidden;\n  width: 100%;\n  border-width: var(--table--border-width);\n  border-style: var(--table--border-style);\n  border-color: var(--table--border-color);\n  border-spacing: 0;\n  background-color: var(--table--background-color);\n\n  .column {\n    font-weight: var(--table--header-font-weight);\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  .cell,\n  .column {\n    padding-inline: var(--table--padding-x);\n    padding-block: var(--table--padding-y);\n    text-align: start;\n    vertical-align: top;\n    border-style: var(--table--border-style);\n    border-color: var(--table--border-color);\n    border-width: 0;\n\n    // Cell content is the consumer's — a Flow icon or a raw `<svg>`.\n    // stylelint-disable-next-line selector-max-type -- consumer content\n    > svg {\n      vertical-align: bottom;\n    }\n\n    &.horizontal-align-center {\n      text-align: center;\n    }\n\n    &.horizontal-align-end {\n      text-align: end;\n    }\n  }\n\n  .header {\n    .column {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  :where(.body) {\n    :where(.row) {\n      &:where(:nth-of-type(odd):not(.footer)) {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) {\n        .cell {\n          border-block-end-width: var(--table--border-width);\n        }\n      }\n\n      &.footer .cell {\n        border-block-start-width: var(--table--border-width);\n      }\n    }\n  }\n\n  &.vertical-align-middle {\n    .cell,\n    .column {\n      vertical-align: middle;\n    }\n  }\n\n  &.layout-auto {\n    table-layout: auto;\n  }\n\n  &.layout-fixed {\n    table-layout: fixed;\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n  position: relative;\n  padding-block: var(--tabs--padding-y);\n  padding-inline: var(--tabs--padding-x);\n  color: var(--tabs--color--default);\n  cursor: default;\n  white-space: nowrap;\n  transition-property: background-color;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1 1 0;\n  column-gap: var(--tabs--spacing);\n  border-radius: var(--tabs--corner-radius);\n\n  @include focus.focus;\n\n  & {\n    outline-offset: calc(var(--size-px--xs) * -1);\n  }\n\n  /* The active indicator is painted below the titles (it precedes them in the\n     tab list), so the selected title must not paint a background over it. */\n  &:not([data-selected]) {\n    &:hover {\n      background-color: var(--tabs--background-color--hover);\n      transition-duration: var(--transition--duration--default);\n    }\n\n    &[data-pressed] {\n      background-color: var(--tabs--background-color--pressed);\n      transition-duration: var(--transition--duration--default);\n    }\n  }\n\n  &[aria-disabled=\"true\"] {\n    color: var(--tabs--color--disabled);\n  }\n\n  .text {\n    display: flex;\n    align-items: center;\n    column-gap: var(--tabs--spacing);\n  }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n  font-weight: var(--tabs--font-weight--selected);\n}\n\n.menuItem {\n  // The tab's children are the consumer's; a `Text` child renders this span.\n  // stylelint-disable-next-line selector-max-type -- consumer children\n  > span {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    column-gap: var(--tabs--spacing);\n    flex-grow: 1;\n  }\n}\n"],"mappings":""}