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

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

@@ -3,8 +3,8 @@
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { Wrap } from "../Wrap/Wrap.mjs";
-import { Text } from "../Text/Text.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
+import { Text } from "../Text/Text.mjs";
 import { Avatar } from "./components/Avatar/Avatar.mjs";
 import FileCard_module_default from "./FileCard.module.mjs";
 import { FileSizeText } from "./components/FileSizeText/FileSizeText.mjs";

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

@@ -5,7 +5,7 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Label_module_default from "./Label.module.mjs";
-import __locale_default from "../../../../../_virtual/_7.locale.mjs";
+import __locale_default from "../../../../../_virtual/_8.locale.mjs";
 import clsx from "clsx";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -5,8 +5,8 @@ import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import { IconClose } from "../Icon/components/icons/IconClose.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import { useOverlayController } from "../../lib/controller/overlay/useOverlayController.mjs";
-import DivView from "../../views/DivView.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
+import DivView from "../../views/DivView.mjs";
 import __locale_default from "../../../../../_virtual/_20.locale.mjs";
 import { Overlay } from "../Overlay/Overlay.mjs";
 import LightBox_module_default from "./LightBox.module.mjs";

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

@@ -4,7 +4,6 @@ import { PropsContextProvider } from "../../lib/propsContext/components/PropsCon
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
 import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
 import { isAlphaColor } from "../../lib/types/props.mjs";
-import { Text } from "../Text/Text.mjs";
 import { UiComponentTunnelExit } from "../UiComponentTunnel/UiComponentTunnelExit.mjs";
 import Link_module_default from "./Link.module.mjs";
 import { linkContext } from "./context.mjs";
@@ -51,7 +50,7 @@ var Link = flowComponent("Link", (props) => {
 			size: props.size,
 			color: props.color === "default" ? void 0 : props.color,
 			isDisabled: props.isDisabled,
-			children: dynamic((buttonProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Text, { children: buttonProps.children }), /* @__PURE__ */ jsx(LinkIcon, {
+			children: dynamic((buttonProps) => /* @__PURE__ */ jsxs(Fragment$1, { children: [buttonProps.children, /* @__PURE__ */ jsx(LinkIcon, {
 				download,
 				target,
 				unstyled

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

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { Text } from \"@/components/Text\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /** The name of the slot the link is placed in. */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          <Text>{buttonProps.children}</Text>\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <LinkIcon\n          withZeroWidthJoiner\n          unstyled={unstyled}\n          target={target}\n          download={download}\n        >\n          <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n        </LinkIcon>\n      </PropsContextProvider>\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,MAAD,EAAA,UAAO,YAAY,SAAe,CAAA,GAClC,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}
+{"version":3,"file":"Link.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.tsx"],"sourcesContent":["import type {\n  ComponentProps,\n  ComponentType,\n  CSSProperties,\n  MouseEvent,\n  PropsWithChildren,\n} from \"react\";\nimport { useContext } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport { dynamic, type PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport styles from \"./Link.module.scss\";\nimport clsx from \"clsx\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n  type AlphaColor,\n  isAlphaColor,\n  type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { linkContext } from \"@/components/Link/context\";\nimport { LinkIcon } from \"@/components/Link/components/LinkIcon\";\nimport { handleLinkClick, useRouter } from \"@react-aria/utils\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\n\nexport interface LinkProps\n  extends\n    PropsWithChildren<Omit<Aria.LinkProps, \"children\" | \"slot\" | \"className\">>,\n    FlowComponentProps<HTMLAnchorElement>,\n    PropsWithClassName {\n  /** Whether the link should be styled for being displayed inside a text. */\n  inline?: boolean;\n  /** An alternative link component. */\n  linkComponent?: ComponentType<Omit<ComponentProps<\"a\">, \"ref\">>;\n  /** The color of the link. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Marks the link as the currently active one, e.g. in a navigation. */\n  \"aria-current\"?: string;\n  /** The name of the slot the link is placed in. */\n  slot?: string;\n  /** The whiteSpace css value of the element. */\n  whiteSpace?: CSSProperties[\"whiteSpace\"];\n  /** The size of the element. @default \"m\" */\n  size?: \"s\" | \"m\";\n  /** @internal */\n  unstyled?: boolean;\n}\n\n/** @flr-generate all */\nexport const Link = flowComponent(\"Link\", (props) => {\n  const {\n    children,\n    className,\n    inline,\n    linkComponent: linkComponentFromProps,\n    color = \"default\",\n    unstyled = false,\n    \"aria-current\": ariaCurrent,\n    ref,\n    slot: ignoredSlotProp,\n    style,\n    whiteSpace,\n    size = \"m\",\n    onClickCapture: onClickCaptureFromProps,\n    target,\n    download,\n    ...rest\n  } = props;\n\n  const { linkComponent: linkComponentFromContext } = useContext(linkContext);\n  const Link = linkComponentFromProps\n    ? (linkComponentFromProps as typeof Aria.Link)\n    : props.href && linkComponentFromContext\n      ? (linkComponentFromContext as typeof Aria.Link)\n      : Aria.Link;\n\n  const router = useRouter();\n\n  /**\n   * An interactive child (e.g. a Button) stops click propagation via React\n   * Aria's `usePress`, so the anchor's own `onClick` never runs and navigation\n   * falls back to a full page load. Handling it in the capture phase (top-down,\n   * before the child) keeps navigation client-side. Only needed for React\n   * Aria's `<a>`; custom link components handle navigation themselves.\n   */\n  const handleClickCapture =\n    Link === Aria.Link && props.href\n      ? (event: MouseEvent<HTMLAnchorElement>) => {\n          onClickCaptureFromProps?.(event);\n          if (event.target !== event.currentTarget) {\n            handleLinkClick(event, router, props.href, props.routerOptions);\n          }\n        }\n      : onClickCaptureFromProps;\n\n  const rootClassName = unstyled\n    ? className\n    : clsx(\n        styles.link,\n        inline && styles.inline,\n        isAlphaColor(color) && styles[color],\n        size === \"s\" && styles[\"size-s\"],\n        className,\n      );\n\n  const propsContext: PropsContext = {\n    Icon: {\n      tunnel: {\n        component: \"Link\",\n        id: \"icon\",\n      },\n      className: styles.icon,\n      size: \"s\",\n    },\n    AlertText: {\n      className: styles.alertText,\n    },\n    AccentBox: { className: styles.accentBox },\n    LayoutCard: { className: styles.layoutCard },\n    Button: {\n      elementType: \"span\",\n      className: styles.button,\n      size: props.size,\n      color: props.color === \"default\" ? undefined : props.color,\n      isDisabled: props.isDisabled,\n      children: dynamic((buttonProps) => (\n        <>\n          {buttonProps.children}\n          <LinkIcon download={download} target={target} unstyled={unstyled} />\n        </>\n      )),\n    },\n  };\n\n  const unsupportedTypingsLinkProps = ariaCurrent\n    ? ({\n        \"aria-current\": true,\n      } as Record<string, unknown>)\n    : {};\n\n  return (\n    <Link\n      {...unsupportedTypingsLinkProps}\n      {...rest}\n      target={target}\n      download={download}\n      onClickCapture={handleClickCapture}\n      className={rootClassName}\n      ref={ref}\n      style={{ ...style, whiteSpace }}\n    >\n      <PropsContextProvider props={propsContext}>\n        {children}\n        <LinkIcon\n          withZeroWidthJoiner\n          unstyled={unstyled}\n          target={target}\n          download={download}\n        >\n          <UiComponentTunnelExit id={\"icon\"} component={\"Link\"} />\n        </LinkIcon>\n      </PropsContextProvider>\n    </Link>\n  );\n});\n\nexport default Link;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,IAAa,OAAO,cAAc,SAAS,UAAU;CACnD,MAAM,EACJ,UACA,WACA,QACA,eAAe,wBACf,QAAQ,WACR,WAAW,OACX,gBAAgB,aAChB,KACA,MAAM,iBACN,OACA,YACA,OAAO,KACP,gBAAgB,yBAChB,QACA,UACA,GAAG,SACD;CAEJ,MAAM,EAAE,eAAe,6BAA6B,WAAW,WAAW;CAC1E,MAAM,OAAO,yBACR,yBACD,MAAM,QAAQ,2BACX,2BACD,KAAK;CAEX,MAAM,SAAS,UAAU;;;;;;;;CASzB,MAAM,qBACJ,SAAS,KAAK,QAAQ,MAAM,QACvB,UAAyC;EACxC,0BAA0B,KAAK;EAC/B,IAAI,MAAM,WAAW,MAAM,eACzB,gBAAgB,OAAO,QAAQ,MAAM,MAAM,MAAM,aAAa;CAElE,IACA;CAEN,MAAM,gBAAgB,WAClB,YACA,KACE,oBAAO,MACP,UAAU,oBAAO,QACjB,aAAa,KAAK,KAAK,oBAAO,QAC9B,SAAS,OAAO,oBAAO,WACvB,SACF;CAEJ,MAAM,eAA6B;EACjC,MAAM;GACJ,QAAQ;IACN,WAAW;IACX,IAAI;GACN;GACA,WAAW,oBAAO;GAClB,MAAM;EACR;EACA,WAAW,EACT,WAAW,oBAAO,UACpB;EACA,WAAW,EAAE,WAAW,oBAAO,UAAU;EACzC,YAAY,EAAE,WAAW,oBAAO,WAAW;EAC3C,QAAQ;GACN,aAAa;GACb,WAAW,oBAAO;GAClB,MAAM,MAAM;GACZ,OAAO,MAAM,UAAU,YAAY,KAAA,IAAY,MAAM;GACrD,YAAY,MAAM;GAClB,UAAU,SAAS,gBACjB,qBAAA,YAAA,EAAA,UAAA,CACG,YAAY,UACb,oBAAC,UAAD;IAAoB;IAAkB;IAAkB;GAAW,CAAA,CACnE,EAAA,CAAA,CACH;EACH;CACF;CAQA,OACE,oBAAC,MAAD;EACE,GARgC,cAC/B,EACC,gBAAgB,KAClB,IACA,CAAC;EAKD,GAAI;EACI;EACE;EACV,gBAAgB;EAChB,WAAW;EACN;EACL,OAAO;GAAE,GAAG;GAAO;EAAW;EAE9B,UAAA,qBAAC,sBAAD;GAAsB,OAAO;GAA7B,UAAA,CACG,UACD,oBAAC,UAAD;IACE,qBAAA;IACU;IACF;IACE;IAEV,UAAA,oBAAC,uBAAD;KAAuB,IAAI;KAAQ,WAAW;IAAS,CAAA;GAC/C,CAAA,CACU;;CAClB,CAAA;AAEV,CAAC"}

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

@@ -4,8 +4,8 @@
 var link = "flow--link";
 var inline = "flow--link--inline";
 var icon = "flow--link--icon";
-var button = "flow--link--button";
 var linkIcon = "flow--link--link-icon";
+var button = "flow--link--button";
 var light = "flow--link--light";
 var dark = "flow--link--dark";
 var alertText = "flow--link--alert-text";
@@ -15,9 +15,9 @@ var Link_module_default = {
 	link,
 	inline,
 	icon,
+	linkIcon,
 	"size-s": "flow--link--size-s",
 	button,
-	linkIcon,
 	light,
 	dark,
 	"dark-static": "flow--link--dark-static",

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

@@ -1 +1 @@
-{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n  display: inline-block;\n  font-weight: var(--link--font-weight);\n  transition-property: color;\n  transition-duration: var(--transition--duration--default);\n  color: var(--link--color--default);\n  width: fit-content;\n\n  &:hover {\n    color: var(--link--color--hover);\n  }\n\n  &[data-pressed] {\n    color: var(--link--color--pressed);\n  }\n\n  @include focus.focus;\n\n  &:not([aria-disabled]) {\n    cursor: pointer;\n  }\n\n  &.inline {\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-decoration: underline;\n  }\n\n  /* Elements */\n\n  .icon {\n    margin-inline-start: var(--link--spacing);\n    vertical-align: text-bottom;\n    height: var(--link--icon-height);\n  }\n\n  &[aria-disabled] {\n    color: var(--link--color--disabled);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    font-size: var(--font-size-text--s);\n\n    .icon {\n      height: var(--link--icon-height-s);\n    }\n  }\n\n  &:has(.button) {\n    > .linkIcon {\n      display: none;\n    }\n  }\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--link--color-#{$color}--default);\n\n      &:hover {\n        color: var(--link--color-#{$color}--hover);\n      }\n\n      &[data-pressed] {\n        color: var(--link--color-#{$color}--pressed);\n      }\n\n      &[aria-disabled] {\n        color: var(--link--color-#{$color}--disabled);\n      }\n    }\n  }\n\n  @include color(light);\n  @include color(dark);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* AlertText Colors */\n  @mixin status($status) {\n    &:has(.alertText[class*=\"#{$status}\"]) {\n      color: var(--alert-text--#{$status}-color);\n    }\n  }\n\n  @include status(\"danger\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"info\");\n  @include status(\"unavailable\");\n\n  &:has(> .accentBox),\n  &:has(> .layoutCard) {\n    color: unset;\n    font-weight: unset;\n    display: block;\n    min-width: 0;\n    width: auto;\n\n    .linkIcon {\n      display: none;\n    }\n  }\n\n  &:has(> .accentBox) {\n    border-radius: var(--accent-box--corner-radius);\n  }\n\n  &:has(> .layoutCard) {\n    border-radius: var(--layout-card--corner-radius);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Link.module.mjs","names":[],"sources":["../../../../../../../src/components/Link/Link.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.link {\n  display: inline-block;\n  font-weight: var(--link--font-weight);\n  transition-property: color;\n  transition-duration: var(--transition--duration--default);\n  color: var(--link--color--default);\n  width: fit-content;\n\n  &:hover {\n    color: var(--link--color--hover);\n  }\n\n  &[data-pressed] {\n    color: var(--link--color--pressed);\n  }\n\n  @include focus.focus;\n\n  &:not([aria-disabled]) {\n    cursor: pointer;\n  }\n\n  &.inline {\n    font-weight: normal;\n    font-size: var(--font-size-text--m);\n    text-decoration: underline;\n  }\n\n  /* Elements */\n\n  .icon {\n    margin-inline-start: var(--link--spacing);\n    vertical-align: text-bottom;\n    height: var(--link--icon-height);\n  }\n\n  .linkIcon {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  &[aria-disabled] {\n    color: var(--link--color--disabled);\n  }\n\n  /* Size s */\n\n  &.size-s {\n    font-size: var(--font-size-text--s);\n\n    .icon {\n      height: var(--link--icon-height-s);\n    }\n  }\n\n  &:has(.button) {\n    > .linkIcon {\n      display: none;\n    }\n  }\n\n  /* Alpha Colors */\n  @mixin color($color) {\n    &:where(.#{$color}) {\n      color: var(--link--color-#{$color}--default);\n\n      &:hover {\n        color: var(--link--color-#{$color}--hover);\n      }\n\n      &[data-pressed] {\n        color: var(--link--color-#{$color}--pressed);\n      }\n\n      &[aria-disabled] {\n        color: var(--link--color-#{$color}--disabled);\n      }\n    }\n  }\n\n  @include color(light);\n  @include color(dark);\n  @include color(dark-static);\n  @include color(light-static);\n\n  /* AlertText Colors */\n  @mixin status($status) {\n    &:has(.alertText[class*=\"#{$status}\"]) {\n      color: var(--alert-text--#{$status}-color);\n    }\n  }\n\n  @include status(\"danger\");\n  @include status(\"success\");\n  @include status(\"warning\");\n  @include status(\"info\");\n  @include status(\"unavailable\");\n\n  &:has(> .accentBox),\n  &:has(> .layoutCard) {\n    color: unset;\n    font-weight: unset;\n    display: block;\n    min-width: 0;\n    width: auto;\n\n    .linkIcon {\n      display: none;\n    }\n  }\n\n  &:has(> .accentBox) {\n    border-radius: var(--accent-box--corner-radius);\n  }\n\n  &:has(> .layoutCard) {\n    border-radius: var(--layout-card--corner-radius);\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.mjs

@@ -1,8 +1,8 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/List/components/Footer/components/ShowNextBatchButton/ShowNextBatchButton.tsx

package/dist/js/packages/components/src/components/List/components/Header/components/ActiveFilters/ActiveFilters.mjs

@@ -4,9 +4,9 @@ import { IconClose } from "../../../../../Icon/components/icons/IconClose.mjs";
 import { IconSave } from "../../../../../Icon/components/icons/IconSave.mjs";
 import { IconUndo } from "../../../../../Icon/components/icons/IconUndo.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import DivView from "../../../../../../views/DivView.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";
 import ActiveFilters_module_default from "./ActiveFilters.module.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/AllFiltersModal.mjs

@@ -3,9 +3,9 @@
 import { IconFilter } from "../../../../../Icon/components/icons/IconFilter.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { SkeletonText } from "../../../../../SkeletonText/SkeletonText.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import HeadingView from "../../../../../../views/HeadingView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import { useList } from "../../../../hooks/useList.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionDateRange.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { Flex } from "../../../../../Flex/Flex.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import RangeCalendarView from "../../../../../../views/RangeCalendarView.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/js/packages/components/src/components/List/components/Header/components/AllFiltersModal/FilterAccordionRadioGroup.mjs

@@ -1,9 +1,9 @@
 "use client"
 /* */
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { Flex } from "../../../../../Flex/Flex.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import RadioGroupView from "../../../../../../views/RadioGroupView.mjs";
 import RadioView from "../../../../../../views/RadioView.mjs";
 import "react";

package/dist/js/packages/components/src/components/List/components/Header/components/FilterContextMenu/DateRangeFilterPopover.mjs

@@ -4,9 +4,9 @@ import { IconFilter } from "../../../../../Icon/components/icons/IconFilter.mjs"
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { useOverlayController } from "../../../../../../lib/controller/overlay/useOverlayController.mjs";
 import { Popover } from "../../../../../Popover/Popover.mjs";
+import ButtonView from "../../../../../../views/ButtonView.mjs";
 import { PopoverTrigger } from "../../../../../Popover/components/PopoverTrigger/PopoverTrigger.mjs";
 import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
-import ButtonView from "../../../../../../views/ButtonView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";
 import Header_module_default from "../../Header.module.mjs";
 import FilterContextMenus_module_default from "./FilterContextMenus.module.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/SortingContextMenu/SortingContextMenu.mjs

@@ -4,8 +4,8 @@ import { IconAscending } from "../../../../../Icon/components/icons/IconAscendin
 import { IconDescending } from "../../../../../Icon/components/icons/IconDescending.mjs";
 import { IconSorting } from "../../../../../Icon/components/icons/IconSorting.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../../../../../views/ContextMenuView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";

package/dist/js/packages/components/src/components/List/components/Header/components/ViewModeContextMenu/ViewModeContextMenu.mjs

@@ -2,8 +2,8 @@
 /* */
 import { IconView } from "../../../../../Icon/components/icons/IconView.mjs";
 import { useLocalizedStringFormatter } from "../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../_virtual/_16.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../views/ContextMenuTriggerView.mjs";
 import ContextMenuView from "../../../../../../views/ContextMenuView.mjs";
 import TextView from "../../../../../../views/TextView.mjs";

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs

@@ -36,7 +36,7 @@ var ItemImpl = (props) => {
 		})
 	});
 };
-var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile);
+var Item = memo(ItemImpl, (prev, next) => prev.id === next.id && prev.data === next.data && prev.triggerRef === next.triggerRef && prev.isTile === next.isTile && prev.list.onAction === next.list.onAction && prev.list.accordion === next.list.accordion && !!prev.list.itemView?.rendersSameAs(next.list.itemView));
 Item.displayName = "Item";
 var ItemContainer = (props) => {
 	const list = useList();

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n  triggerRef?: Ref<HTMLDivElement>;\n  list: ListModel<never>;\n  isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n  const { id, data, triggerRef, list, isTile } = props;\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props, list);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n  const gridItemPropsWithRef = triggerRef\n    ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n    : gridItemProps;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      target={itemView.target}\n      hasAction={hasAction}\n      isTile={isTile}\n      {...gridItemPropsWithRef}\n    >\n      <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\nexport const Item = memo(\n  ItemImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    prev.isTile === next.isTile,\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n  id?: Key;\n  data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode.isTiles}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AAEA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,MACzB;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAW,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}
+{"version":3,"file":"Item.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.tsx"],"sourcesContent":["import { useGridItemProps } from \"@/components/List/components/Items/components/Item/hooks/useGridItemProps\";\nimport { useList } from \"@/components/List/hooks/useList\";\nimport type ListModel from \"@/components/List/model/List\";\nimport ItemsGridListItemView from \"@/views/ItemsGridListItemView\";\nimport { mergeRefs } from \"@react-aria/utils\";\nimport type { FC, PropsWithChildren, Ref } from \"react\";\nimport { memo, Suspense } from \"react\";\nimport type { Key } from \"react-aria-components\";\nimport styles from \"./Item.module.scss\";\nimport { ItemLoadingView } from \"./components/ItemLoadingView/ItemLoadingView\";\n\ninterface Props extends PropsWithChildren {\n  id: Key;\n  data: never;\n  triggerRef?: Ref<HTMLDivElement>;\n  list: ListModel<never>;\n  isTile: boolean;\n}\n\nconst ItemImpl = (props: Props) => {\n  const { id, data, triggerRef, list, isTile } = props;\n\n  const itemView = list.itemView;\n\n  const { gridItemProps, children } = useGridItemProps(props, list);\n\n  if (!itemView) {\n    return null;\n  }\n\n  const textValue = itemView.textValue ? itemView.textValue(data) : undefined;\n  const href = itemView.href ? itemView.href(data) : undefined;\n  const hasAction = !!gridItemProps.onAction || !!href;\n\n  const existingRef = \"ref\" in gridItemProps ? gridItemProps.ref : undefined;\n  const gridItemPropsWithRef = triggerRef\n    ? { ...gridItemProps, ref: mergeRefs(existingRef, triggerRef) }\n    : gridItemProps;\n\n  return (\n    <ItemsGridListItemView\n      id={id}\n      textValue={textValue}\n      href={href}\n      target={itemView.target}\n      hasAction={hasAction}\n      isTile={isTile}\n      {...gridItemPropsWithRef}\n    >\n      <Suspense fallback={<ItemLoadingView />}>{children}</Suspense>\n    </ItemsGridListItemView>\n  );\n};\n\n// The list model is rebuilt on every render, so it cannot be compared by\n// identity — but everything an item renders from it can. Those closures come\n// from the consumer's own JSX and only change when the consumer re-renders,\n// so loading more still skips the re-render while parent state no longer\n// leaves an item frozen on the values it first saw.\nexport const Item = memo(\n  ItemImpl,\n  (prev, next) =>\n    prev.id === next.id &&\n    prev.data === next.data &&\n    prev.triggerRef === next.triggerRef &&\n    prev.isTile === next.isTile &&\n    prev.list.onAction === next.list.onAction &&\n    prev.list.accordion === next.list.accordion &&\n    !!prev.list.itemView?.rendersSameAs(next.list.itemView),\n);\nItem.displayName = \"Item\";\n\ninterface ItemContainerProps extends PropsWithChildren {\n  id?: Key;\n  data?: never;\n}\n\nexport const ItemContainer: FC<ItemContainerProps> = (props) => {\n  const list = useList();\n  return (\n    <ItemsGridListItemView\n      textValue=\"-\"\n      className={styles.item}\n      isTile={list.viewMode.isTiles}\n    >\n      {props.children}\n    </ItemsGridListItemView>\n  );\n};\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,YAAY,UAAiB;CACjC,MAAM,EAAE,IAAI,MAAM,YAAY,MAAM,WAAW;CAE/C,MAAM,WAAW,KAAK;CAEtB,MAAM,EAAE,eAAe,aAAa,iBAAiB,OAAO,IAAI;CAEhE,IAAI,CAAC,UACH,OAAO;CAGT,MAAM,YAAY,SAAS,YAAY,SAAS,UAAU,IAAI,IAAI,KAAA;CAClE,MAAM,OAAO,SAAS,OAAO,SAAS,KAAK,IAAI,IAAI,KAAA;CACnD,MAAM,YAAY,CAAC,CAAC,cAAc,YAAY,CAAC,CAAC;CAEhD,MAAM,cAAc,SAAS,gBAAgB,cAAc,MAAM,KAAA;CACjE,MAAM,uBAAuB,aACzB;EAAE,GAAG;EAAe,KAAK,UAAU,aAAa,UAAU;CAAE,IAC5D;CAEJ,OACE,oBAAC,uBAAD;EACM;EACO;EACL;EACN,QAAQ,SAAS;EACN;EACH;EACR,GAAI;EAEJ,UAAA,oBAAC,UAAD;GAAU,UAAU,oBAAC,iBAAD,CAAkB,CAAA;GAAI;EAAmB,CAAA;CACxC,CAAA;AAE3B;AAOA,IAAa,OAAO,KAClB,WACC,MAAM,SACL,KAAK,OAAO,KAAK,MACjB,KAAK,SAAS,KAAK,QACnB,KAAK,eAAe,KAAK,cACzB,KAAK,WAAW,KAAK,UACrB,KAAK,KAAK,aAAa,KAAK,KAAK,YACjC,KAAK,KAAK,cAAc,KAAK,KAAK,aAClC,CAAC,CAAC,KAAK,KAAK,UAAU,cAAc,KAAK,KAAK,QAAQ,CAC1D;AACA,KAAK,cAAc;AAOnB,IAAa,iBAAyC,UAAU;CAC9D,MAAM,OAAO,QAAQ;CACrB,OACE,oBAAC,uBAAD;EACE,WAAU;EACV,WAAW,oBAAO;EAClB,QAAQ,KAAK,SAAS;EAErB,UAAA,MAAM;CACc,CAAA;AAE3B"}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs

@@ -4,14 +4,16 @@
 var item = "flow--list--items--item";
 var isSelected = "flow--list--items--item--is-selected";
 var hasAction = "flow--list--items--item--has-action";
+var link = "flow--list--items--item--link";
 var tile = "flow--list--items--item--tile";
 var Item_module_default = {
 	item,
 	isSelected,
 	hasAction,
+	link,
 	tile
 };
 //#endregion
-export { Item_module_default as default, hasAction, isSelected, item, tile };
+export { Item_module_default as default, hasAction, isSelected, item, link, tile };
 
 //# sourceMappingURL=Item.module.mjs.map

package/dist/js/packages/components/src/components/List/components/Items/components/Item/Item.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  &:where(.hasAction):not(\n      &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n    ) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Item.module.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/components/Item/Item.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.item {\n  position: relative;\n\n  /* The link overlay and the interactive content lifted above it (see .link\n     below) stack against each other only — never against anything outside the\n     item. */\n  isolation: isolate;\n  cursor: default;\n  background-color: var(--list-item--background-color--default);\n  transition-property: background-color;\n  transition-duration: var(--transition--duration--default);\n\n  @include focus.focus;\n\n  &.item {\n    outline-offset: calc(var(--size-px--xs) * -1);\n    box-shadow: none;\n  }\n\n  &:where(.isSelected) {\n    background-color: var(--list-item--background-color--pressed);\n  }\n\n  &:not(:last-child) {\n    border-bottom: var(--list-item--border-width) var(--list-item--border-style)\n      var(--list-item--border-color);\n  }\n\n  &[data-href] {\n    cursor: pointer;\n  }\n\n  &:where(.hasAction):not(\n      &:has(:global(.flow--list--items--item--view--bottom-content):hover)\n    ) {\n    &:where(:not(.isSelected)) {\n      &:hover {\n        background-color: var(--list-item--background-color--hover);\n      }\n    }\n\n    &[data-pressed] {\n      background-color: var(--list-item--background-color--pressed);\n    }\n  }\n\n  :global(.flow--avatar) {\n    transition-property: filter;\n    transition-duration: var(--transition--duration--default);\n  }\n\n  /* Elements */\n\n  /*\n   * Covers the whole item so a right-click anywhere on it hits a real link.\n   * Interactive content is lifted back above the overlay, so buttons, context\n   * menus and checkboxes keep receiving their own clicks.\n   */\n  .link {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  &:has(.link) {\n    :where(\n      a,\n      button,\n      input,\n      label,\n      select,\n      summary,\n      textarea,\n      [role=\"button\"],\n      [role=\"checkbox\"],\n      [role=\"link\"],\n      [role=\"switch\"],\n      [tabindex]\n    ):not(.link) {\n      position: relative;\n      z-index: 2;\n    }\n\n    /*\n     * The bottom slot carries arbitrary consumer content (and the accordion's\n     * expanded content), so it stays fully clickable and selectable.\n     */\n    :global(.flow--list--list-item-view--bottom-content) {\n      position: relative;\n      z-index: 2;\n    }\n  }\n\n  &.tile {\n    border: none;\n    border-radius: var(--list-item--corner-radius);\n\n    &.item {\n      outline-offset: var(--size-px--xxs);\n    }\n\n    &:where(.hasAction) {\n      &:not(.isSelected) {\n        &:hover {\n          :global(.flow--avatar) {\n            filter: brightness(var(--image-button--brightness--hover));\n          }\n        }\n      }\n\n      &[data-pressed] {\n        :global(.flow--avatar) {\n          filter: brightness(var(--image-button--brightness--pressed));\n        }\n      }\n    }\n  }\n}\n"],"mappings":""}

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/AccordionButton.mjs

@@ -3,8 +3,8 @@
 import { IconChevronDown } from "../../../../../../Icon/components/icons/IconChevronDown.mjs";
 import { IconChevronUp } from "../../../../../../Icon/components/icons/IconChevronUp.mjs";
 import { useLocalizedStringFormatter } from "../../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../../_virtual/_16.locale.mjs";
 import ListItemView_module_default from "../../../../ListItemView/ListItemView.module.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/List/components/Items/components/Item/components/AccordionButton.tsx

package/dist/js/packages/components/src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.mjs

@@ -2,8 +2,8 @@
 /* */
 import { IconContextMenu } from "../../../../../../../Icon/components/icons/IconContextMenu.mjs";
 import { useLocalizedStringFormatter } from "../../../../../../../TranslationProvider/useLocalizedStringFormatter.mjs";
-import __locale_default from "../../../../../../../../../../../_virtual/_16.locale.mjs";
 import ButtonView from "../../../../../../../../views/ButtonView.mjs";
+import __locale_default from "../../../../../../../../../../../_virtual/_16.locale.mjs";
 import ContextMenuTriggerView from "../../../../../../../../views/ContextMenuTriggerView.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/List/components/Items/components/Item/components/OptionsButton/OptionsButton.tsx

package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs

@@ -2,15 +2,25 @@
 /* */
 import Item_module_default from "../../components/Item/Item.module.mjs";
 import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLinkProps } from "@react-aria/utils";
 import * as Aria from "react-aria-components";
 //#region src/components/List/components/Items/views/GridListItem/GridListItem.tsx
 /** @flr-generate all */
 var GridListItem = (props) => {
-	const { hasAction, isTile, ...restProps } = props;
+	const { hasAction, isTile, children, ...restProps } = props;
+	const linkProps = useLinkProps(props);
+	const linkOverlay = linkProps.href ? /* @__PURE__ */ jsx("a", {
+		...linkProps,
+		"aria-hidden": true,
+		className: Item_module_default.link,
+		draggable: false,
+		tabIndex: -1
+	}) : null;
 	return /* @__PURE__ */ jsx(Aria.GridListItem, {
 		...restProps,
-		className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected)
+		className: (renderProps) => clsx(Item_module_default.item, hasAction && Item_module_default.hasAction, isTile && Item_module_default.tile, renderProps.isSelected && Item_module_default.isSelected),
+		children: (renderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [typeof children === "function" ? children(renderProps) : children, linkOverlay] })
 	});
 };
 //#endregion

package/dist/js/packages/components/src/components/List/components/Items/views/GridListItem/GridListItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n  hasAction?: boolean;\n  isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n  const { hasAction, isTile, ...restProps } = props;\n  return (\n    <Aria.GridListItem\n      {...restProps}\n      className={(renderProps) =>\n        clsx(\n          styles.item,\n          hasAction && styles.hasAction,\n          isTile && styles.tile,\n          renderProps.isSelected && styles.isSelected,\n        )\n      }\n    />\n  );\n};\n\nexport default GridListItem;\n"],"mappings":";;;;;;;;AAWA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW,QAAQ,GAAG,cAAc;CAC5C,OACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,gBACV,KACE,oBAAO,MACP,aAAa,oBAAO,WACpB,UAAU,oBAAO,MACjB,YAAY,cAAc,oBAAO,UACnC;CAEH,CAAA;AAEL"}
+{"version":3,"file":"GridListItem.mjs","names":[],"sources":["../../../../../../../../../../../src/components/List/components/Items/views/GridListItem/GridListItem.tsx"],"sourcesContent":["import * as Aria from \"react-aria-components\";\nimport type { FC } from \"react\";\nimport styles from \"@/components/List/components/Items/components/Item/Item.module.scss\";\nimport clsx from \"clsx\";\nimport { useLinkProps } from \"@react-aria/utils\";\n\nexport type GridListItemProps = Aria.GridListItemProps<never> & {\n  hasAction?: boolean;\n  isTile?: boolean;\n};\n\n/** @flr-generate all */\nexport const GridListItem: FC<GridListItemProps> = (props) => {\n  const { hasAction, isTile, children, ...restProps } = props;\n\n  // React Aria turns `href` into data attributes and navigates on press, so\n  // the row itself is always a `div`. Overlay a real anchor to give the browser\n  // back its own link affordances: context menu, middle-click, modifier-click.\n  const linkProps = useLinkProps(props);\n\n  const linkOverlay = linkProps.href ? (\n    // The row keeps owning activation and the accessible semantics. The anchor\n    // must stay untabbable — React Aria treats a tabbable descendant as\n    // interactive content and would stop the row's own press — and out of the\n    // accessibility tree, so screen readers announce the row unchanged.\n    <a\n      {...linkProps}\n      aria-hidden\n      className={styles.link}\n      draggable={false}\n      tabIndex={-1}\n    />\n  ) : null;\n\n  return (\n    <Aria.GridListItem\n      {...restProps}\n      className={(renderProps) =>\n        clsx(\n          styles.item,\n          hasAction && styles.hasAction,\n          isTile && styles.tile,\n          renderProps.isSelected && styles.isSelected,\n        )\n      }\n    >\n      {(renderProps) => (\n        <>\n          {typeof children === \"function\" ? children(renderProps) : children}\n          {linkOverlay}\n        </>\n      )}\n    </Aria.GridListItem>\n  );\n};\n\nexport default GridListItem;\n"],"mappings":";;;;;;;;;AAYA,IAAa,gBAAuC,UAAU;CAC5D,MAAM,EAAE,WAAW,QAAQ,UAAU,GAAG,cAAc;CAKtD,MAAM,YAAY,aAAa,KAAK;CAEpC,MAAM,cAAc,UAAU,OAK5B,oBAAC,KAAD;EACE,GAAI;EACJ,eAAA;EACA,WAAW,oBAAO;EAClB,WAAW;EACX,UAAU;CACX,CAAA,IACC;CAEJ,OACE,oBAAC,KAAK,cAAN;EACE,GAAI;EACJ,YAAY,gBACV,KACE,oBAAO,MACP,aAAa,oBAAO,WACpB,UAAU,oBAAO,MACjB,YAAY,cAAc,oBAAO,UACnC;EAGA,WAAA,gBACA,qBAAA,UAAA,EAAA,UAAA,CACG,OAAO,aAAa,aAAa,SAAS,WAAW,IAAI,UACzD,WACD,EAAA,CAAA;CAEa,CAAA;AAEvB"}

package/dist/js/packages/components/src/components/List/model/item/ItemView.mjs

@@ -27,6 +27,13 @@ var ItemView = class ItemView {
 		this.tileMaxWidth = tileMaxWidth;
 	}
 	static fallbackRenderItemFn = (item) => createElement("pre", void 0, JSON.stringify(item));
+	/**
+	* Whether `other` would render this item identically — i.e. all render
+	* functions taken from the consumer's `ListItem` element are still the same.
+	*/
+	rendersSameAs(other) {
+		return !!other && this.renderFn === other.renderFn && this.textValue === other.textValue && this.href === other.href && this.target === other.target && this.defaultExpanded === other.defaultExpanded;
+	}
 	render(data) {
 		return (this.renderFn ?? ItemView.fallbackRenderItemFn)(data, this.list);
 	}

package/dist/js/packages/components/src/components/List/model/item/ItemView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemView.ts"],"sourcesContent":["import type { HTMLAttributeAnchorTarget, ReactElement, ReactNode } from \"react\";\nimport { createElement } from \"react\";\nimport type { RenderItemFn } from \"@/components/List/model/item/types\";\nimport type List from \"@/components/List/model/List\";\n\nexport interface ItemViewShape<T> {\n  textValue?: (data: T) => string;\n  href?: (data: T) => string;\n  target?: HTMLAttributeAnchorTarget;\n  defaultExpanded?: (data: T) => boolean;\n  renderFn?: RenderItemFn<T>;\n  /** @deprecated Use loadingView instead */\n  fallback?: ReactElement;\n  loadingView?: ReactElement;\n  showList?: boolean;\n  showTiles?: boolean;\n  tileMaxWidth?: number;\n}\n\nexport class ItemView<T> {\n  public readonly list: List<T>;\n  public readonly textValue?: (data: T) => string;\n  public readonly href?: (data: T) => string;\n  public readonly target?: HTMLAttributeAnchorTarget;\n  public readonly defaultExpanded?: (data: T) => boolean;\n  public readonly loadingView?: ReactElement;\n  public readonly showTiles?: boolean;\n  public readonly showList?: boolean;\n  public readonly tileMaxWidth: number;\n  private readonly renderFn?: RenderItemFn<T>;\n\n  public constructor(list: List<T>, shape: ItemViewShape<T> = {}) {\n    const {\n      fallback,\n      loadingView = fallback,\n      textValue,\n      href,\n      target,\n      defaultExpanded,\n      renderFn,\n      showTiles,\n      showList = true,\n      tileMaxWidth = 230,\n    } = shape;\n    this.list = list;\n    this.textValue = textValue;\n    this.renderFn = renderFn;\n    this.href = href;\n    this.target = target;\n    this.defaultExpanded = defaultExpanded;\n    this.loadingView = loadingView;\n    this.showTiles = showTiles;\n    this.showList = showList;\n    this.tileMaxWidth = tileMaxWidth;\n  }\n\n  private static fallbackRenderItemFn: RenderItemFn<never> = (item) =>\n    createElement(\"pre\", undefined, JSON.stringify(item));\n\n  public render(data: T): ReactNode {\n    const renderFn = (this.renderFn ??\n      ItemView.fallbackRenderItemFn) as RenderItemFn<T>;\n    return renderFn(data as never, this.list);\n  }\n}\n"],"mappings":";;;;AAmBA,IAAa,WAAb,MAAa,SAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,QAA0B,CAAC,GAAG;EAC9D,MAAM,EACJ,UACA,cAAc,UACd,WACA,MACA,QACA,iBACA,UACA,WACA,WAAW,MACX,eAAe,QACb;EACJ,KAAK,OAAO;EACZ,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,kBAAkB;EACvB,KAAK,cAAc;EACnB,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,eAAe;CACtB;CAEA,OAAe,wBAA6C,SAC1D,cAAc,OAAO,KAAA,GAAW,KAAK,UAAU,IAAI,CAAC;CAEtD,OAAc,MAAoB;EAGhC,QAFkB,KAAK,YACrB,SAAS,qBAAA,CACK,MAAe,KAAK,IAAI;CAC1C;AACF"}
+{"version":3,"file":"ItemView.mjs","names":[],"sources":["../../../../../../../../../src/components/List/model/item/ItemView.ts"],"sourcesContent":["import type { HTMLAttributeAnchorTarget, ReactElement, ReactNode } from \"react\";\nimport { createElement } from \"react\";\nimport type { RenderItemFn } from \"@/components/List/model/item/types\";\nimport type List from \"@/components/List/model/List\";\n\nexport interface ItemViewShape<T> {\n  textValue?: (data: T) => string;\n  href?: (data: T) => string;\n  target?: HTMLAttributeAnchorTarget;\n  defaultExpanded?: (data: T) => boolean;\n  renderFn?: RenderItemFn<T>;\n  /** @deprecated Use loadingView instead */\n  fallback?: ReactElement;\n  loadingView?: ReactElement;\n  showList?: boolean;\n  showTiles?: boolean;\n  tileMaxWidth?: number;\n}\n\nexport class ItemView<T> {\n  public readonly list: List<T>;\n  public readonly textValue?: (data: T) => string;\n  public readonly href?: (data: T) => string;\n  public readonly target?: HTMLAttributeAnchorTarget;\n  public readonly defaultExpanded?: (data: T) => boolean;\n  public readonly loadingView?: ReactElement;\n  public readonly showTiles?: boolean;\n  public readonly showList?: boolean;\n  public readonly tileMaxWidth: number;\n  private readonly renderFn?: RenderItemFn<T>;\n\n  public constructor(list: List<T>, shape: ItemViewShape<T> = {}) {\n    const {\n      fallback,\n      loadingView = fallback,\n      textValue,\n      href,\n      target,\n      defaultExpanded,\n      renderFn,\n      showTiles,\n      showList = true,\n      tileMaxWidth = 230,\n    } = shape;\n    this.list = list;\n    this.textValue = textValue;\n    this.renderFn = renderFn;\n    this.href = href;\n    this.target = target;\n    this.defaultExpanded = defaultExpanded;\n    this.loadingView = loadingView;\n    this.showTiles = showTiles;\n    this.showList = showList;\n    this.tileMaxWidth = tileMaxWidth;\n  }\n\n  private static fallbackRenderItemFn: RenderItemFn<never> = (item) =>\n    createElement(\"pre\", undefined, JSON.stringify(item));\n\n  /**\n   * Whether `other` would render this item identically — i.e. all render\n   * functions taken from the consumer's `ListItem` element are still the same.\n   */\n  public rendersSameAs(other?: ItemView<T>): boolean {\n    return (\n      !!other &&\n      this.renderFn === other.renderFn &&\n      this.textValue === other.textValue &&\n      this.href === other.href &&\n      this.target === other.target &&\n      this.defaultExpanded === other.defaultExpanded\n    );\n  }\n\n  public render(data: T): ReactNode {\n    const renderFn = (this.renderFn ??\n      ItemView.fallbackRenderItemFn) as RenderItemFn<T>;\n    return renderFn(data as never, this.list);\n  }\n}\n"],"mappings":";;;;AAmBA,IAAa,WAAb,MAAa,SAAY;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA,YAAmB,MAAe,QAA0B,CAAC,GAAG;EAC9D,MAAM,EACJ,UACA,cAAc,UACd,WACA,MACA,QACA,iBACA,UACA,WACA,WAAW,MACX,eAAe,QACb;EACJ,KAAK,OAAO;EACZ,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,OAAO;EACZ,KAAK,SAAS;EACd,KAAK,kBAAkB;EACvB,KAAK,cAAc;EACnB,KAAK,YAAY;EACjB,KAAK,WAAW;EAChB,KAAK,eAAe;CACtB;CAEA,OAAe,wBAA6C,SAC1D,cAAc,OAAO,KAAA,GAAW,KAAK,UAAU,IAAI,CAAC;;;;;CAMtD,cAAqB,OAA8B;EACjD,OACE,CAAC,CAAC,SACF,KAAK,aAAa,MAAM,YACxB,KAAK,cAAc,MAAM,aACzB,KAAK,SAAS,MAAM,QACpB,KAAK,WAAW,MAAM,UACtB,KAAK,oBAAoB,MAAM;CAEnC;CAEA,OAAc,MAAoB;EAGhC,QAFkB,KAAK,YACrB,SAAS,qBAAA,CACK,MAAe,KAAK,IAAI;CAC1C;AACF"}

package/dist/js/packages/components/src/components/List/views/EmptyView/EmptyView.mjs

@@ -1,8 +1,8 @@
 "use client"
 /* */
 import { IconSearch } from "../../../Icon/components/icons/IconSearch.mjs";
-import { Text } from "../../../Text/Text.mjs";
 import { useLocalizedStringFormatter } from "../../../TranslationProvider/useLocalizedStringFormatter.mjs";
+import { Text } from "../../../Text/Text.mjs";
 import { Heading } from "../../../Heading/Heading.mjs";
 import __locale_default from "../../../../../../../_virtual/_16.locale.mjs";
 import { IllustratedMessage } from "../../../IllustratedMessage/IllustratedMessage.mjs";

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

@@ -20,7 +20,7 @@ import remarkGfm from "remark-gfm";
 * @flr-ignore-props components
 */
 var Markdown = (props) => {
-	const { children, color = "default", className, headingOffset = 0, components: customComponents, ref, remarkPlugins, urlTransform, ...rest } = props;
+	const { children, color = "default", className, headingOffset = 0, components: customComponents, ref, allowElement, allowedElements, disallowedElements, rehypePlugins, remarkPlugins, remarkRehypeOptions, skipHtml, unwrapDisallowed, urlTransform, ...rest } = props;
 	const defaultComponents = {
 		a: (props) => /* @__PURE__ */ jsx(Link, {
 			target: "_blank",
@@ -99,7 +99,14 @@ var Markdown = (props) => {
 		...rest,
 		ref,
 		children: /* @__PURE__ */ jsx(ReactMarkdown, {
+			allowElement,
+			allowedElements,
+			disallowedElements,
+			rehypePlugins,
 			remarkPlugins: remarkPlugins ?? [remarkGfm],
+			remarkRehypeOptions,
+			skipHtml,
+			unwrapDisallowed,
 			urlTransform,
 			components: mergedComponents,
 			children: textContent

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode, Ref } from \"react\";\nimport { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName, Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** Allows overriding markdown element renderers from outside. */\n  components?: Components;\n  /** @internal */\n  style?: CSSProperties;\n  /** A ref to the elements root. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    components: customComponents,\n    ref,\n    remarkPlugins,\n    urlTransform,\n    ...rest\n  } = props;\n\n  const defaultComponents: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={color} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={color}>\n        {props.children}\n      </Text>\n    ),\n    code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n    h1: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(1, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    hr: () => <Separator />,\n    pre: (props) => {\n      const preElementContent = Children.toArray(props.children)[0];\n\n      return (\n        <CodeBlock\n          copyable={false}\n          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? (preElementContent.props.className.replace(\n                  \"language-\",\n                  \"\",\n                ) as CodeEditorLanguage)\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          ).trim()}\n        />\n      );\n    },\n    ul: (props) => (\n      <Text color={color}>\n        <ul>{props.children as ReactNode}</ul>\n      </Text>\n    ),\n    ol: (props) => (\n      <Text color={color}>\n        <ol>{props.children as ReactNode}</ol>\n      </Text>\n    ),\n    blockquote: (props) => (\n      <Text color={color}>\n        <blockquote>{props.children}</blockquote>\n      </Text>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n  const mergedComponents: Components = {\n    ...defaultComponents,\n    ...customComponents,\n  };\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n      <ReactMarkdown\n        remarkPlugins={remarkPlugins ?? [remarkGfm]}\n        urlTransform={urlTransform}\n        components={mergedComponents}\n      >\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UACA,QAAQ,WACR,WACA,gBAAgB,GAChB,YAAY,kBACZ,KACA,eACA,cACA,GAAG,SACD;CAEJ,MAAM,oBAAgC;EACpC,IAAI,UACF,oBAAC,MAAD;GAAM,QAAO;GAAgB;GAAO,MAAM,MAAM;GAC7C,UAAA,MAAM;EACH,CAAA;EAER,IAAI,UACF,oBAAC,MAAD;GAAM,aAAY;GAAW;GAC1B,UAAA,MAAM;EACH,CAAA;EAER,OAAO,UAAU,oBAAC,YAAD;GAAmB;GAAQ,UAAA,MAAM;EAAqB,CAAA;EACvE,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,MAAM,UAAU;GACd,MAAM,oBAAoB,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC;GAE3D,OACE,oBAAC,WAAD;IACE,UAAU;IACV,UACE,eAAuC,iBAAiB,KACxD,kBAAkB,MAAM,YACnB,kBAAkB,MAAM,UAAU,QACjC,aACA,EACF,IACA,KAAA;IAEN,MAAM,OACJ,eAAqC,iBAAiB,IAClD,kBAAkB,MAAM,WACxB,iBACN,CAAC,CAAC,KAAK;GACR,CAAA;EAEL;EACA,KAAK,UACH,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACjC,CAAA;EAER,KAAK,UACH,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACjC,CAAA;EAER,aAAa,UACX,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,cAAD,EAAA,UAAa,MAAM,SAAqB,CAAA;EACpC,CAAA;CAEV;CAEA,MAAM,cAAc,0BAA0B,QAAQ;CACtD,MAAM,mBAA+B;EACnC,GAAG;EACH,GAAG;CACL;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,wBAAO,UAAU,SAAS;EAAG,GAAI;EAAW;EAC/D,UAAA,oBAAC,eAAD;GACE,eAAe,iBAAiB,CAAC,SAAS;GAC5B;GACd,YAAY;GAEX,UAAA;EACY,CAAA;CACZ,CAAA;AAET"}
+{"version":3,"file":"Markdown.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode, Ref } from \"react\";\nimport { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName, Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** Allows overriding markdown element renderers from outside. */\n  components?: Components;\n  /** @internal */\n  style?: CSSProperties;\n  /** A ref to the elements root. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    components: customComponents,\n    ref,\n    allowElement,\n    allowedElements,\n    disallowedElements,\n    rehypePlugins,\n    remarkPlugins,\n    remarkRehypeOptions,\n    skipHtml,\n    unwrapDisallowed,\n    urlTransform,\n    ...rest\n  } = props;\n\n  const defaultComponents: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={color} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={color}>\n        {props.children}\n      </Text>\n    ),\n    code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n    h1: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(1, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    hr: () => <Separator />,\n    pre: (props) => {\n      const preElementContent = Children.toArray(props.children)[0];\n\n      return (\n        <CodeBlock\n          copyable={false}\n          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? (preElementContent.props.className.replace(\n                  \"language-\",\n                  \"\",\n                ) as CodeEditorLanguage)\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          ).trim()}\n        />\n      );\n    },\n    ul: (props) => (\n      <Text color={color}>\n        <ul>{props.children as ReactNode}</ul>\n      </Text>\n    ),\n    ol: (props) => (\n      <Text color={color}>\n        <ol>{props.children as ReactNode}</ol>\n      </Text>\n    ),\n    blockquote: (props) => (\n      <Text color={color}>\n        <blockquote>{props.children}</blockquote>\n      </Text>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n  const mergedComponents: Components = {\n    ...defaultComponents,\n    ...customComponents,\n  };\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n      <ReactMarkdown\n        allowElement={allowElement}\n        allowedElements={allowedElements}\n        disallowedElements={disallowedElements}\n        rehypePlugins={rehypePlugins}\n        remarkPlugins={remarkPlugins ?? [remarkGfm]}\n        remarkRehypeOptions={remarkRehypeOptions}\n        skipHtml={skipHtml}\n        unwrapDisallowed={unwrapDisallowed}\n        urlTransform={urlTransform}\n        components={mergedComponents}\n      >\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,IAAa,YAA+B,UAAU;CACpD,MAAM,EACJ,UACA,QAAQ,WACR,WACA,gBAAgB,GAChB,YAAY,kBACZ,KACA,cACA,iBACA,oBACA,eACA,eACA,qBACA,UACA,kBACA,cACA,GAAG,SACD;CAEJ,MAAM,oBAAgC;EACpC,IAAI,UACF,oBAAC,MAAD;GAAM,QAAO;GAAgB;GAAO,MAAM,MAAM;GAC7C,UAAA,MAAM;EACH,CAAA;EAER,IAAI,UACF,oBAAC,MAAD;GAAM,aAAY;GAAW;GAC1B,UAAA,MAAM;EACH,CAAA;EAER,OAAO,UAAU,oBAAC,YAAD;GAAmB;GAAQ,UAAA,MAAM;EAAqB,CAAA;EACvE,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,KAAK,UACH,oBAAC,SAAD;GACE,OAAO,0BAA0B,GAAG,aAAa;GAC1C;GAEN,UAAA,MAAM;EACA,CAAA;EAEX,UAAU,oBAAC,WAAD,CAAY,CAAA;EACtB,MAAM,UAAU;GACd,MAAM,oBAAoB,SAAS,QAAQ,MAAM,QAAQ,CAAC,CAAC;GAE3D,OACE,oBAAC,WAAD;IACE,UAAU;IACV,UACE,eAAuC,iBAAiB,KACxD,kBAAkB,MAAM,YACnB,kBAAkB,MAAM,UAAU,QACjC,aACA,EACF,IACA,KAAA;IAEN,MAAM,OACJ,eAAqC,iBAAiB,IAClD,kBAAkB,MAAM,WACxB,iBACN,CAAC,CAAC,KAAK;GACR,CAAA;EAEL;EACA,KAAK,UACH,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACjC,CAAA;EAER,KAAK,UACH,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,MAAD,EAAA,UAAK,MAAM,SAA0B,CAAA;EACjC,CAAA;EAER,aAAa,UACX,oBAAC,MAAD;GAAa;GACX,UAAA,oBAAC,cAAD,EAAA,UAAa,MAAM,SAAqB,CAAA;EACpC,CAAA;CAEV;CAEA,MAAM,cAAc,0BAA0B,QAAQ;CACtD,MAAM,mBAA+B;EACnC,GAAG;EACH,GAAG;CACL;CAEA,OACE,oBAAC,OAAD;EAAK,WAAW,KAAK,wBAAO,UAAU,SAAS;EAAG,GAAI;EAAW;EAC/D,UAAA,oBAAC,eAAD;GACgB;GACG;GACG;GACL;GACf,eAAe,iBAAiB,CAAC,SAAS;GACrB;GACX;GACQ;GACJ;GACd,YAAY;GAEX,UAAA;EACY,CAAA;CACZ,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  p {\n    white-space: break-spaces;\n  }\n\n  table {\n    border-radius: var(--table--corner-radius);\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    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Markdown.module.mjs","names":[],"sources":["../../../../../../../src/components/Markdown/Markdown.module.scss"],"sourcesContent":[".markdown {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--markdown--spacing);\n  min-width: 0;\n\n  p {\n    white-space: break-spaces;\n  }\n\n  table {\n    border-radius: var(--table--corner-radius);\n    overflow: hidden;\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    thead {\n      font-weight: var(--table--header-font-weight);\n    }\n\n    th,\n    td {\n      padding-inline: var(--table--padding-x);\n      padding-block: var(--table--padding-y);\n      text-align: start;\n      border-style: var(--table--border-style);\n      border-color: var(--table--border-color);\n      border-width: 0;\n    }\n\n    th {\n      border-block-end-width: var(--table--header-border-width);\n    }\n\n    tbody tr {\n      &:nth-of-type(odd) td {\n        background-color: var(--table--background-color-accent);\n      }\n\n      &:not(:last-child) td {\n        border-block-end-width: var(--table--border-width);\n      }\n    }\n  }\n}\n"],"mappings":""}

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

@@ -9,8 +9,8 @@ import { Wrap } from "../Wrap/Wrap.mjs";
 import { useLocalizedStringFormatter } from "../TranslationProvider/useLocalizedStringFormatter.mjs";
 import { OverlayController } from "../../lib/controller/overlay/OverlayController.mjs";
 import { Action } from "../Action/Action.mjs";
-import DivView from "../../views/DivView.mjs";
 import ButtonView from "../../views/ButtonView.mjs";
+import DivView from "../../views/DivView.mjs";
 import { Overlay } from "../Overlay/Overlay.mjs";
 import Modal_module_default from "./Modal.module.mjs";
 import { OffCanvasSuspenseFallback } from "./components/OffCanvasSuspenseFallback/OffCanvasSuspenseFallback.mjs";

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. */\n  [role=\"dialog\"] {\n    display: flex;\n    flex-direction: column;\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  /* 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":""}

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

@@ -2,11 +2,19 @@
 /* */
 import { PropsContextProvider } from "../../lib/propsContext/components/PropsContextProvider.mjs";
 import { flowComponent } from "../../lib/componentFactory/flowComponent.mjs";
+import dynamic from "../../lib/propsContext/dynamicProps/dynamic.mjs";
+import { containsTextChild } from "../../lib/react/remote.mjs";
 import Navigation_module_default from "./Navigation.module.mjs";
 import { LinkListTunnelExit } from "./components/LinkListTunnelExit/LinkListTunnelExit.mjs";
 import clsx from "clsx";
+import { Children } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Navigation/Navigation.tsx
+/**
+* A bare text node is an anonymous flex item that no rule can reach, so give
+* the label an element the item can truncate.
+*/
+var wrapTextInLabel = (children) => Children.map(children, (child) => containsTextChild(child) ? /* @__PURE__ */ jsx("span", { children: child }) : child);
 /** @flr-generate all */
 var Navigation = flowComponent("Navigation", (props) => {
 	const { className, children, ref, ...rest } = props;
@@ -15,6 +23,7 @@ var Navigation = flowComponent("Navigation", (props) => {
 		wrapWith: /* @__PURE__ */ jsx("li", {}),
 		className: Navigation_module_default.item,
 		unstyled: true,
+		children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),
 		Icon: {
 			className: Navigation_module_default.icon,
 			size: "m"

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

@@ -1 +1 @@
-{"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}
+{"version":3,"file":"Navigation.mjs","names":[],"sources":["../../../../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import type { ComponentProps, PropsWithChildren, ReactNode } from \"react\";\nimport { Children } from \"react\";\nimport styles from \"./Navigation.module.scss\";\nimport clsx from \"clsx\";\nimport { dynamic, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport {\n  flowComponent,\n  type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport type { ComponentPropsContext } from \"@/lib/propsContext/types\";\nimport { LinkListTunnelExit } from \"@/components/Navigation/components/LinkListTunnelExit/LinkListTunnelExit\";\nimport { containsTextChild } from \"@/lib/react/remote\";\n\nexport interface NavigationProps\n  extends\n    PropsWithChildren<ComponentProps<\"nav\">>,\n    PropsWithClassName,\n    FlowComponentProps<HTMLElement> {}\n\n/**\n * A bare text node is an anonymous flex item that no rule can reach, so give\n * the label an element the item can truncate.\n */\nconst wrapTextInLabel = (children: ReactNode): ReactNode =>\n  Children.map(children, (child) =>\n    containsTextChild(child) ? <span>{child}</span> : child,\n  );\n\n/** @flr-generate all */\nexport const Navigation = flowComponent(\"Navigation\", (props) => {\n  const { className, children, ref, ...rest } = props;\n\n  const rootClassName = clsx(styles.navigation, className);\n\n  const linkPropsContext: ComponentPropsContext<\"Link\"> = {\n    wrapWith: <li />,\n    className: styles.item,\n    unstyled: true,\n    children: dynamic((linkProps) => wrapTextInLabel(linkProps.children)),\n    Icon: {\n      className: styles.icon,\n      size: \"m\",\n    },\n    Badge: { className: styles.badge },\n    AlertBadge: { className: styles.badge },\n    CounterBadge: { className: styles.badge },\n  };\n\n  return (\n    <PropsContextProvider\n      props={{\n        Link: {\n          ...linkPropsContext,\n          tunnel: {\n            id: \"links\",\n            component: \"Navigation\",\n          },\n        },\n        NavigationGroup: {\n          Link: linkPropsContext,\n        },\n      }}\n    >\n      <nav className={rootClassName} role=\"navigation\" {...rest} ref={ref}>\n        <LinkListTunnelExit id=\"links\" component=\"Navigation\" />\n        {children}\n      </nav>\n    </PropsContextProvider>\n  );\n});\n\nexport default Navigation;\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,IAAM,mBAAmB,aACvB,SAAS,IAAI,WAAW,UACtB,kBAAkB,KAAK,IAAI,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,IAAI,KACpD;;AAGF,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,WAAW,UAAU,KAAK,GAAG,SAAS;CAE9C,MAAM,gBAAgB,KAAK,0BAAO,YAAY,SAAS;CAEvD,MAAM,mBAAkD;EACtD,UAAU,oBAAC,MAAD,CAAK,CAAA;EACf,WAAW,0BAAO;EAClB,UAAU;EACV,UAAU,SAAS,cAAc,gBAAgB,UAAU,QAAQ,CAAC;EACpE,MAAM;GACJ,WAAW,0BAAO;GAClB,MAAM;EACR;EACA,OAAO,EAAE,WAAW,0BAAO,MAAM;EACjC,YAAY,EAAE,WAAW,0BAAO,MAAM;EACtC,cAAc,EAAE,WAAW,0BAAO,MAAM;CAC1C;CAEA,OACE,oBAAC,sBAAD;EACE,OAAO;GACL,MAAM;IACJ,GAAG;IACH,QAAQ;KACN,IAAI;KACJ,WAAW;IACb;GACF;GACA,iBAAiB,EACf,MAAM,iBACR;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAe,MAAK;GAAa,GAAI;GAAW;GAAhE,UAAA,CACE,oBAAC,oBAAD;IAAoB,IAAG;IAAQ,WAAU;GAAc,CAAA,GACtD,QACE;;CACe,CAAA;AAE1B,CAAC"}